Figma a fondo: variables, modos, componentes y auto layout para equipos

Cuando un equipo nuevo nos pasa su archivo de Figma, lo primero que hacemos es abrir el panel de variables locales y la página de componentes. En diez minutos se sabe casi todo: si hay un sistema o una colección de pantallas sueltas, si el modo oscuro existe de verdad o es una copia pintada a mano, si los componentes se estiran al cambiar un texto o se rompen. Un archivo de Figma bien organizado es como una cocina profesional antes del servicio: cada cosa en su sitio y todo el mundo sabe dónde está.

Figma ha cambiado mucho en pocos años. Las variables, los modos, las propiedades de componente y las mejoras de auto layout han convertido una herramienta de dibujo en algo muy parecido a un entorno de construcción. Esta guía es la que nos habría gustado tener al empezar: cómo estructuramos en el estudio esas cuatro piezas para que un equipo de varias personas diseñe rápido, con coherencia y con una entrega limpia a desarrollo.

Si todavía no tienes clara la idea de token, empieza por design tokens explicados. Aquí vamos a la práctica dentro de Figma.

01Variables: los cuatro tipos y para qué usar cada uno

Una variable en Figma es un valor con nombre que se puede aplicar a propiedades de diseño. Hay cuatro tipos:

Las variables se agrupan en colecciones, y dentro de cada colección en grupos (con barras en el nombre: color/text/primary). Cada colección puede tener varios modos, que son conjuntos alternativos de valores para las mismas variables.

La estructura de colecciones que usamos

Para la mayoría de proyectos trabajamos con tres o cuatro colecciones:

1. 01Primitives. La paleta completa (green/100 a green/900, neutral/0 a neutral/950), la escala de espaciado y los radios. Un solo modo. Ocultas al publicar la librería, para que nadie las aplique directamente.
2. 02Color (semántico). bg/surface, text/primary, border/subtle, action/default… Cada una apunta a un primitivo. Dos modos: Light y Dark.
3. 03Spacing y Radius. Los usos semánticos del espacio (inset/md, stack/lg) si el proyecto los necesita. Si no, se usan directamente los primitivos de la escala.
4. 04Typography. Tamaños, interlineados y pesos como variables numéricas, y familias como variables de texto. Puede tener modos por tamaño de pantalla: Mobile y Desktop.

Separar los primitivos de los semánticos es lo que permite que los modos funcionen bien: el modo oscuro cambia a qué primitivo apunta cada semántico, sin tocar la paleta.

Alcance y sintaxis de código

Dos ajustes de cada variable que marcan la diferencia en equipo:

• →Alcance (scoping). Limita en qué propiedades aparece la variable. Una variable de espaciado limitada a «Gap» y «Padding» no aparecerá al elegir un radio. Un color de texto limitado a «Text fill» no se ofrecerá para fondos. Reduce errores y hace los menús mucho más cortos.
• →Sintaxis de código. Cada variable puede llevar su nombre en el código para web, iOS y Android. En Dev Mode, quien desarrolla ve var(--color-text-primary) en lugar de un hexadecimal, que es exactamente lo que va a escribir.

02Modos: temas, marcas, densidades e idiomas

Los modos son probablemente la función que más ha cambiado nuestra manera de trabajar. Un modo se asigna a un marco, y todo lo que contiene lo hereda. Así, cambiar una pantalla de claro a oscuro es seleccionar el marco y cambiar un desplegable.

Los usos que más aprovechamos:

• →Claro y oscuro. El caso clásico. Con los semánticos bien construidos, el modo oscuro se revisa, no se rediseña pantalla por pantalla. Las decisiones de color propias del tema oscuro las contamos en modo oscuro bien diseñado.
• →Marcas. Un mismo juego de componentes con dos o tres identidades: cambian los colores de acción, los radios y las familias tipográficas.
• →Densidad. Modos «Comfortable» y «Compact» en una colección de espaciado y tamaños, muy útil en paneles y herramientas internas donde ciertas pantallas necesitan mostrar más datos.
• →Tamaño de pantalla. Una colección de tipografía con modos Mobile y Desktop: el titular H1 mide 32 px en uno y 56 px en otro. El mismo componente de cabecera se ve correcto en las dos maquetas.
• →Idiomas. Variables de texto con modos ES, EN y DE. Cambiando el modo se comprueba al instante si los textos en alemán caben en los botones.

Los modos se pueden combinar: una tarjeta puede estar en modo Dark de color y en modo Compact de densidad a la vez, porque cada colección tiene su propio modo activo.

Clave: si para ver tu diseño en oscuro, en otra marca o en inglés tienes que duplicar pantallas, todavía no estás usando los modos. Una sola pantalla con modos vale por todas sus versiones.

03Componentes con propiedades

Un componente bien construido en Figma tiene pocas variantes y muchas propiedades. Las propiedades son los controles que aparecen en el panel derecho al seleccionar una instancia.

Algunas pautas que nos funcionan:

1. 01Variantes para lo que cambia el aspecto, booleanos para lo que aparece o desaparece. Un botón con y sin icono no son dos variantes, es una propiedad booleana. Así se evita la explosión de combinaciones (3 tipos × 4 estados × 3 tamaños × 2 iconos = 72 variantes, que se reducen a 36 con un booleano).
2. 02Exponer las instancias anidadas. Si un campo de formulario contiene un componente de ayuda y otro de error, se pueden exponer sus propiedades en el componente padre, y quien diseña las edita sin entrar en las capas.
3. 03Componentes base. Para piezas con muchas variantes, se construye un componente base oculto (con un punto o un guion bajo delante del nombre para que no se publique) y las variantes se crean a partir de él. Un cambio en la base llega a todas.
4. 04Nombres de propiedades en el idioma del código. Si en React la propiedad se llama variant y sus valores primary y secondary, en Figma se llama igual. El paso a desarrollo se vuelve casi literal.
5. 05Descripción y enlace. Cada componente con una frase de uso y, si existe, un enlace a su documentación o a su versión en código.

