Guía para traducir archivos de Figma para diseñadores de UX

La necesidad de experiencias de usuario localizadas se multiplica a medida que el mundo se vuelve más interconectado. Para los diseñadores de UX que buscan expandir su alcance a audiencias internacionales, traducir los proyectos de Figma es un paso crucial.

Figma es una herramienta colaborativa de diseño y creación de prototipos usada por los diseñadores para crear, compartir e iterar proyectos de diseño en tiempo real. Figma funciona como una plataforma basada en la nube, lo que permite a los usuarios acceder y trabajar en sus diseños desde cualquier lugar, facilitando la colaboración fluida entre los miembros del equipo. Con Figma, los diseñadores pueden crear proyectos de UI/UX, wireframes, prototipos interactivos y sistemas de diseño. Gracias a su interfaz intuitiva y sus potentes funciones ha sido adoptado rápidamente por la comunidad de diseñadores, lo que la convierte en una opción líder para los flujos de trabajo de diseño modernos. Figma tiene aproximadamente 4 millones de usuarios en todo el mundo y su base de usuarios aumenta constantemente.

Esta entrada de blog proporciona un procedimiento integral para que los diseñadores de UX traduzcan de manera efectiva sus proyectos de Figma a otros idiomas mientras mantienen la esencia del proyecto original.

¿Qué elementos de Figma deberías traducir?

Al hacer que un proyecto de Figma sea global, normalmente querrás centrarte en traducir y adaptar los siguientes elementos:

1. Contenido textual: Esto incluye todos los elementos textuales dentro del proyecto, como etiquetas de interfaz de usuario, botones, encabezados y cualquier otro contenido basado en texto. La traduccion del texto garantiza que los usuarios de diferentes idiomas puedan comprender e interactuar sin problemas con la interfaz.
2. Imágenes y gráficos: Es posible que algunas imágenes y gráficos deban localizarse en función del contexto cultural. Ciertas imágenes pueden tener diferentes connotaciones o significados en otras regiones, por lo que es esencial revisar y adaptar estos elementos.
3. Símbolos e iconos: Asegúrate de que los símbolos e iconos utilizados en el diseño son culturalmente apropiados y comprensibles para el público destinatario. Si es necesario, considera crear variaciones o alternativas para atender regiones específicas.
4. Formatos de fecha, hora y número: Estos elementos pueden variar de un mercado a otro, por lo que es esencial ajustar los formatos de fecha, hora y número en función de las preferencias del mercado destinatario.
5. Colores: Algunos colores pueden asociarse a diferentes culturas. Si bien esto puede no ser una traducción directa, tener en cuenta las opciones de color puede ayudar a crear un proyecto que resuene mejor con el público objetivo.
6. Diseño y estructura de la interfaz de usuario: Puede ser necesario ampliar el texto y modificar el diseño para ajustarse al texto traducido sin comprometer la experiencia general del usuario. Asegúrate de que el diseño siga siendo coherente y visualmente atractivo en todas las versiones traducidas.
7. Flujos y interacciones de los usuarios: Ten en cuenta las normas y preferencias culturales del público destinatario al diseñar los flujos y las interacciones de los usuarios. Ciertas acciones o gestos pueden ser más familiares e intuitivos para algunos usuarios que para otros.
8. Call-to-Actions: Las CTA son cruciales para guiar a los usuarios y su eficacia puede variar de una cultura a otra. Localiza las CTAs para alentar a los usuarios a realizar las acciones deseadas de una manera que resuene con ellos.
9. Mensajes de error y notificaciones: Asegúrate de que los mensajes y las notificaciones de error sean claros, concisos y culturalmente apropiados, y de que sirvan para que los usuarios comprendan los problemas que puedan encontrar durante sus interacciones con el producto.
10. Información jurídica y sobre el cumplimiento de la normativa: Si tu producto requiere descargos de responsabilidad legal, términos de servicio o políticas de privacidad, asegúrate de que estos documentos se traduzcan con precisión y de conformidad con las leyes y reglamentaciones pertinentes de la región de destino.

Preparar tu proyecto de Figma para traducir

Para garantizar un proceso de traducción fluido, es fundamental configurar correctamente el proyecto de Figma. Organiza tus archivos con convenciones de nomenclatura adecuadas y estructuras de capas claras. Esto ayudará a los traductores a identificar y traducir elementos de texto de manera eficiente. Evita el uso de texto incrustado en las imágenes, ya que complica el proceso de traducción.

Traducir el contenido textual

En este artículo sobre el proceso de localización, nos centraremos en traducir el contenido textual, o sea todos los elementos de texto dentro del proyecto:

• etiquetas de interfaz de usuario
• botones
• encabezados
• y otro contenido basado en texto.

Como hemos visto en otros artículos de este blog, para facilitar el trabajo de los traductores, el enfoque ideal es exportar el contenido textual a un archivo. A continuación, se envia este archivo a los traductores. Por último, debes volver a importar el archivo traducido al proyecto Figma: cada contenido textual debe estar en el lugar adecuado para evitar el largo y tedioso copiar y pegar.

Afortunadamente, varios complementos de Figma facilitan este proceso de exportación e importación, eliminando la necesidad de operaciones manuales. Puedes encontrar una descripción general de los complementos disponibles visitando la Comunidad de Figma. Este hub alberga varios complementos y recursos creados por diseñadores y desarrolladores. Simplemente selecciona la sección Complementos y busca «traducción».

En este artículo, nos centraremos en el complemento Conversis Translation XML Text Export & Import, que está disponible de forma gratuita y permite exportar el contenido textual de un proyecto de Figma a formatos XLIFF o XML, así como volver a importar el archivo traducido en una copia del proyecto original, sobrescribiendo el texto con la traducción.

