¿Qué es Figma? | Envato Tuts+

Spanish (Español) translation by Elena Pari (you can also view the original English article)

Figma es una aplicación para diseñar interfaces que se ejecuta en el navegador, pero en realidad es mucho más que eso. Me atrevería a decir que es probablemente la mejor aplicación para proyectos de diseño colaborativo en equipos. Veamos.

Figma te brinda todas las herramientas necesarias para la fase de diseño del proyecto, incluidas las herramientas vectoriales capaces de ilustrar completamente, así como aquellas para la creación de prototipos y la generación de código para el traspaso (hand-off).

Figma funciona en línea

Aunque Figma funciona en el navegador, también hay una versión de escritorio para Windows y Mac OS. Posiblemente se trate aplicaciones “empaque” que ejecutan un navegador dentro de ellas; pero ya sea ese el caso o no, Figma siempre se ejecuta en línea dentro de esas aplicaciones.

Nota: Si pierdes la conectividad, puedes seguir trabajando en cualquier documento que ya hayas abierto.

Colaboración

La naturaleza “siempre en línea” de Figma en realidad le proporciona algunas de sus mayores fortalezas. Una de ellas es que Figma permite la colaboración en vivo y en tiempo real. Tanto tú como los miembros de tu equipo pueden iniciar sesión a la vez y hacer cambios en un diseño al mismo tiempo. Y el hecho de que todos estos diseños estén guardados en línea significa que nunca tendrás que preocuparte de que los miembros del equipo no estén sincronizados con el proyecto. Los últimos cambios están siempre en el archivo, y no hay que transferir archivos entre miembros del equipo ni enviar archivos desde o hacia cualquier plataforma de almacenamiento de terceros.

Esto también significa que tanto tú como tu cliente pueden ver un diseño al mismo tiempo. Por lo tanto, incluso si se encuentran en lugares diferentes, ambos pueden ver lo mismo. El cliente puede hacer sugerencias y tú puedes implementarlas allí mismo.

Además de todas estas herramientas de colaboración en tiempo real, también se puede dejar comentarios directamente en el área de trabajo.

Bibliotecas de componentes

Figma permite crear bibliotecas de componentes reutilizables a los que todo el equipo tiene acceso. Los componentes le dan a los diseñadores una ventaja en cualquier sistema de diseño existente, y cuando un componente se actualiza en la biblioteca central, esos cambios se realizan en todos los diseños para todos.

Prototipos y codificación

Para crear prototipos, puedes establecer conexiones y puntos de acceso en el diseño para simular cómo un usuario navegaría a través de esa interfaz. Para la fase de codificación, Figma puede generar códigos SVG, CSS, iOS y Android.

Los detalles

Eso sería todo en cuanto a los aspectos colaborativos de Figma, pero la mejor parte de Figma es en realidad más difícil de identificar. Figma combina muy bien todos los pequeños detalles, y hay una larga lista de ellos que hemos reunido en una serie llamada Consejos y trucos de Figma. Hay demasiados para mencionarlos aquí, pero estos son algunos de mis favoritos:

En Figma, un nodo en un vector puede tener varios segmentos adjuntos (más que solo los dos estándar) con los que se puede crear formas más complejas llamadas “redes vectoriales”.
Figma permite importar rápidamente varias imágenes a la vez, ubicándolas exactamente donde uno desea.
Cuando mueves un objeto alrededor del lienzo en Figma, verás su altura y anchura indicadas en las reglas.
Se puede copiar directamente desde Figma el código SVG de un objeto y, viceversa, se puede copiar el código SVG de un editor de código y pegarlo como un gráfico en el lienzo de Figma.

En resumen: qué es Figma

Figma es una aplicación basada en navegador para diseñar UI y UX que cuenta con excelentes herramientas de diseño, creación de prototipos y generación de código. Actualmente es (posiblemente) la herramienta líder en la industria para diseñar interfaces y cuenta con características sólidas que respaldan a los equipos que trabajan en cada fase del proceso de diseño. Si aún no lo has probado, ¡hazlo!

figma.com
@figmadesign en Twitter

Si quieres aprender más, revisa los siguientes recursos: