Qué es FIGMA y para qué sirve ▶ La mejor herramienta UX y UI

Es el futuro, me dijeron después de preguntar qué es Figma. Hoy te quiero hablar sobre esta herramienta de diseño de interfaz colaborativa. Con ella los profesionales UX/UI podemos crear, probar y compartir nuestros diseños.

Pero antes de comenzar con la introducción a Figma te quiero contar brevemente mi relación con los programas de diseño.

El trabajo de un diseñador UX/UI

En 1990 instalé en un viejo Macintosh la primera versión de Adobe Photoshop. Durante mucho tiempo trabajé con esa herramienta. Instalaba el software en mis ordenadores, aplicaba las actualizaciones disponibles y así pasé muchos años de versión en versión.

A comienzos del 2000 lo comencé a dejar, trabajaba casi todo el día utilizando aplicaciones de la empresa Macromedia. Curiosamente, unos años después pasaron a ser de Adobe. Me sentía atado, sabes bien que las licencias de Adobe siempre fueron… «importantes».

qué es figma y para qué sirve — El diseño de mi sitio web versión 2020 lo estoy haciendo con Figma.

En 2010 después de probar unas semanas la versión beta de Sketch decidí comprar la aplicación. Encontré en ella las mismas herramientas que utilizaba en Photoshop para hacer mi trabajo. Unos meses después ya no utilizaba las aplicaciones de Adobe. Es más, en algunos de mis ordenadores ni siquiera las tenía instaladas. Con este programa de la empresa Bohemian Coding descubrí que no se necesita un Ferrari para ir a comprar el pan. Imagino que entiendes lo que quiero decir.

En 2014 incorporé una nueva herramienta en mi flujo de trabajo, compré Affinity Designer y tiempo después me hice con Affinity Photo. Las sensaciones fueron las mismas que con Sketch, tenía la posibilidad de crear diseños profesionales pagando licencias razonables. Las tres aplicaciones funcionaban perfectamente en todos mis ordenadores, los nuevos y los viejos con menos potencia y prestaciones técnicas.

Aprende Figma desde cero recorriendo la guía de herramientas oficial.

Si llegaste hasta aquí y no conoces las apps de las que estoy hablando te diré que Sketch es un programa para el sistema macOS de Apple, la Suite de Affinity (Designer, Photo y desde hace poco Publisher) se puede utilizar en Macintosh y Windows.

¿Por qué te cuento estas cosas? Comparto mi experiencia para que entiendas el cambio de paradigma que me llevó a perder el miedo a trabajar con herramientas desconocidas y «poco probadas». La transformación comenzó con la compra de Sketch. No la hice de un día para otro, el cambio fue progresivo. Debería en realidad hablar en presente, porque el cambio lo sigo haciendo, hoy te estoy introduciendo en Figma.

Sigamos hablando del próximo paso.

Figma en español

Persiguiendo el objetivo de optimizar nuestro flujo de trabajo utilizando un mejor sistema de diseño comentamos con un compañero la posibilidad de dejar Sketch y pasar a Figma.

Figma funciona dentro de tu navegador, es una aplicación web (SaaS o Software as a Service) que puedes utilizar en sistemas operativos macOS, Windows y Linux. Aunque existen versiones de escritorio para Mac y Windows la posibilidad de usarlo en línea te dará libertad total. Cuando comencé a diseñar con Figma experimenté las mismas sensaciones que tuve en 2006 cuando pasé de Office a Google Docs de la hoy Google Drive o Google Suite.

En el momento de escribir este artículo Figma tiene tres planes disponibles. Starter, Professional y Organization. La primera es gratuita, 100% funcional pero con algunas limitaciones. Las otras dos son de pago pero los precios son muy asequibles. Un detalle, si eres estudiante también podrás utilizar libremente la versión Professional.

Si usas Figma en línea te olvidarás de instalaciones y actualizaciones. Es más, podrás guardar tus diseños en la nube de forma ilimitada, incluso con la versión gratuita. Si te descargas la versión de escritorio tampoco es un problema, la instalarás sólo una vez y sus upgrades son rapidísimos.

Características de Figma

Aunque mi idea es publicar más artículos con información y tutoriales de Figma me gustaría hacer un repaso de sus características principales.

Wireframes

Hasta hace poco tiempo los wireframes que montaba durante el proceso de creación los hacía con Balsamiq Wireframes, una aplicación que apareció en 2008. En su momento era todo un referente, quizás hoy lo siga siendo.

Pero ya no uso Balsamiq Wireframes en mis ordenadores. Con Figma puedes crear wireframes. Como te contaré a continuación a estos esquemas de páginas y pantallas podrás convertirlos en el diseño final y hasta a crear prototipos con ellos.

Diseño

Con Figma puedes diseñar pantallas de sitios web, aplicaciones móviles y cualquier otra interfaz gráfica interactiva. Encontrarás en sus paneles de herramientas muchas similitudes con otros programas como Sketch o InVision Studio.

Podrás crear y editar formas con vectores y nodos, utilizar paletas de colores y maquetar textos sin poner límites a tu imaginación. Tus ideas fluirán con facilidad porque pondrás toda tu atención en el diseño.