Vamos a utilizar una plantilla gratuita de Figma como ejemplo:

Usar el complemento Conversis Translation XML Text Export & Import

Instalar el plugin Conversis Translation XML Text Export & Import es inmediato:

1. Para comenzar, abre Figma y navega hasta la Comunidad de Figma haciendo clic en el botón «Community» en la esquina superior izquierda de la interfaz de Figma. Se abrirá una nueva ventana que muestra todos los complementos y activos de diseño disponibles.
2. Una vez dentro de la comunidad de Figma, usa la barra de búsqueda para buscar el complemento Conversis Translation XML Text Export & Import. Escribe el nombre del complemento en la barra de búsqueda y presiona Entrar. Los resultados de la búsqueda mostrarán los plugins relevantes; el plugin Conversis Translation XML Text Export & Import debería aparecer en la lista.
3. Después de ubicar el complemento Conversis Translation XML Text Export & Import, haz clic en su icono o nombre para ver la página de detalles. Encontrarás información sobre el complemento en esta página, incluida su descripción, autor y reseñas de usuarios.
4. Para instalar el complemento, haz clic en el botón «Try it out» para abrir un cuadro de diálogo de confirmación. Confirma la instalación haciendo clic en «Open Figma design». Figma descargará y agregará automáticamente el complemento a tu espacio de trabajo.

Una vez completada la instalación, abre el proyecto de Figma que quieres traducir. Asegúrate de que el proyecto contenga todos los elementos de texto que quieres exportar.

Puedes acceder al plugin Conversis Translation XML Text Export & Import directamente en Figma. Para poder hacerlo:

1. Abre un archivo de proyecto de Figma o crea uno nuevo.
2. En la barra de menú superior, navega hasta el menú desplegable «Plugins»
3. Ubica el complemento Conversis Translation XML Text Export & Import.
4. Haz clic en él para acceder a sus características y funcionalidades.

Cuando uses el complemento Conversis Translation XML Text Export & Import por primera vez, es posible que tengas que otorgar los permisos necesarios para garantizar un funcionamiento fluido. Algunos complementos pueden requerir acceso a tus archivos y datos de Figma para realizar ciertas acciones, como exportar e importar elementos de texto. Figma te pedirá que autorices los permisos del complemento, y puedes continuar otorgando el acceso necesario para garantizar que el complemento funcione sin problemas dentro del flujo de trabajo de diseño.

Con la interfaz del complemento abierta, verás opciones para exportar el texto para su traducción. Selecciona el formato de exportación adecuado, que puede ser XLIFF o XML, según tus preferencias o los requisitos del servicio de traducción que estés utilizando.

Nota: se recomienda utilizar el formato XML, ya que el formato XLIFF puede no ser compatible con todas las herramientas TAO.

El complemento extraerá automáticamente todos los elementos de texto de tu proyecto de Figma y los preparará en el formato elegido, dejándolo listo para la traducción.

Una vez exportado el texto, comparte el archivo XML con tus traductores profesionales o tu empresa de traducción. Los traductores pueden usar estos archivos para trabajar directamente en el texto traducido mientras conservan la estructura del proyecto original. El archivo XML se puede abrir en cualquier herramienta de traducción asistida. Si necesita ayuda para configurar su herramienta TAO/CAT, contáctenos.

Colaborar con traductores profesionales

La precisión y la calidad de la traducción son cruciales para un proyecto de UX localizado correctamente. Colabora con traductores profesionales o empresas de traducción que dominen el idioma de destino y tengan experiencia en terminología UX y los matices de los proyectos de diseño. La comunicación clara entre el diseñador de UX y los traductores garantiza un resultado de traducción coherente.

Importar las traducciones con el complemento Conversis Translation XML Text Export & Import

Después de recibir los archivos XLIFF o XML traducidos de los traductores:

1. Vuelvo al proyecto de Figma.
2. Crea una copia del proyecto original para asegurarte de que el texto traducido se integre sin alterar el original.
3. Con la copia de este proyecto abierta, accede nuevamente al complemento Conversis Translation XML Text Export & Import.
4. Esta vez, selecciona la opción para importar el texto traducido.
5. El complemento importará el contenido traducido nuevamente en el proyecto de Figma, reemplazando automáticamente el texto original con las traducciones.

Así es como se ve el archivo de muestra después de la fase de traducción (con el texto traducido automáticamente al italiano, sin revisar):

Revisar, perfeccionar y comprobar

Revisa detenidamente las traducciones importadas para asegurarte de que encajen perfectamente en el proyecto. La expansión del texto es un desafío común en la traducción: según los idiomas, el texto traducido puede ser más largo que el original. Los diseñadores deben tener en cuenta esta posibilidad creando componentes de interfaz de usuario flexibles y asegurando suficiente espacio en blanco para acomodar traducciones más largas sin comprometer la integridad del diseño. Ajusta los cuadros de texto, los tamaños de fuente o los componentes de la interfaz de usuario para adaptarlos a cualquier expansión de texto provocada por el contenido traducido.

Después de integrar la traducción, realiza pruebas exhaustivas para garantizar que la experiencia del usuario sea fluida e intuitiva. Los comentarios de los usuarios y las partes interesadas te ayudarán a identificar problemas o mejoras en el proyecto localizado.

Traducir los proyectos de Figma para una audiencia internacional es un proceso multifacético que requiere una cuidadosa consideración de los matices culturales y los elementos de diseño. Siguiendo los pasos descritos en esta guía, los diseñadores de UX pueden crear una experiencia de usuario perfecta que resuene con usuarios de diferentes orígenes lingüísticos. La clave es colaborar de manera efectiva con traductores profesionales, tener en cuenta las adaptaciones de diseño e iterar en función de los comentarios de los usuarios para lograr un proyecto localizado con éxito.