Definir una paleta de colores en Figma es uno de los pasos clave para construir un design system coherente. Aquí aprenderás cómo elegir tu color primario, sus variaciones, y convertirlos en tokens reutilizables usando la herramienta de Material Design, todo aplicado a una estética New Brutalism.

¿Qué colores necesitas para tu design system?

Antes de abrir Material Design, conviene saber qué tipos de color vas a definir. La estructura base que se usa en este proyecto incluye:

• Color primario: el protagonista visual de tu producto. Para este proyecto basta con uno.
• Neutros: la escala de grises para sombras, bordes y fondos sutiles.
• Semánticos: info, success, warning y error. Por convención, rojo para error y amarillo o naranja para warning, aunque puedes ajustarlo.

¿Cuántos colores debe tener una paleta UI? Lo ideal es mantenerla pequeña: un primario y dos o tres variaciones. Más colores aumentan la carga cognitiva y hacen que el usuario se pierda.

¿Cómo elegir el color primario en Material Design?

La herramienta de Material Design te permite seleccionar un color base y ver toda su escala numerada (50, 100, 200… hasta 900). En este caso se eligió el 300 como color principal, con el 50 como variación clara y el 600 como variación oscura [01:18].

La lógica es simple: el 300 es el tono medio que usarás más, el 50 sirve para fondos suaves y el 600 para acentos o textos sobre claro.

¿Cómo estructurar el frame de colores en Figma?

Una vez elegidos los tonos, toca llevarlos al archivo. Se crea un nuevo frame tipo iPad mini, se copia el título estándar de la sección anterior (tipografía) y se renombra a Colors [02:30]. El stroke se mantiene en 2 píxeles para conservar la estética New Brutalism del proyecto.

Dentro del frame se dibujan tres rectángulos de 70x70 píxeles con un radius de 12 y un spacing de 24 píxeles entre ellos. Cada cuadrado representará una variación del color primario.

¿Cómo crear tokens de color en Figma?

Los tokens son variables que vinculan un nombre semántico a un valor de color. Esto te permite cambiar el color en todo el archivo modificando solo el token. El proceso es:

1. Hacer clic fuera de los frames para acceder a local styles.
2. Seleccionar Color en lugar de texto.
3. Nombrar el token con la convención primary-300, primary-50, primary-600.
4. Pegar el código hexadecimal y dar Create Style.

¿Qué es un design token? Es una variable nombrada que guarda un valor de diseño (color, espaciado, tipografía) para reutilizarlo de forma consistente en todo el sistema.

Este paso evita la deuda técnica a futuro, porque cualquier ajuste de marca se aplica desde un solo lugar [05:40].

¿Cómo validar el contraste de tus colores?

Elegir colores bonitos no es suficiente: deben ser accesibles. Aquí entra en juego el contraste contra blanco y negro.

En el ejercicio se prueba lo siguiente:

• El primary 50 contrasta con texto negro (#000000).
• El primary 300 también funciona con negro.
• El primary 600 falla con negro y solo contrasta con blanco (#ffffff).

La herramienta de Material Design lo confirma automáticamente al marcar fallos de contraste. Por eso, sobre el cuadrado 600 se aplica texto blanco, no negro.

¿Cómo crear tokens de blanco y negro?

Para mantener consistencia, también se crean tokens para los neutros básicos:

• white: #ffffff.
• black: #000000.

Así, cuando asignas el color de un texto, no escribes el hex directo: eliges el token desde local colors. Figma reconoce de inmediato que ese texto usa la variable white, lo que facilita futuros cambios globales.

¿Qué falta y cuál es el reto?

Con el primario y sus variaciones listas, quedan pendientes los neutros en escala de grises y los colores semánticos (info, success, warning, error). El reto es que tú los elijas usando la misma herramienta de Material Design y los conviertas en tokens siguiendo la misma convención de nombre y número.

Un detalle importante: el contraste es solo una parte de la accesibilidad. Hay más variables —tamaño de fuente, jerarquía, estados de foco— que vale la pena estudiar a fondo si quieres que tu producto sea verdaderamente inclusivo.

Cuéntame en los comentarios qué color primario elegiste y cómo te fue armando tus tokens.