¿Qué son los componentes en Figma y cómo crearlos?

Un componente en Figma es un elemento de diseño reutilizable que puedes copiar y usar en múltiples pantallas, garantizando que todos los cambios se apliquen de forma automática en todo el proyecto.

Si los Estilos guardan colores y tipografías, los componentes guardan piezas completas de interfaz: botones, tarjetas, íconos, barras de navegación. Juntos, forman la base de un sistema de diseño profesional.

¿Qué es un componente y para qué sirve?

Un componente tiene dos partes fundamentales:

• Componente principal (Main Component): la pieza original que defines y editas.
• Instancia: cada copia del componente principal que colocas en tus pantallas.

Cuando editas el componente principal, todas las instancias se actualizan al instante. Esto es exactamente lo mismo que hiciste con los Estilos de color, pero aplicado a elementos visuales completos.

Imagina que diseñas la app de Liverpool. Tienes un botón rojo "Agregar al carrito" en 40 pantallas. Si el cliente pide cambiar el botón a verde, editas el componente principal una sola vez. Las 40 instancias cambian solas.

Estructura de un componente

Antes de crear un componente, debes construir el elemento como un Frame o Group bien organizado. La estructura recomendada es:

Frame (Botón)
├── Rectangle (Fondo)
└── Text (Etiqueta)

Nombra las capas con claridad antes de convertir el elemento. Capas con nombres genéricos como "Rectangle 47" dificultan el trabajo en equipo.

Cómo crear un componente en Figma

Paso 1 — Diseña el elemento base. Crea un Frame con el diseño final del botón, tarjeta o barra. Agrupa todas las capas internas con nombres claros.

Paso 2 — Selecciona el Frame. Haz clic sobre el Frame en el canvas o en el panel de capas.

Paso 3 — Convierte a componente. Usa el atajo Ctrl + Alt + K en Windows o Cmd + Option + K en Mac. También puedes hacer clic derecho y elegir "Create component".

Figma marca el componente principal con un ícono de rombo relleno (◆) de color morado. Las instancias muestran un rombo vacío (◇).

Paso 4 — Mueve el componente principal a una página especial. Crea una página llamada _Componentes o Design System y coloca ahí todos los componentes principales. Nunca mezcles componentes principales con tus pantallas de diseño.

Paso 5 — Usa instancias en tus pantallas. Abre el panel Assets con Ctrl + Alt + P (o Cmd + Option + P). Busca el nombre del componente y arrástralo a la pantalla donde lo necesitas.

Tres ejemplos prácticos

Ejemplo 1 — Botón primario para Bimbo

Supón que diseñas el portal de distribuidores de Bimbo. El botón principal dice "Realizar pedido".

1. Crea un Frame de 160 × 48 px.
2. Fondo: color #E63329 (rojo Bimbo). Radio de esquinas: 8.
3. Texto: "Realizar pedido", fuente Inter Bold 14 px, color blanco.
4. Selecciona el Frame y presiona Ctrl + Alt + K.
5. Nómbralo Botón/Primario.

Ahora arrastra instancias de Botón/Primario a cada pantalla del flujo. Si el equipo decide cambiar el radio de esquinas a 12, editas el componente principal y todas las pantallas se actualizan.

Ejemplo 2 — Tarjeta de producto para Mercado Libre

Una tarjeta de producto contiene: imagen, nombre del producto, precio y botón de compra.

Estructura del Frame Tarjeta/Producto:

Frame: Tarjeta/Producto (240 × 320 px)
├── Image: foto_producto
├── Text: nombre_producto
├── Text: precio  →  usa el Estilo Texto/Precio
└── Instancia: Botón/Primario

Al anidar el Botón/Primario dentro de la Tarjeta/Producto, creas componentes anidados. Si editas el botón, el cambio se propaga a todas las tarjetas en todas las pantallas.

Ejemplo 3 — Barra de navegación para FEMSA Digital

Una barra de navegación inferior tiene cuatro íconos: Inicio, Tiendas, Pedidos y Perfil.

1. Crea primero un componente Nav/Item con un ícono y una etiqueta de texto.
2. Construye el Frame Nav/Barra y coloca cuatro instancias de Nav/Item en fila.
3. Convierte Nav/Barra en componente.

Esto te permite cambiar el color de fondo de la barra en un solo lugar, y también cambiar el estilo de cada ítem individualmente.

Variantes: múltiples estados en un solo componente

Las variantes agrupan diferentes versiones del mismo componente en un solo lugar. En lugar de tener Botón/Primario/Normal, Botón/Primario/Hover y Botón/Primario/Desactivado como tres componentes separados, las variantes las unifican.

Cómo crear variantes:

1. Crea los tres estados del botón como componentes individuales.
2. Selecciona los tres a la vez.
3. En el panel derecho, haz clic en "Combine as variants".
4. Figma los agrupa dentro de un Component Set (marco punteado morado).
5. Define la propiedad: por ejemplo, Estado con valores Normal, Hover, Desactivado.

Ahora, cuando colocas una instancia en tu pantalla, puedes cambiar su estado desde el panel derecho sin buscar otro componente. Esto es fundamental para diseñar flujos interactivos y prototipos en proyectos como los de Liverpool o cualquier tienda en línea.

Propiedades útiles para variantes:

Editar una instancia sin romper el componente

Puedes modificar una instancia de forma individual sin afectar el componente principal ni las demás instancias. A esto se le llama override (sobreescritura).

Overrides permitidos:

• Cambiar el texto de la etiqueta.
• Cambiar el color de relleno de una capa específica.
• Cambiar el ícono interno.
• Mostrar u ocultar capas.

Si necesitas volver al estado original del componente, haz clic derecho sobre la instancia y elige "Reset all overrides".

Errores comunes al trabajar con componentes

Error 1 — Editar el componente principal desde una pantalla de diseño. Si haces doble clic sobre una instancia y editas capas profundas, puedes modificar el componente principal sin darte cuenta. Siempre edita el componente principal desde la página _Componentes.

Error 2 — Nombrar componentes sin jerarquía. Nombres como "Botón azul" o "Tarjeta 2" no escalan. Usa la convención Categoría/Nombre que aprendiste con los Estilos: Botón/Primario, Tarjeta/Producto, Nav/Barra. Eso los agrupa automáticamente en el panel Assets.

Error 3 — Crear componentes antes de definir Estilos. Si creas botones sin asignar Estilos de color y tipografía, los componentes quedan con valores "hardcodeados". Si el cliente de FEMSA pide cambiar el color primario, tendrás que editar cada componente a mano en lugar de cambiar un solo Estilo.

Error 4 — No usar la página _Componentes. Dejar componentes principales mezclados con las pantallas de diseño genera confusión. Un colaborador puede borrar un componente principal por accidente y perder la vinculación de todas las instancias.

Tabla de referencia: componente vs. instancia vs. variante

Puntos clave

• Un componente principal controla todas sus instancias. Edítalo una vez y el cambio se propaga a todo el proyecto.
• Nombra tus componentes con la convención Categoría/Nombre para mantenerlos organizados en el panel Assets.
• Las variantes unifican los diferentes estados de un componente (normal, hover, desactivado) en un solo Component Set.
• Siempre vincula los componentes a Estilos de color y tipografía. Así, un cambio de paleta actualiza tanto los Estilos como los componentes al mismo tiempo.
• Guarda todos los componentes principales en una página separada (_Componentes) para evitar borrados accidentales y facilitar el trabajo en equipo.