Aprender y dominar una herramienta nueva puede ser un reto. Por esto he escrito esta pequeña guía para que aprender qué es Figma y cuáles son sus características principales no sea tan complicado.
Te dejo con la tabla de contenidos para que puedas leer directamente lo que te interesa:
¡Vamos allá!
Primeros pasos con Figma
Como Figma está basado en el navegador, lo único que tienes que hacer es registrarte y ya puedes empezar a diseñar. Así, sin más.
Si eres como yo y “necesitas” tener una aplicación instalada, también puedes descargarla. Y lo mejor es que, además, también es compatible con Windows.
Lo primero que te encuentras es una pantalla similar a la siguiente:
En la parte superior hay una serie de opciones, que son las que te permiten crear tu primer archivo de Figma:
- Design te permitirá crear un archivo de Figma para diseñar o hacer un prototipo.
- FigJam sirve para crear un archivo que sirva como pizarra blanca (whiteboard), para crear flujos, diagramas y otros elementos.
- Slides es el formato que necesitas si quieres crear presentaciones.
- Buzz está orientado a la creación de assets de marca y campañas digitales.
- Site te sirve para crear una página web sin código ✨
- Make incorpora inteligencia artificial para crear rápidamente un diseño.
- El último icono sirve para importar un archivo. Por ejemplo, uno de Sketch (.sketch), Figma (.fig) e incluso imágenes en PNG, JPG, HEIC o GIF.
A la izquierda hay un pequeño menú, que sirve para ordenar los proyectos en recientes (recents), borradores (drafts) y favoritos.
Si estás dentro de un proyecto, así es como se ve. Si quieres crear un nuevo archivo tendrás que hacer clic en el botón azul, que te abrirá una lista con las opciones que te he descrito en la lista de más arriba.
Características de Figma
Todo está en la nube
Como te he avanzado en la introducción, Figma está basado en el navegador. Lo que significa que tus archivos estarán siempre accesibles y podrás evitar perder tiempo (e invertir dinero) en servicios de almacenamiento como Google Drive y Dropbox.
Tienes también un historial de cambios de cada archivo, por lo que siempre podrás volver a algún punto anterior. Y todo lo que borres está accesible durante 30 días, de manera que podrás recuperarlo si lo has eliminado por error.
Creando un archivo: la interfaz
Si haces clic en “Design file” que te he comentado antes, verás la interfaz de Figma propiamente dicha:
Cada una de las tres partes tiene funcionalidades bien diferenciadas.
- En la barra de herramientas encontrarás, como bien indica el nombre, las herramientas básicas de Figma: insertar un frame (espacio de trabajo) o una section, figuras geométricas, dibujo libre vectorial, textos, comentarios, y actions (extensiones y assets). El toggle que hay en el lado derecho te permite cambiar del modo diseño al modo Draw (dibujo) y Dev Mode (modo desarrollo).
- En el inspector puedes ver el nombre del fichero, el proyecto al que pertenece, acceder a los assets y, en la parte inferior, ver las capas del archivo. En este caso no hay ninguna porque el archivo está vacío todavía.
- En el lado derecho encontrarás las herramientas, que varían en función de si tienes seleccionado una figura geométrica, una imagen, un texto, etc. Es donde puedes cambiar el color, añadir el borde, sombras, cambiar la tipografía, definir variables locales, y exportar. En la parte superior hay una navegación que te permite cambiar al modo prototipo, y el «play» sirve interactuar con la interacción que hayas definido.
Por cierto, si quieres ser más eficiente trabajando con Figma, te recomiendo echar un vistazo a los mejores plugins de Figma y a estos trucos y atajos de teclado que te ahorrarán mucho tiempo 😉
Las capas (layers) en Figma
Como te describía arriba, en la columna de la izquierda verás las capas (layers). Estas aparecerán en lista con indentaciones, que te sirven para ver dentro de qué frame o grupo está un elemento determinado.
En este caso, el frame se llama «web» y dentro hay dos capas principales:
- media, que corresponde a la imagen, que a su vez es un componente
- contenido, que es una capa con Auto Layout que dentro tiene otros Auto Layout y capas de texto
Si te fijas, como tengo seleccionada la capa card, la zona de herramientas del lado derecho cambia para permitirme modificar la alineación, el espaciado, la configuración del Auto Layour, el color de fondo, etc.
Los componentes en Figma
Crear un componente con Figma es muy fácil: es suficiente con seleccionar lo que lo compondrá y hacer clic en el “rombo hecho de rombos”. Si prefieres utilizar un atajo de teclado, es Option + CMD + K en Mac o Ctrl + Alt + K en Windows.
La capa cambiará de gris a lila y también tendrá un icono diferente. En el ejemplo que verás a continuación, el primer elemento es un componente, y el segundo es un conjunto de capas hechas con Auto Layout.
Si necesitas editarlo el componente, solo tendrás que hacer clic en él y añadir las capas necesarias o las modificaciones que quieras hacerle. Este cambio repercutirá en las instancias (copias) de ese componente que ya hayas creado en el documento.
Las instancias de un componente tienen un símbolo diferente: en lugar de ser “un rombo hecho de rombos” son un rombo simple. En este ejemplo, el tercer y el cuarto elemento son instancias del segundo:
Compartir el proyecto con Figma
El sistema que tiene Figma para compartir archivos es muy similar a Google Drive. Si haces clic en el botón Share del menú horizontal superior (parte derecha) se te abrirá un pequeño pop-up con la configuración del enlace:
Allí podrás escribir el correo electrónico de quien quieres que tenga acceso al archivo (esa persona recibirá un correo de confirmación) y qué tipo de acceso quieres que tenga:
- Can edit permitirá que esa persona pueda cambiar cualquier elemento de ese archivo de Figma. Ten en cuenta también que, si ese usuario no era editor de Figma, si le asignas ese permiso harás que se convierta en usuario de pago.
- Can view solo permite a esa persona ver el archivo y dejar comentarios.
Figma Community
Una de las cosas que más me gustan de Figma es la existencia de Figma Community. Aquí te cuento más en detalle de qué va, pero en pocas palabras: es un espacio en el que cualquier usuario de Figma puede compartir un archivo o plugin con los demás usuarios. Simplemente, tienes que buscar, escoger lo que necesitas y copiarlo para generar un documento igual en tu perfil de usuario.
Cómo hacer prototipos con Figma
He escrito una extensa guía para que aprendas a dominar los prototipos con Figma en minutos. En ella te detallo qué son, cómo se hacen, cómo se comparten, cómo hacer diferentes flujos, las características e incluso cómo hacer scroll horizontal y vertical.
Una vez domines lo básico, puedes dar el salto a prototipos avanzados con variables, booleans y condicionales. Y si quieres que tus prototipos cobren vida, aprende a crear animaciones con Smart Animate.
Aprender más sobre Figma
Si te está gustando lo que estás viendo sobre Figma, te recomiendo estos artículos que detallan funcionalidades concretas. Leerlos te ayudará a dominar todavía más y mejor esta herramienta, que tiene prácticamente todo lo que necesitas para diseñar productos digitales 🙂
- Auto Layout en Figma: aprende a crear layouts flexibles y responsivos
- Variants en Figma: organiza tus componentes con variantes
- Componentes interactivos: lleva tus componentes al siguiente nivel
- Variables en Figma: gestiona colores, espaciados y más
- 9 trucos para ahorrar tiempo en Figma: mejora tu productividad