Si te interesa la lógica de construir de lo pequeño a lo grande, la metodología del diseño atómico de Brad Frost encaja muy bien con esta forma de trabajar.

04Auto layout: diseñar como se construye

Auto layout hace que un marco organice a sus hijos en fila o en columna, con relleno, separación y alineación, y que crezca o se encoja según su contenido. Es el equivalente en Figma de display: flex en CSS, y dominarlo es lo que separa un diseño que se rompe al cambiar un texto de uno que se adapta solo.

Los tres comportamientos de tamaño

Cada elemento dentro de un auto layout tiene un comportamiento horizontal y otro vertical:

• →Hug (ajustar al contenido): el elemento mide lo que mide su contenido. Un botón se ensancha si el texto es más largo.
• →Fill (llenar el contenedor): ocupa todo el espacio disponible. Un campo de formulario que llena la columna.
• →Fixed (fijo): un tamaño concreto. Un icono de 24 px.

Ajustes que conviene dominar

1. 01Relleno y separación con variables. Asignar space/4 o space/5 en lugar de escribir 16 o 24. Si la escala cambia, todo se actualiza. La escala en sí la explicamos en el sistema de espaciado de 8 puntos.
2. 02Separación automática (Auto). Reparte los elementos a los extremos, como justify-content: space-between. Ideal para una cabecera con logo a la izquierda y menú a la derecha.
3. 03Anchos mínimos y máximos. Un botón con ancho mínimo de 96 px nunca queda raquítico; un bloque de texto con ancho máximo de 680 px mantiene una medida de línea legible aunque el marco crezca.
4. 04Salto de línea (wrap). Los elementos pasan a la línea siguiente cuando no caben, como flex-wrap: wrap. Perfecto para etiquetas, filtros o rejillas de tarjetas.
5. 05Posición absoluta dentro del auto layout. Para una insignia en la esquina de un avatar o un botón de cerrar en una tarjeta, sin romper el flujo del resto.
6. 06Contorno incluido o excluido del tamaño. Con el trazo incluido en el tamaño, un campo de 48 px mide 48 px con borde, igual que en CSS con box-sizing: border-box.
7. 07Alineación de la línea base del texto. En filas con textos de distintos tamaños, alinear por la línea base en lugar de por el centro da un resultado mucho más fino.

05La librería: cómo trabajar en equipo sin pisarse

Cuando varias personas diseñan sobre el mismo sistema, la organización de los archivos importa tanto como los componentes.

Estructura de archivos

• →Un archivo de librería con las variables, los estilos y los componentes. Solo se publica desde aquí.
• →Archivos de producto o de proyecto que consumen la librería. Aquí se diseñan las pantallas.
• →Dentro de la librería, una página por familia de componentes (Botones, Formularios, Navegación…), una página de portada con la versión y el estado, y una página de fundamentos con la paleta, la tipografía y el espaciado visibles.

Publicar con cuidado

1. 01Revisar antes de publicar: cada cambio se comprueba en un archivo de prueba con instancias reales.
2. 02Escribir notas de cambio en cada publicación: qué cambia, qué se retira, qué hay que revisar. Figma las muestra a quien recibe la actualización.
3. 03Ramas para cambios grandes: en planes de organización y empresa, las ramas permiten preparar una versión nueva de un componente, revisarla y fusionarla sin que el equipo vea trabajo a medio hacer.
4. 04Retirar con aviso: antes de borrar un componente, se marca como obsoleto en su nombre o descripción, se indica cuál lo sustituye y se da un margen.

Dev Mode y la entrega

Con variables bien nombradas y sintaxis de código configurada, Dev Mode muestra a desarrollo los nombres de los tokens, las medidas de auto layout traducidas a CSS y el estado «listo para desarrollo» de cada pantalla. Cómo organizar esa entrega, qué documentar y qué revisar después en el navegador lo contamos en handoff de diseño a desarrollo.

06Ejemplo resuelto: una tarjeta de reserva con dos marcas y dos temas

Para un grupo de alojamientos con dos marcas, construimos una tarjeta de habitación así:

1. 01Variables: colección Color con cuatro modos (Marca A Light, Marca A Dark, Marca B Light, Marca B Dark), colección Typography con modos Mobile y Desktop, y espaciado desde los primitivos.
2. 02Estructura: auto layout vertical con relleno space/5 y separación space/3. Imagen en Fill horizontal con proporción fija, bloque de texto con ancho máximo y fila inferior con precio y botón separados en Auto.
3. 03Propiedades: Badge: true/false para la etiqueta «Última habitación», Layout: Vertical / Horizontal como variante, texto editable para nombre y precio, e instance swap para el icono de servicios.
4. 04Comprobación: la misma tarjeta, sin duplicar nada, se revisó en las cuatro combinaciones de marca y tema y en los dos tamaños de pantalla, con textos en español y en inglés gracias a variables de texto.

Una sola pieza, dieciséis combinaciones posibles y ninguna copia que mantener.

Figma es una herramienta extraordinaria cuando se usa como un sistema y no como un lienzo. En SIMA organizamos así las librerías de cada proyecto de diseño web y experiencia digital, para que el equipo del cliente pueda seguir creciendo con ellas cuando terminamos. Si tu archivo de Figma necesita orden o quieres montar una librería desde cero, escríbenos y lo vemos juntos.