Figma: qué es y cómo funciona

Figma es un interesante e innovador editor de gráficos vectoriales diseñado para páginas web y cuyo uso ha ido creciendo sin parar durante los últimos años. A día de hoy, es una de las plataformas más utilizadas por diseñadores UX/UI, agencias de comunicación y empresas de todo el mundo.

La primera versión de Figma se lanzó en 2015 con un propósito claro: permitir que todo el mundo pudiera ser «creativo con un navegador». En 2022, Adobe, la gran empresa estadounidense conocida por su gran variedad de programas de diseño digital, compró Figma por unos 20 000 millones de dólares.

Aún no sabemos cuál será el futuro de Figma, pero, sin duda alguna, la plataforma es una de las herramientas de diseño gráfico de páginas web e interfaces de aplicaciones más populares a día de hoy. Vamos a analizar qué es Figma y cómo funciona: una guía para todos aquellos que no conozcan el programa o que solo han oído hablar de él.

¿Qué es Figma?

Figma es una plataforma de edición gráfica y diseño de interfaces. Además, es una plataforma online y colaborativa. Con Figma se puede hacer un poco de todo a nivel de diseño gráfico, desde diseñar páginas web e interfaces gráficas de aplicaciones, o crear publicaciones para redes sociales, hasta la posibilidad de poder crear presentaciones. Por este motivo, es una de las herramientas más valoradas por empresas y estudios de diseño gráfico.

Una de las características más innovadoras de Figma es, sin duda, el hecho de que es una herramienta colaborativa. En un mismo archivo, pueden trabajar todos los distintos miembros de un equipo y, además, en tiempo real: esto significa que los diseñadores gráficos pueden empezar con la creación de un diseño, pero que los desarrolladores y los copywriters ya están involucrados en el proyecto desde las primeras fases del mismo.

¿El resultado? Se ahorra un montón de tiempo: se acabaron los intercambios interminables de archivos. Además, la colaboración potencia la creatividad.

El hecho de que Figma sea online, es decir, que se pueda acceder a través del propio navegador, es otra característica que gusta mucho: no es necesario instalar ni actualizar programas ni comprar licencias. Todos los miembros del equipo pueden trabajar desde cualquier sistema operativo sin preocuparse, entre otras cosas, de las fuentes que tenga instaladas o de cambiar de ordenador.

Todos los progresos se guardan en la nube y en tiempo real, evitando problemas varios como el de trabajar en archivos que han quedado obsoletos o el de perder mucho tiempo intercambiando archivos muy pesados. Evidentemente, para utilizar Figma hay que estar prácticamente siempre online y tener una conexión a Internet buena y estable.

Con esto ya debes tener una idea más elaborada de lo que es Figma. Por último, hemos de decir que Figma es un programa gratuito, al menos en su versión básica. El paquete gratuito Starter te permite trabajar con tres archivos dentro de un proyecto y guarda las versiones anteriores durante 30 días. Hay que subrayar que tanto los estudiantes como los profesores pueden solicitar el acceso gratuito (en este enlace) también para la versión profesional de Figma, que para el resto de usuarios cuesta 12 $ al mes.

En resumen, Figma es:

• Un programa de edición gráfica y prototipado.
• Una plataforma que se utiliza principalmente para el diseño digital, es decir, para diseñar páginas web e interfaces de aplicaciones.
• Una plataforma online. No hay que descargar e instalar ningún software, sino que se usa en el navegador mediante una conexión a Internet.
• Un programa colaborativo. Usuarios distintos con roles diferentes pueden trabajar en el mismo proyecto al mismo tiempo.
• Una plataforma en tiempo real, ya que todo se guarda automáticamente en la nube.
• Un programa gratuito en su versión básica.

¿Cómo funciona Figma?

¿Tienes ya una idea más clara de qué es Figma y de sus posibilidades? Antes de repasar juntos cómo funciona Figma , o, al menos, sus elementos básicos y más innovadores, hay que hacer una aclaración sobre un aspecto importante: Figma no solo es tremendamente eficaz en el diseño final de un producto gráfico. También, y sobre todo, en todas las fases anteriores.

