Color, Tipografía y Estilos

Definiendo la Identidad Visual de tu Diseño

El color y la tipografía son los pilares de cualquier diseño. En Figma puedes crear estilos reutilizables que garantizan consistencia en todo tu proyecto y se actualizan globalmente cuando los modificas.

Trabajando con colores

• Selecciona un elemento y haz clic en el cuadro de color del panel derecho para abrir el selector


• Usa valores hexadecimales (#FF5733) para colores exactos — los diseñadores comparten colores así


• La opacidad se ajusta junto al color o con el shortcut número (1=10%, 5=50%, 0=100%)


• Fill: color de relleno / Stroke: color del borde — puedes tener ambos simultáneamente


• Gradientes: cambia el tipo de relleno de 'Solid' a 'Linear' o 'Radial' para gradientes


• Crea una paleta de 5-8 colores máximo: primario, secundario, neutros (gris), éxito, error, advertencia

Tipografía efectiva

• Figma incluye todas las fuentes de Google Fonts gratis — busca por nombre en el selector de fuentes


• Para UI usa fuentes sans-serif: Inter (gratuita y excelente), Roboto, Plus Jakarta Sans, DM Sans


• Define una escala tipográfica: mínimo 4 tamaños (título grande, título, subtítulo, cuerpo, caption)


• El interlineado (line height) ideal para texto de cuerpo es 150% del tamaño de fuente


• Usa máximo 2 familias tipográficas por proyecto — más genera desorden visual

Crear estilos reutilizables

• Selecciona un elemento con el color o texto deseado, haz clic en los 4 puntos del panel derecho → 'Create style'


• Nombra tus estilos con convención clara: 'Primary/500', 'Text/Body', 'Neutral/100'


• Para aplicar un estilo existente, selecciona el elemento y elige el estilo desde el panel derecho


• Si actualizas un estilo, todos los elementos que lo usan se actualizan automáticamente — enorme ahorro de tiempo


• En Figma moderno, usa Variables en lugar de estilos para colores — soportan temas claro/oscuro nativamente

Consejo: Antes de empezar cualquier diseño, define tus colores y tipografía como estilos. Los 10 minutos que inviertes al inicio te ahorran horas de inconsistencias después.