Figma ha cambiado por completo el mundo del diseño digital. El diseño de interfaces, que antes se hacía con Photoshop o Sketch, es ahora mucho más rápido, colaborativo y accesible con Figma. Además, Figma funciona íntegramente en el navegador, da igual que uses Mac o Windows, y su plan gratuito es más que suficiente para empezar. En este artículo voy a compartir todo lo que necesitas para aprender Figma desde cero. Te lo cuento como diseñador que lleva tres años usando Figma, con mi experiencia en proyectos reales.
¿Qué es Figma y por qué es tan popular?
Figma es una herramienta de diseño basada en el navegador. Se utiliza para diseñar sitios web, aplicaciones móviles, dashboards e interfaces. Pero lo que hace especial a Figma no es tanto su capacidad de diseño como lo que ofrece para el trabajo en equipo.
Empecé a usar Figma hace tres años, en un proyecto de una startup. Hasta entonces usaba Sketch y dependía de Mac. En nuestro equipo había un desarrollador que usaba Windows y, para compartir los diseños, teníamos que exportar y enviar PNG constantemente. Cuando nos pasamos a Figma, el desarrollador pudo ver el diseño en vivo en el mismo archivo. Solo eso supuso un aumento increíble de la productividad.
Estos son los principales motivos de la popularidad de Figma. Funciona en el navegador y no requiere instalación. Varias personas pueden trabajar a la vez en el mismo archivo. Su plan gratuito funciona, aunque esté limitado a tres archivos. El prototipado, el sistema de diseño y el handoff a desarrolladores están todos en una sola herramienta.
Primeros pasos: conozcamos la interfaz
La primera vez que abres Figma puede resultar un poco abrumador, pero su estructura básica es en realidad muy sencilla.
A la izquierda está el panel de capas. Aquí se enumeran todos los elementos del diseño. A la derecha está el panel de propiedades. Aquí se editan el color, el tamaño, la fuente y otras propiedades del elemento seleccionado. En la parte superior está la barra de herramientas. Aquí están las herramientas básicas, como dibujar formas, añadir texto o crear marcos.
Entender el concepto de frame es la base de Figma. Un frame es un marco para una página o una pantalla. Si creas un frame del tamaño de un iPhone 14, harás tu diseño dentro de ese frame. Yo empiezo cada proyecto creando un frame: 1440 píxeles de ancho para escritorio y 390 píxeles de ancho para móvil.
Cómo hacer tu primer diseño
Vamos a diseñar un componente de tarjeta sencillo. Primero, crea un frame de 350 píxeles de ancho y 400 píxeles de alto. Pon el color de fondo en blanco. Dibuja un rectángulo dentro del frame; será el área de la imagen. Añade debajo un elemento de texto; será el título. Añade otro texto; será la descripción. Por último, añade un botón.
Añade auto layout a esta estructura sencilla. El auto layout organiza los elementos automáticamente y ajusta el espacio entre ellos. En el panel derecho, haz clic en el botón de auto layout, alinea verticalmente los elementos de tu frame y fija el espaciado en dieciséis píxeles. A partir de ahora, si eliminas o añades un elemento, los demás se ajustan automáticamente.
Crear un sistema de diseño
La base del uso profesional de Figma es el sistema de diseño. Los colores, las fuentes, los componentes y los estilos se definen una sola vez y se usan de forma coherente en todo el proyecto.
En mi primer proyecto no creé un sistema de diseño y después me di cuenta del gran error que había cometido. Cuando el cliente pidió un cambio de color, tuve que modificar cientos de elementos uno por uno. En mi segundo proyecto, lo primero que hice fue montar un sistema de diseño, y el mismo cambio se hizo en treinta segundos.
Para crear estilos de color: dibuja un rectángulo, dale el color que quieras, haz clic en el cuadro de color del panel derecho y elige "Create style". Usa una nomenclatura como "Primary/500" para el nombre. Así, si usas este estilo en todo el proyecto y cambias el color en un sitio, cambia en todas partes.
Los componentes (components) son la función más potente de Figma. Diseña un botón, haz clic derecho y elige "Create component". A partir de ahora puedes usar este botón en cualquier parte del proyecto y, cuando modifiques el componente principal, todas las copias se actualizan automáticamente.
Con la función de variantes (variant) puedes definir los distintos estados de un componente. Por ejemplo, defines las variantes primary, secondary y outline de un botón dentro del mismo componente. O creas variantes distintas para los estados hover, active y disabled.
Prototipado: da vida a tus diseños
La función de prototipado de Figma hace que tus diseños sean clicables e interactivos. Es estupenda para mostrarle al cliente o al equipo que "al hacer clic aquí se abre esta página".
El prototipado es muy sencillo: selecciona un elemento, pasa a la pestaña "Prototype" del panel derecho y dibuja una flecha desde ese elemento hasta el frame de destino. Elige la animación de transición: slide, dissolve, smart animate, etc. Ahora, en el modo de presentación, al hacer clic en ese elemento se pasa a la página de destino.
La función Smart Animate cambia las reglas del juego. Anima automáticamente los elementos con el mismo nombre entre dos frames. Por ejemplo, al pasar de una página con una lista de tarjetas a la página de detalle de una tarjeta, la imagen de la tarjeta crece durante la transición. Estas microanimaciones hacen que tu prototipo parezca una aplicación real.
El mes pasado, en una presentación a un cliente, el prototipo que preparé con smart animate le gustó mucho. Me preguntó: "¿Esto es la aplicación de verdad?". Todavía no se había escrito ni una línea de código, pero el prototipo parecía tan realista.