Lluvias de ideas, evaluaciones de distintas opciones gráficas, prototipado y recopilación e implementación de comentarios: Figma se puede usar de forma muy eficaz en todas estas fases. Por ejemplo, en Figma, un equipo de diseñadores puede crear colaborativamente el wireframe de una página web (es decir, el esqueleto de un diseño sin colores o estilos), recopilar los primeros comentarios del resto de miembros del equipo o votar la mejor opción. También pueden hacer el prototipo de la interfaz de una aplicación: es decir, simular en las primeras fases del proyecto la navegación y la interacción en un diseño.

Vamos a explicar ahora cómo funcionan los elementos básicos de Figma. Al final del artículo, te recomendamos algunos cursos y recursos para profundizar un poco más y convertirte en todo un profesional de Figma.

Crear una cuenta

Para crear una cuenta, tan solo tienes que registrarte de forma gratuita en figma.com. Una vez que te hayas registrado, puedes crear equipos, proyectos y archivos (files). Además, puedes invitar a otros usuarios del equipo para darles acceso a los proyectos en los que vais a trabajar.

El espacio de trabajo

El espacio de trabajo de Figma  es enorme (un cuadrado de hasta 65 000 píxeles) y dentro puedes añadir las distintas pantallas del diseño en el que estés trabajando.

Para configurar las pantallas, utiliza la herramienta de marcos (frames): puedes elegir entre muchos tamaños predefinidos, como por ejemplo el del iPhone 14, el del Apple Watch 41 mm o el de una publicación de Facebook. De esta forma, por ejemplo, puedes recopilar en un solo archivo las distintas páginas de una página web o mostrar cómo se visualizará una misma página en dispositivos diferentes.

Bibliotecas y comunidad

Otra herramienta interesante de Figma son las bibliotecas de componentes. Si no quieres perder tiempo creando de cero los elementos, puedes acelerar la creación de un diseño (o de un boceto) utilizando los elementos gráficos más dispares que ya estén disponibles en las bibliotecas. En las bibliotecas puedes encontrar cosas como los iconos o botones más comunes.

Navega por la comunidad de Figma (uno de los apartados más interesantes y útiles de la plataforma) para encontrar estos y otros elementos. En ella puedes encontrar inspiración, materiales para hacer una lluvia de ideas y los denominados sistemas de diseño, es decir, un conjunto de reglas, directrices y elementos gráficos que ayudan a dar coherencia a tu proyecto gráfico.

Prototipado

En la sección Prototype de Figma, puedes vincular entre sí distintas pantallas o elementos gráficos mediante la identificación de nodos: por ejemplo, puedes colocar un nodo en el elemento «Acerca de» de un menú y este llevará al usuario a la página correspondiente. O también puedes hacerlo en el botón «Suscríbete a la newsletter». Si pones en marcha el prototipo, puedes simular el funcionamiento de una página web o de una interfaz de una aplicación incluso en las primeras fases del proyecto. Así puedes saber qué funciona y qué hay que mejorar.

Recopilación de comentarios

Una vez que hayas compartido el archivo con el resto del equipo, se puede recibir y hacer comentarios a través de notas de colores. Estas notas se utilizan para votar, para informar de problemas o para dar consejos a través de comentarios más estructurados. Por ejemplo, puedes presentar a tu equipo tres opciones diferentes de diseño y saber, en tiempo real, lo que piensan tus compañeros.

Los comentarios también se pueden comunicar verbalmente al programa, que pasará a transcribirlos. Cómodo, ¿verdad?

Cursos y otras herramientas útiles para utilizar Figma

¿Ya sabes qué es Figma y cómo funciona? Como habrás podido apreciar, sus posibilidades son innumerables. Seguro que ya tienes ganas de meterle mano al programa y hacer tus primeros experimentos creativos junto a tu equipo.

Si quieres convertirte en todo un profesional, en la web hay una ingente cantidad de recursos gratuitos para aprender a usar Figma mucho mejor.

Una primera introducción bastante útil es la que ofrece la propia Figma y que puedes encontrar aquí abajo: en poco más de una hora, los vídeos te ofrecen una panorámica completa de lo que es la plataforma.

En Internet hay muchísimos cursos y la mayoría son gratuitos. Por ejemplo, este curso de Sherpa Design, la comunidad italiana de diseñadores UX/UI, es muy interesante. Figma también ofrece cursos oficiales, con módulos de diez minutos cada uno. The Designer Ship también ofrece un curso para principiantes.

 Una pasada, ¿verdad? Ahora que ya sabemos qué es y cómo funciona Figma, ¿en cuál de tus próximos proyectos lo vas a utilizar?