🎨 Módulo 4: Colores, estilos y componentes básicos
Objetivo del módulo:
Aprenderás a crear paletas de colores, definir estilos reutilizables y a trabajar con componentes para optimizar tus diseños web en Figma.
✅ 1. Paletas de colores y estilos globales
Una paleta de colores bien definida ayuda a mantener la coherencia visual.
En Figma, puedes crear estilos de color para aplicar colores fácilmente a múltiples elementos.
- Para crear un estilo: selecciona un objeto con el color deseado, luego en Fill → icono de “4 puntitos” → “+” para crear un nuevo estilo.
- Los estilos se actualizan globalmente: si cambias el color del estilo, se actualizan todos los objetos que lo usan.
📍 Ejemplo: Crear un estilo llamado “Azul Principal” y aplicarlo en botones y textos.
✅ 2. Creación de Componentes
Un componente es un elemento reutilizable que puedes copiar y modificar sin perder la relación con el original.
Ideal para botones, cards, íconos y cualquier elemento repetido.
- Para crear un componente: selecciona uno o más objetos y presiona Ctrl + Alt + K (Windows) o Cmd + Option + K (Mac).
- Las instancias del componente reflejan cambios que haces al original.
📍 Ejemplo: Crear un componente botón y usarlo en varias partes del diseño.
✅ 3. Variantes de componentes
Las variantes permiten agrupar diferentes estados de un componente en uno solo, por ejemplo: botón normal, hover y deshabilitado.
Se accede desde el panel de componentes con “Combine as Variants”.
📍 Ejemplo: Crear variantes para un botón con colores diferentes según estado.
✅ 4. Mini ejercicio práctico
🎯 Objetivo: Crear una paleta de colores y un botón como componente con variantes.
- Crea 3 rectángulos con colores diferentes y crea estilos de color para cada uno.
- Diseña un botón con texto y color de fondo.
- Convierte el botón en un componente.
- Crea una variante para el botón con color diferente (por ejemplo, hover).
📍 Resultado esperado: Una paleta de estilos y un componente botón con dos variantes.
📥 Tips rápidos del módulo
- Usa estilos para facilitar cambios globales en el diseño.
- Crea componentes para acelerar el trabajo y mantener la coherencia.
- Las variantes simplifican la gestión de diferentes estados UI.
📌 Preguntas de repaso
Pregunta 1: ¿Qué es un componente en Figma?
- A) Una herramienta para dibujar formas.
- B) Un elemento reutilizable que mantiene relación con su original.
- C) Un tipo de color.
- D) Una página dentro del archivo.
Pregunta 2: ¿Qué ventaja tienen los estilos de color en Figma?
- A) Cambian solo un objeto a la vez.
- B) Permiten actualizar colores globalmente.
- C) Sirven para crear vectores.
- D) No tienen ninguna ventaja.
No hay comentarios:
Publicar un comentario