¿Cómo aplicar colores, tipografías y estilos en Figma?

Aplicar colores, tipografías y estilos en Figma significa guardar una vez cada decisión visual y reutilizarla en todo el proyecto con un solo clic.

Cuando diseñas una app o página web, necesitas que todos los botones azules sean exactamente el mismo azul. Figma tiene un sistema llamado Estilos que hace eso posible de forma automática.

Qué es un Estilo en Figma

Un Estilo es un conjunto de propiedades visuales guardado con nombre. Puede ser un color, una tipografía, o una combinación de ambos.

Cuando cambias el Estilo, todos los elementos que lo usan se actualizan al mismo tiempo. Esto ahorra horas de trabajo en proyectos reales.

Los tres tipos de Estilos que usarás siempre

En esta lección te enfocarás en Colores y Textos. Son los más usados en cualquier proyecto de principiante.

Cómo crear un Estilo de Color

Imagina que estás diseñando una pantalla para una tienda en línea inspirada en Liverpool. El rojo principal de Liverpool es #CC0000.

Paso 1: Selecciona cualquier elemento en el canvas. Puede ser un rectángulo o un botón.

Paso 2: En el panel derecho, busca la sección Fill (Relleno). Haz clic en el cuadro de color.

Paso 3: Escribe el código HEX CC0000 en el campo de color. El elemento se pone rojo.

Paso 4: Haz clic en el ícono de cuatro puntos (⊞) que aparece junto al nombre del color. Eso abre el menú de Estilos.

Paso 5: Haz clic en el botón + (más). Aparece un campo de texto.

Paso 6: Escribe un nombre descriptivo. Usa la convención Marca/Primario o Color/Rojo_Principal. Presiona Enter.

Listo. Tu primer Estilo de Color está guardado. Ahora aparece en la biblioteca del archivo.

Cómo aplicar un Estilo de Color existente

Selecciona cualquier elemento nuevo. En la sección Fill, haz clic en los cuatro puntos (⊞). Verás tu lista de Estilos guardados. Haz clic en Marca/Primario y el color se aplica al instante.

No necesitas recordar el código HEX nunca más.

Cómo crear una paleta de marca completa

Una paleta de marca es el conjunto de colores que definen la identidad visual de un negocio. Figma te permite guardar toda la paleta como Estilos y acceder a ella desde cualquier pantalla del proyecto.

Ejemplo con una app de delivery de alimentos al estilo de una empresa mexicana:

Crea cada uno siguiendo los pasos anteriores. Nombrarlos con el prefijo Color/ agrupa todos juntos en el menú de Estilos.

Cómo crear un Estilo de Texto

Los Estilos de Texto guardan la fuente, el tamaño, el peso y el interlineado. Así todos tus títulos son idénticos sin importar cuántas pantallas tenga tu proyecto.

Paso 1: Selecciona la herramienta de texto (T) y escribe cualquier palabra en el canvas.

Paso 2: Con el texto seleccionado, ve al panel derecho. Configura la fuente. Ejemplo: Inter, Bold, 32px, interlineado 40px.

Paso 3: Haz clic en los cuatro puntos (⊞) junto al nombre de la fuente.

Paso 4: Haz clic en +. Escribe el nombre Texto/H1_Titulo. Presiona Enter.

Repite el proceso para cada nivel de texto que necesites.

Jerarquía tipográfica recomendada para principiantes

Nota: Para precios en pesos, usa siempre el formato $1,200 con coma de miles. Nunca escribas $1200.0 ni $1200 MXN en tus diseños.

Cómo editar un Estilo y actualizar todo el proyecto

Esta es la función más poderosa de los Estilos. Si el cliente de Liverpool decide cambiar su rojo de #CC0000 a #D50000, solo necesitas editarlo una vez.

Paso 1: Ve al panel derecho. En la sección Local Styles, busca el Estilo que quieres cambiar.

Paso 2: Haz doble clic sobre el nombre del Estilo. Aparece el editor.

Paso 3: Cambia el valor HEX al nuevo color. Cierra el editor.

Todos los elementos que usan ese Estilo cambian de color automáticamente. Si tenías 47 botones rojos en 12 pantallas, los 47 cambian en menos de dos segundos.

Errores comunes

Error 1: Aplicar colores sin crear un Estilo. Si escribes el código HEX directamente en cada elemento sin guardarlo como Estilo, tendrás que cambiar cada elemento a mano cuando el cliente pida ajustes. Guarda siempre el color como Estilo antes de usarlo.

Error 2: Nombrar los Estilos con números o colores literales. Ejemplos malos: Azul, Color1, #003087. Ejemplos correctos: Color/Primario, Color/Fondo_App. Los nombres descriptivos explican el uso, no el valor. Si cambias el primario de azul a verde, el nombre Color/Primario sigue teniendo sentido, pero Azul no.

Error 3: Crear Estilos duplicados con nombres distintos. Es común ver archivos con Rojo_Boton, Boton_Rojo y Color_Boton que guardan exactamente el mismo HEX. Esto rompe la consistencia. Define una convención de nombres desde el inicio y respétala en todo el equipo.

Error 4: Olvidar crear el Estilo de texto para precios. En diseños de e-commerce como los de Mercado Libre o FEMSA, el precio es un elemento que aparece decenas de veces. Si no tienes un Estilo Texto/Precio definido, cada diseñador del equipo puede usar tamaños distintos. Define ese Estilo desde la primera pantalla.

Resumen de atajos útiles

Puntos clave para recordar

• Guarda siempre el color como Estilo antes de aplicarlo a múltiples elementos. Así un solo cambio actualiza todo el proyecto.
• Usa la convención Categoría/Nombre para nombrar tus Estilos: Color/Primario, Texto/H1_Titulo. Eso los agrupa automáticamente en el menú.
• Una paleta de marca mínima tiene seis colores: primario, secundario, fondo, texto principal, texto suave y error.
• Los Estilos de Texto deben cubrir al menos cinco niveles: H1, H2, H3, Cuerpo y Etiqueta. Agrega Texto/Precio si diseñas pantallas de e-commerce.
• Nunca uses colores literales como nombres de Estilo. Usa nombres que describan la función, no el valor visual.