¿Por qué usamos Figma?

Como agencia Martech, nos gusta estar siempre al tanto de las nuevas tecnologías. ¿Por qué? Porque las herramientas que utilizamos hoy mejoran nuestra productividad y agilizan nuestro workflow. La búsqueda de nuevas aplicaciones o programas nos permite crecer en nuestra forma de trabajar y, por eso, hace unos meses decidimos incorporar una nueva herramienta: el trabajo colaborativo de Figma.

¿Qué es Figma?

Figma es una herramienta de diseño de interfaz colaborativa que se ha hecho muy popular recientemente, hasta el punto de que muchos diseñadores la llaman “el futuro”. No es mejor o peor que Adobe XD o Sketch, porque cada una tiene sus virtudes y defectos, pero Figma, con tan sólo unos pocos años desde su aparición, ha logrado cambiar la forma en la que los equipos trabajan.

Colabora con tu equipo en tiempo real

La principal ventaja de Figma es que permite el trabajo de manera colaborativa, es decir, permite que varias personas puedan colaborar dentro del mismo proyecto simultáneamente y en tiempo real, añadiendo comentarios o diseñando. Los cambios se van guardando continuamente en el archivo de forma que los usuarios siempre ven las últimas modificaciones sin necesidad de estar siempre sincronizados o de enviarse documentos. En definitiva, ayuda a que varios usuarios puedan trabajar, por ejemplo, en el diseño de una app, de forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado.

Trabaja online u offline

En un principio, Figma funcionaba solamente dentro de tu navegador, al ser una aplicación web (SaaS o Software as a Service) que se puede utilizar en sistemas operativos macOS, Windows y Linux. Sin embargo, hace un par de años introdujeron las versiones de escritorio para Mac y Windows, dando la posibilidad al usuario de usarlo offline.

Crea tus componentes

Componentes...¡el término preferido de los diseñadores UI! Aunque desarrollaremos un poco más este tema en otro artículo, explicado de una forma sencilla, diríamos que, cuando hay un elemento que debe utilizarse en varias pantallas, Figma ofrece la oportunidad de convertirlo en un “componente” para que cualquier cambio que se aplique sobre éste, quede automáticamente actualizado en todas las pantallas. Además, permite modificar uno de los elementos específicos de una instancia, sin alterar ninguna más pero, a la vez, sin romper la relación entre todas las réplicas. Esto último hace que siempre se pueda volver a recuperar la copia original.

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, los cambios se realizan en todos los diseños. Por último, Figma permite realizar variantes de un componente, lo cual es muy útil para generar los diferentes estados del elemento. Por ejemplo, si tengo un componente “botón”, puedo generar su variante “hover” y su variante “desactivado”, que luego podré seleccionar desde el panel de herramientas en la sección “variantes”.

Autolayout

Figma posee una herramienta mágica que se llama “Autolayout”. Un AutoLayout es un Frame con una característica especial, un marco dinámico que se adapta o ajusta según los contenidos que tenga en su interior o a su alrededor. Los podemos usar para crear botones, menús, cajas, celdas, listas o tarjetas con cualquier tipo de información. Todos estos contenedores “estarán vivos” porque podrán cambiar de tamaño cuando tengamos que añadir, quitar u ordenar los elementos que haya en su interior o que estén a su lado. ¿Nunca pensaste que iba a ser tan fácil generar los responsive de un producto? ¡Con Figma, lo es!

Plugins

Si en algo ganaba Sketch con respecto a Figma era en la posibilidad de instalar plugins en el programa. Sin embargo, hace un poco más de un año, Figma se ha puesto las pilas y ha añadido su ecosistema de plugins. Los plugins son un gran aliado ya que facilitan tu trabajo, ayudan a la integración con otros servicios y, entre otras muchas cosas, automatizan algunas tareas. Además, cualquiera puede crear un plugin, por lo que, si no encuentras el que funciona para ti, puedes crearlo tú mismo.

Figmamirror

Pasadas algunas semanas, llegó la esperada app para mobile: “Figma mirror”. A pesar de ser un simple mirror, era necesaria para complementar la experiencia, ya que resulta muy útil para visualizar las interfaces que diseñamos para teléfono, de una manera más nativa y con la opción de navegar sobre los prototipos. Esta app funciona perfectamente para su fin.

Figma Jam

Recientemente, Figma introdujo esta herramienta que permite realizar retrospectivas de equipo, flujos de usuario, sesiones de ideación conjuntas, moodboards, priorizaciones, etc. Tal y como lo definen ellos mismos, FigJam es “una pizarra online para que los equipos ideen y hagan brainstorming juntos”.

Es fácil de aprender

Figma tiene un canal de youtube donde sube todos los tutoriales sobre cómo utilizar la herramienta. Si tienes curiosidad y quieres aprender a usarla, sólo debes poner play y practicar. En unas pocas horas, ¡ya serás todo un experto!

Conclusión

Figma es una aplicación basada en navegador para diseñar interfaces 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. En Digital Hamster, Figma es la herramienta que elegimos para realizar todos nuestros proyectos. ¿A qué esperas para probarla?