Componentes y Auto Layout: El Poder de Figma

Si en la lección anterior aprendiste los básicos de Figma, ahora vas a entender por qué los diseñadores profesionales no pueden vivir sin esta herramienta. Componentes y Auto Layout son las dos funcionalidades que hacen a Figma infinitamente más poderoso que cualquier otra herramienta de diseño gráfico.

¿Qué es un Componente?

Un componente es un elemento de diseño reutilizable. Cuando creás un componente, podés insertar copias (llamadas "instancias") en cualquier parte de tu archivo. Si modificás el componente original ("main component"), todas las instancias se actualizan automáticamente.

Analogía: Pensá en un componente como un molde de galletitas. El molde es el componente principal. Cada galletita que hacés es una instancia. Si cambiás el molde (le agregás un borde decorativo), todas las galletitas futuras salen con ese borde. Las ya hechas se pueden "actualizar" para reflejar el cambio.

Crear un Componente

1. Diseñá tu elemento (por ejemplo, un botón)
2. Seleccionalo
3. Click derecho > "Create Component" o Ctrl + Alt + K
4. El elemento ahora tiene un ícono de diamante morado en el panel de capas

Usar Instancias

1. Buscá tu componente en el panel de Assets (izquierda)
2. Arrastralo al lienzo
3. La instancia tiene un ícono de diamante vacío
4. Podés modificar propiedades de la instancia (texto, colores) sin afectar el componente principal

Overrides (Sobreescrituras)

Cuando modificás una propiedad de una instancia, creás un "override". Estos overrides se mantienen incluso cuando actualizás el componente principal.

Ejemplo: Tenés un componente de botón azul que dice "Aceptar". Creás una instancia y le cambiás el texto a "Cancelar" y el color a rojo. Si después cambiás la fuente en el componente principal, la instancia actualiza la fuente pero mantiene su texto "Cancelar" y color rojo.

Overrides que podés hacer:

• Cambiar texto
• Cambiar colores de relleno
• Intercambiar imágenes
• Mostrar/ocultar capas
• Cambiar instancias anidadas

Variantes de Componentes

Las variantes permiten crear múltiples estados de un mismo componente.

Ejemplo: Componente Botón con variantes

• Estado: Default, Hover, Pressed, Disabled
• Tipo: Primary, Secondary, Outline
• Tamaño: Small, Medium, Large

Cómo crear variantes:

1. Seleccioná tu componente principal
2. En el panel derecho, click en "+" junto a "Variants"
3. Se crea un frame morado con tu componente original
4. Duplicá el componente dentro del frame de variantes
5. Modificá cada variante (cambiá colores, tamaños, estados)
6. Nombrá las propiedades: "State=Default", "State=Hover", etc.

Usar variantes en instancias:
Cuando seleccionás una instancia de un componente con variantes, el panel derecho te muestra dropdowns para elegir qué variante usar.

Component Properties (Propiedades de Componente)

Desde 2023, Figma permite definir propiedades editables en componentes:

Tipos de propiedades:

• Text: Texto editable (para labels, títulos)
• Boolean: Mostrar/ocultar un elemento (para toggles, íconos opcionales)
• Instance Swap: Intercambiar un componente anidado (para cambiar íconos)
• Variant: Cambiar la variante

Ejemplo práctico: Card component

Card
├── Image (Boolean: showImage = true/false)
├── Title (Text: "Título por defecto")
├── Description (Text: "Descripción...")
├── Icon (Instance Swap: iconOptions)
└── Button (Variant: Primary/Secondary)

Esto permite que las instancias de tu Card se configuren rápidamente desde el panel derecho sin entrar a editar capas internas.

¿Qué es Auto Layout?

Auto Layout es el sistema de Figma para crear layouts flexibles y responsivos. Cuando aplicás Auto Layout a un frame, los elementos internos se organizan automáticamente según reglas que vos definís.

Sin Auto Layout: Tenés que mover manualmente cada elemento cuando agregás o quitás uno. Los espaciados se rompen, las alineaciones se pierden.

Con Auto Layout: Agregás o quitás elementos y todo se reorganiza automáticamente manteniendo los espaciados y alineaciones que definiste.

Crear Auto Layout

1. Seleccioná un frame (o varios elementos)
2. Shift + A para agregar Auto Layout
3. Configurá las propiedades en el panel derecho

