Lección 7 de 20 · Lectura y práctica
Crea y gestiona componentes para diseños modulares
Tipo de lección: VideoConcepto claveLos componentes en Figma son elementos de diseño reutilizables que funcionan como bloques de construcción para tus interfaces. Imagina que estás construyendo una casa: en lugar de crear cada.
Del concepto a la práctica
Taller de esta lección
Un componente separa la definición de una pieza de sus usos concretos. El valor aparece cuando una corrección común puede hacerse en el componente principal y reflejarse en sus instancias.
Ejemplo resuelto
Crea Button/Primary con texto, relleno horizontal de 16, vertical de 10 y fondo azul. Inserta dos instancias: “Guardar” y “Continuar”. Cambia el radio del componente principal a 10 píxeles y comprueba que ambas instancias adopten la forma.
Construye el botón con texto y Auto Layout.
Conviértelo en componente y usa un nombre funcional.
Inserta dos instancias con textos distintos.
Modifica una propiedad visual en el principal y compara.
Error frecuente: editar cada instancia para resolver una decisión compartida. Corrígelo seleccionando el componente principal; reserva la instancia para contenido permitido, como la etiqueta.
Pruébalo
Crea Button/Secondary como segundo componente con fondo gris y texto oscuro. Colócalo junto al primario en una página Componentes/Botones.
Comprueba tu resultado
La página debe contener dos componentes identificables y dos instancias del primario. Un cambio de radio en el principal debe verse en ambas instancias sin desvincularlas.
Mapa de prácticaUna instancia mantiene un vínculo con su componente principal. El radio no sobrescrito hereda el cambio de 4 a 12, mientras el texto sobrescrito Enviar se conserva; sobrescribir una propiedad no desvincula toda la instancia. Si el principal está en una biblioteca externa, hay que publicar y aceptar su actualización.
Ver la infografía en tamaño completo ↗Tipo de lección: Video
Concepto clave
Los componentes en Figma son elementos de diseño reutilizables que funcionan como bloques de construcción para tus interfaces. Imagina que estás construyendo una casa: en lugar de crear cada ventana desde cero cada vez, tienes un modelo estándar que puedes usar en todas las habitaciones. Los componentes te permiten crear botones, barras de navegación, tarjetas de producto y otros elementos una sola vez, y luego reutilizarlos en todo tu diseño manteniendo la consistencia visual.
Cuando creas un componente principal (master), todas sus instancias (copias) se actualizan automáticamente cuando modificas el original. Esto es crucial para el diseño de productos porque los sistemas de diseño modernos requieren consistencia y eficiencia. Piensa en cómo una aplicación como Instagram mantiene el mismo estilo de botón en todas sus pantallas: usan componentes.
Cómo funciona en la práctica
Vamos a crear un botón como componente paso a paso:
- Abre Figma y crea un nuevo frame
- Dibuja un rectángulo con las dimensiones 120x40 píxeles
- Añade texto "Clic aquí" en el centro
- Selecciona ambos elementos (rectángulo y texto)
- Haz clic derecho y selecciona "Create component" o usa el atajo Ctrl+Alt+K
- Observa cómo el elemento ahora tiene un ícono de diamante púrpura
- Arrastra copias de este componente a tu canvas: estas son instancias
- Modifica el componente principal cambiando el color de fondo
- Todas las instancias se actualizarán automáticamente
Los componentes reducen el tiempo de diseño en un 40-60% según estudios de eficiencia en equipos de producto.
Caso de estudio
Vamos a diseñar una tarjeta de producto para un e-commerce. Primero, identificamos los elementos que se repiten:
| Elemento | Propiedades | ¿Componente? |
|---|---|---|
| Imagen del producto | 300x300px, esquinas redondeadas | Sí |
| Botón "Añadir al carrito" | Rojo, texto blanco, 140x36px | Sí |
| Precio | Fuente: Inter Bold, tamaño 18px | No (texto variable) |
| Rating con estrellas | 5 estrellas, color amarillo | Sí |
Creamos componentes para los elementos reutilizables. Cuando el cliente pide cambiar el color de todos los botones "Añadir al carrito" de rojo a azul, solo modificamos el componente principal una vez.
Errores comunes
- Crear componentes demasiado específicos: Si haces un componente para un botón con texto "Comprar ahora", no podrás reutilizarlo para otros textos. Mejor crea componentes genéricos y usa propiedades de texto.
- No organizar la biblioteca: Después de crear 20 componentes, se vuelve difícil encontrarlos. Usa páginas separadas para botones, formularios, navegación, etc.
- Modificar instancias cuando deberías modificar el componente: Si cambias muchas instancias individualmente, pierdes la ventaja principal de los componentes. Siempre pregunta: ¿este cambio debe aplicarse a todas las instancias?
- Ignorar los estados: Un botón necesita estados normal, hover y presionado. Crea variantes para manejar esto eficientemente.
Checklist de dominio
- Puedo crear un componente desde elementos seleccionados
- Reconozco la diferencia entre componente principal (diamante púrpura) e instancia (diamante púrpura con líneas)
- Sé modificar un componente principal y ver cómo se actualizan todas sus instancias
- Puedo desvincular una instancia para editarla independientemente
- Organizo mis componentes en páginas por categoría (botones, cards, headers)
- Uso nombres descriptivos para mis componentes (ej: "Button/Primary/Large" en lugar de "Rectangle 12")
- Comparto componentes con mi equipo usando bibliotecas de equipos
Crea un sistema de botones modular
En este ejercicio práctico, crearás un sistema básico de botones usando componentes. Sigue estos pasos:
- Crea un nuevo archivo en Figma llamado "Sistema de componentes"
- Diseña un botón primario con estas características:
- Tamaño: 140x44 píxeles
- Color de fondo: #007AFF (azul iOS)
- Texto: "Acción" en color blanco
- Esquinas redondeadas: 8 píxeles
- Convierte este botón en un componente principal (Ctrl+Alt+K)
- Crea 3 instancias de este componente en tu canvas
- Modifica el texto de cada instancia para que diga: "Guardar", "Enviar" y "Cancelar"
- Ahora cambia el color del componente principal a #34C759 (verde)
- Observa cómo los tres botones se actualizan automáticamente
- Crea una segunda variante del botón con fondo gris (#8E8E93) para estados secundarios
- Organiza ambos componentes en una página llamada "Botones"
Pistas
- Recuerda que para cambiar el texto de una instancia, debes hacer doble clic sobre ella
- Si no ves el ícono de diamante púrpura, no has creado el componente correctamente
- Usa la pestaña "Assets" en el panel izquierdo para ver todos tus componentes
Evalua tu comprension
Completa el quiz interactivo de arriba para ganar XP.
Sigue con Figma para Diseñadores de Producto: Domina Interfaces y Auto Layout
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.