Lección 3 de 20 · Lectura y práctica
Crea estilos visuales consistentes para tu diseño
Concepto claveLos estilos visuales en Figma son reglas reutilizables que definen propiedades como colores, tipografías, efectos y layouts. Piensa en ellos como los ingredientes base de una receta: en lugar de medir sal y pimienta.
Del concepto a la práctica
Taller de esta lección
Un estilo visual resulta útil cuando expresa una decisión reutilizable, no cuando memoriza una pantalla. Define nombres por función para que el mismo color pueda cambiarse después sin buscar elemento por elemento.
Ejemplo resuelto
Para Brújula, registra Color/Texto/Principal con #20242A, Color/Superficie/Base con #FFFFFF, Color/Acción/Principal con #2563EB y Texto/Cuerpo/Regular con 16 píxeles. En una tarjeta de tarea, usa esos estilos; no crees uno llamado “Azul de tarjeta lunes”.
Selecciona un texto y guarda el estilo tipográfico con nombre funcional.
Repite el proceso para texto secundario y superficie.
Aplica los estilos a una tarjeta y a un botón.
Cambia el valor del estilo de acción y observa ambos elementos.
Error frecuente: mezclar valores locales con estilos sin documentarlo. Corrígelo revisando cada propiedad y reemplazando duplicados por el estilo correspondiente.
Pruébalo
Crea una tarjeta de revisión semanal con título, descripción y botón “Abrir agenda”, usando únicamente estilos definidos para el ejercicio.
Comprueba tu resultado
La tarjeta debe tener tres estilos de texto o color aplicados, y cambiar Color/Acción/Principal debe afectar al botón sin editarlo manualmente.
Mapa de prácticaEl alias accion/primaria referencia la variable primitiva verde/600; los rellenos de Guardar y Enviar se vinculan al alias. Al cambiar el valor de la fuente, ambas propiedades vinculadas reciben el nuevo tono y conservan su significado. Un relleno literal aplicado manualmente queda fuera de esa cadena.
Ver la infografía en tamaño completo ↗Concepto clave
Los estilos visuales en Figma son reglas reutilizables que definen propiedades como colores, tipografías, efectos y layouts. Piensa en ellos como los ingredientes base de una receta: en lugar de medir sal y pimienta cada vez que cocinas, tienes recipientes predefinidos que garantizan consistencia. En diseño de producto, esto significa que un botón "primario" siempre tendrá el mismo azul, el mismo padding y la misma sombra en toda tu interfaz.
Imagina que trabajas en una app de banca. Sin estilos, podrías usar 5 tones diferentes de azul para botones importantes. Con estilos, defines un solo Color Primario y lo aplicas consistentemente. Esto no solo acelera tu trabajo, sino que asegura que desarrolladores implementen exactamente lo que diseñaste. La consistencia visual reduce la carga cognitiva del usuario y construye confianza en la marca.
Cómo funciona en la práctica
Vamos a crear estilos desde cero en Figma. Primero, abre un nuevo archivo y crea un frame de 1440x1024. Sigue estos pasos:
- Establece tu paleta de colores: En el panel izquierdo, haz clic en el icono "+" junto a "Color styles". Crea estos colores:
- Primario: #2563EB (azul corporativo)
- Secundario: #10B981 (verde para acciones positivas)
- Error: #DC2626 (rojo para alertas)
- Fondo: #F9FAFB (gris claro)
- Texto: #1F2937 (gris oscuro)
- Define tipografías: Crea un cuadro de texto con "Inter Regular 16px". En el panel de diseño, haz clic en el icono "+" junto a "Text styles". Nómbralo "Body/Regular". Repite para:
- Heading 1: Inter Bold 32px
- Heading 2: Inter SemiBold 24px
- Caption: Inter Regular 12px
- Crea efectos consistentes: Dibuja un rectángulo, aplica sombra (X:0, Y:4, Blur:8, Spread:0, #000000 con 10% opacidad) y guárdalo como "Shadow/Medium".
Ahora, cuando diseñes un botón, simplemente seleccionas "Primario" del desplegable de fill y "Body/Regular" para el texto. Si mañana cambias el azul corporativo, actualizas el estilo Color/Primario una vez y todos los botones se actualizan automáticamente.
Caso de estudio
Analicemos cómo Spotify usa estilos visuales en su app móvil. Observa estos elementos consistentes:
| Elemento | Estilo aplicado | Propósito |
|---|---|---|
| Botón "Reproducir" | Color: Verde Spotify (#1DB954) Tipografía: Circular Bold 14px Esquinas redondeadas: 24px | Acción principal inmediatamente reconocible |
| Títulos de playlist | Color: Blanco (#FFFFFF) Tipografía: Circular Bold 20px | Jerarquía clara para contenido importante |
| Tarjetas de álbum | Sombra: Elevación media Esquinas redondeadas: 8px | Profundidad consistente entre elementos táctiles |
"Un sistema de estilos bien implementado reduce el tiempo de diseño en un 40% y los errores de implementación en un 60%" - Datos de equipos de producto en empresas scale-up.
En Figma, el equipo de Spotify tendría estos estilos organizados en bibliotecas compartidas. Cuando actualizan el verde corporativo, cambian un solo estilo y todas las pantallas (móvil, web, tablet) se sincronizan.
Errores comunes
Estos son los 5 errores que veo frecuentemente en diseñadores principiantes:
- Crear estilos para casos únicos: No crees un estilo "Azul botón login página X". En su lugar, define "Color/Acción Primaria" y úsalo en todos los botones importantes. Los estilos deben ser genéricos y reutilizables.
- Nomenclatura inconsistente: Evita nombres como "Azul lindo" o "Texto grande". Usa una convención clara: "Tipo/Categoría/Variante" (ej: "Color/Primario/500" o "Text/Heading/H1").
- No organizar en grupos: Con 20+ estilos, encontrar el correcto se vuelve difícil. Usa slash (/) en los nombres para crear grupos automáticos: "Color/Primario", "Color/Texto", "Effect/Shadow".
- Olvidar los estados: Un botón necesita estilos para hover, active y disabled. Crea variantes como "Color/Primario/Hover" con un 20% más oscuro.
- Ignorar la escalabilidad: Diseñas para móvil hoy, pero mañana necesitarás web. Define estilos en unidades relativas (ej: paddings en múltiplos de 4px) no valores fijos.
Checklist de dominio
Antes de avanzar a la siguiente lección, verifica que puedes:
- Crear y aplicar al menos 5 estilos de color con nomenclatura consistente
- Definir 3 jerarquías tipográficas (heading, body, caption)
- Organizar estilos usando slash naming (Color/Primario, Text/Heading/H1)
- Actualizar un estilo y ver los cambios reflejados en 3+ elementos
- Exportar estilos a una biblioteca compartida (opcional para esta lección)
- Identificar cuándo crear un nuevo estilo vs reusar uno existente
- Aplicar estados (hover/disabled) a componentes usando variantes de estilos
Crea el sistema de estilos para una app de delivery de comida
Vas a diseñar el sistema base de estilos para "FoodFast", una app de delivery. Sigue estos pasos:
- Configura la paleta:
- Abre Figma y crea un nuevo frame (1440x1024)
- En el panel Color styles, crea estos colores:
- Primario: #FF6B35 (naranja vibrante para acciones)
- Secundario: #34D399 (verde para precios y confirmaciones)
- Neutro/Fondo: #F3F4F6
- Neutro/Texto: #1F2937
- Neutro/Borde: #D1D5DB
- Nómbralos usando slash naming (ej: Color/Primario/500)
- Define la tipografía:
- Crea 3 estilos de texto usando la fuente Roboto:
- Text/Heading/H1: Roboto Bold, 28px, line height 36px
- Text/Body/Regular: Roboto Regular, 16px, line height 24px
- Text/Caption/Small: Roboto Regular, 12px, line height 16px
- Aplica cada estilo a un texto de ejemplo
- Crea 3 estilos de texto usando la fuente Roboto:
- Crea efectos base:
- Dibuja un rectángulo de 100x100px
- Aplica sombra: X=0, Y=2, Blur=8, Spread=0, color negro al 8%
- Guárdalo como Effect/Shadow/Medium
- Aplica a componentes:
- Crea un botón "Ordenar ahora" con:
- Fondo: Color/Primario/500
- Texto: Text/Body/Regular en blanco (#FFFFFF)
- Padding: 12px 24px
- Esquinas redondeadas: 8px
- Crea una tarjeta de restaurante con:
- Fondo: blanco
- Sombra: Effect/Shadow/Medium
- Título: Text/Heading/H1
- Descripción: Text/Body/Regular
- Precio: Color/Secundario/500
- Crea un botón "Ordenar ahora" con:
Pistas
- Usa el panel de estilos (ícono de 4 cuadrados) para crear nuevos estilos rápidamente
- Para colores, puedes usar el gotero sobre cualquier elemento y luego guardar como estilo
- Si no ves Roboto, usa Inter o cualquier sans-serif disponible
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.