En este screencast puedes ver cómo se usa Figma, cuando lo pruebes te sentirás dentro de tu aplicación favorita.

Insisto, dedicaré próximos artículos de este blog para comentar con detalle todas las opciones que Figma ofrece al profesional del diseño UX/UI.

Tutoriales de Figma

Aquí debajo te dejo mi lista de los tutoriales que he creado hasta el momento:

Cómo crear animaciones en Figma sin plugins
Cómo crear un enlace a un imagen
Cómo crear links en Figma
Componentes interactivos
Todas las herramientas de Figma
Canvas, el lugar donde diseñamos
Auto Layout
Auto Layout con atajos de teclado
Auto Layout desde el menú contextual
Auto Layout desde el menú o icono hamburguesa
Auto Layout desde tu propio módulo

Si no te quieres perder ningún contenido puedes recibir mi Newsletter en tu correo electrónico.

Prototipos animados

Figma te permite crear prototipos animados con tus wireframes y diseños. Podrás darle vida a tus pantallas para mostrar el camino que harán tus usuarios y clientes.

Con un diseño prototipado que parece real tu equipo de trabajo podrá evaluar el proyecto y sacar las conclusiones necesarias para seguir con la idea original o para hacer los cambios que llevarán tu creación al éxito.

Codificación

Dentro de la aplicación encontrarás un panel de código. Sin salir de Figma podrás utilizar un inspector de código para ver o interpretar tu diseño. Muy parecido al que tienes disponible en Sketch, o al usas en navegadores como Google Chrome o Mozilla Firefox.

Entre muchas otras cosas podrás generar o códigos en formatos SVG, CSS, iOS y Android.

Colaboración

Si tienes compañeros de trabajo que no están a tu lado no hay problema, Figma te ayuda a compartir tus diseños y prototipos con un simple enlace. Sólo se necesita un dispositivo con conexión a Internet. Tus compañeros de trabajo podrán dejar sus comentarios en contexto, incluso podrán editar y hacer cambios si así lo deseas. Con Figma la colaboración es muy fácil.

Sistemas de diseño

Si en tu empresa tienes un sistema de diseño escalable cualquier integrante del equipo podrá reutilizarlo infinitamente. Incluso lo podrás actualizar con nuevos elementos y herramientas ayudando a los diseñadores a trabajar más rápido y con más organización. Dedicaré también algunos artículos a este tema puntual.

Plugins

La comunidad que hay detrás de Figma crece de manera constante. Diseñadores y programadores desarrollan y ofrecen plugins para hacer de Figma una herramienta mucho más poderosa.

Está pasando lo mismo que en su momento ocurrió con Sketch, las posibilidades que esta herramienta nos ofrece a los diseñadores de experiencia de usuario son realmente infinitas.

En el artículo Los mejores plugins de Figma te cuento cuáles son mis plugins favoritos y cómo los selecciono e implemento en mi workflow.

Config, la conferencia de Figma

Figma organiza todos los años un evento llamado Config.

Config 2021

Hay fecha para Config 2021, el evento de Figma más importante del año. Será realizará el 21 de abril. En cuanto haya más información sobre el evento y los ponentes que participarán la compartiré aquí mismo.

Config Europe 2020

Varios meses después de hacer el primer Config se organizó un evento virtual llamado Config Europe en el que participar ponentes y asistentes de muchos países del mundo. El objetivo fue el de siempre, reunir a usuarios de Figma para hacer crecer la comunidad y que todos aprenden de todos. El primer Config Europe se realizó el 17 de septiembre de 2020.

Config 2020

Durante el mes de febrero de 2020 Figma organizó Config, una conferencia realizada en San Francisco, al evento asistieron más de 1000 usuarios de la aplicación, profesionales del desarrollo y el diseño de todos los niveles que enseñaron y aprendieron unos de otros.

La conferencia la abrió Dylan Field, el CEO de Figma, para agradecer la asistencia y compartir información sobre el crecimiento y consolidación de la aplicación.

Luego hablaron casi 40 ponentes de empresas como Dropbox, Shopify, NPR (la radio pública de Estados Unidos), Microsoft, Autodesk, Atlassian, GitHub, Etsy, Asana o Uber. Seguro que alguna de estas firmas te suena. Efectivamente, como lo estás pensando, ellos también usan Figma.

Hablaron del uso de Figma con casos reales, técnicas que implementan en su trabajo diario, nuevas herramientas, futuras características de la aplicación, etc.

Está disponible el livestream de la conferencia, lo puedes ver aquí mismo.

Curso de Figma

¿Te interesa hacer un curso para aprender a usar Figma? Como dije mi intención es publicar más artículos sobre la aplicación, su uso y la implementación de la misma en procesos creativos. Este post lo actualizaré cada vez que publique información sobre Figma.

Por cierto, estoy compartiendo directos con clases y tutoriales en Twitch.

Te pido entonces, por favor, que sigas con atención mis noticias. Y al mismo tiempo te invito a dejar tus preguntas, reflexiones, experiencias y/o sugerencias en un comentario.

¿Qué? ¿Te animas a dar el salto?

¿Qué es Figma y para qué sirve?

El trabajo de un diseñador UX/UI

Figma en español