Propiedades de Auto Layout

Dirección:

• Horizontal (→): Los elementos se alinean en fila
• Vertical (↓): Los elementos se alinean en columna
• Wrap: Los elementos se acomodan en filas y saltan a la siguiente cuando no hay espacio

Spacing (Espaciado):

• El espacio entre cada elemento hijo
• Podés usar un valor fijo (16px) o "Auto" para distribuir equitativamente

Padding:

• El espacio interno entre el borde del frame y su contenido
• Podés definir padding uniforme o individual (top, right, bottom, left)

Alignment (Alineación):

• Cómo se alinean los hijos dentro del frame
• 9 opciones: combinaciones de top/center/bottom con left/center/right

Sizing:

• Fixed (Fijo): El frame tiene un tamaño específico
• Hug Contents: El frame se ajusta al tamaño de su contenido
• Fill Container: El frame ocupa todo el espacio disponible de su padre

Ejemplo Práctico: Botón con Auto Layout

Sin Auto Layout:
Si el texto del botón cambia de "OK" a "Confirmar pedido", el fondo del botón NO se adapta. Tenés que ajustarlo manualmente.

Con Auto Layout:

1. Creá un rectángulo con bordes redondeados
2. Agregá texto dentro
3. Seleccioná ambos y presioná Shift + A
4. Configurá:
   • Dirección: Horizontal
   • Padding: 16px horizontal, 12px vertical
   • Sizing: Hug Contents
5. Ahora cuando cambiés el texto, el botón se redimensiona automáticamente

Ejemplo Práctico: Lista de Cards

1. Creá un componente de Card (imagen + título + descripción)
2. Dentro de la Card, usá Auto Layout vertical con spacing de 12px
3. Creá un frame contenedor
4. Poné 3 instancias de Card dentro
5. Aplicá Auto Layout vertical al contenedor con spacing de 24px
6. Ahora podés agregar o quitar cards y el layout se reorganiza solo

Auto Layout Anidado

El verdadero poder surge cuando anidás Auto Layouts:

Estructura de una pantalla completa:

Screen (Auto Layout Vertical)
├── Header (Auto Layout Horizontal)
│   ├── Logo
│   ├── Nav Links (Auto Layout Horizontal, spacing: 24px)
│   └── User Avatar
├── Content (Auto Layout Vertical, spacing: 32px)
│   ├── Hero Section
│   ├── Cards Grid (Auto Layout Horizontal, Wrap)
│   │   ├── Card 1
│   │   ├── Card 2
│   │   └── Card 3
│   └── CTA Section
└── Footer (Auto Layout Horizontal)
    ├── Links
    └── Copyright

Cada nivel de anidamiento tiene su propia dirección, spacing y padding.

Estilos de Color

1. Seleccioná un elemento con el color que querés guardar
2. En Fill, click en el ícono de los 4 puntos (Style)
3. Click en "+" para crear un nuevo estilo
4. Nombralo descriptivamente: "Primary/Blue-500", "Neutral/Gray-100"

Estilos de Texto

1. Seleccioná texto con las propiedades que querés guardar
2. En la sección de texto del panel derecho, click en el ícono de Style
3. Nombralo: "Heading/H1", "Body/Regular", "Caption/Small"

Estilos de Efectos

Sombras y blurs también pueden guardarse como estilos reutilizables.

Variables (nueva funcionalidad)

Figma introdujo Variables para manejar tokens de diseño:

• Color variables: Para temas claro/oscuro
• Number variables: Para espaciados consistentes
• String variables: Para textos dinámicos
• Boolean variables: Para estados de visibilidad

📺 Auto Layout en Figma - Tutorial completo en español

Creá estos componentes con Auto Layout y variantes:

1. Botón:

   • Auto Layout horizontal con padding 16x12
   • Variantes: Primary (azul), Secondary (blanco con borde), Danger (rojo)
   • Sizes: Small, Medium, Large

2. Card:

   • Auto Layout vertical
   • Imagen arriba, título, descripción, botón abajo
   • Propiedad Boolean para mostrar/ocultar imagen

3. Input:

   • Auto Layout horizontal
   • Label arriba, campo de texto, ícono opcional
   • Estados: Default, Focused, Error

Resumen

En la próxima lección, vamos a llevar tus diseños al siguiente nivel con diseño responsivo y prototipado interactivo.