Aplicar colores sueltos en un proyecto de diseño parece inofensivo hasta que descubres cinco tonos distintos de púrpura donde solo debería haber uno. Los estilos en Figma resuelven ese problema al permitirte nombrar propiedades que ya usas —colores, tipografías y sombras— para reutilizarlas de forma coherente en todas tus pantallas. Si el cliente pide cambiar el púrpura por naranja, lo haces en un solo clic y el cambio se refleja en todo el proyecto.
¿Qué son los estilos y por qué evitan inconsistencias?
Los estilos no son propiedades nuevas que agregas a tu archivo. Son las mismas propiedades que ya has estado utilizando —rellenos, strokes, sombras— pero con un nombre asignado que puedes aplicar de manera uniforme. Sin estilos, cada vez que copias un hexadecimal corres el riesgo de equivocarte o de no saber cuál es la versión más actualizada. Esos valores se conocen como colores absolutos y generan exactamente el problema de los múltiples púrpuras [0:45].
Un buen punto de partida es reunir en una sección de Foundations los colores y la escala tipográfica que has venido usando. En el proyecto Finwise, por ejemplo, se identifican un azul púrpura como elemento primario, un verde para elementos positivos y un tono rosado-rojo para elementos negativos, además de blancos para elevaciones de tarjetas y un negro para textos [1:00].
¿Cómo se crean estilos de color en Figma?
El proceso es directo. Seleccionas el elemento que ya tiene el color deseado, vas a la propiedad de Fill y das clic en el ícono Apply styles and variables. Desde ahí eliges crear un nuevo estilo con el signo de más, seleccionas "estilo" y le asignas un nombre descriptivo [1:50].
- Usa nombres funcionales como Brand/Primary en lugar de "Brand Purple", así el nombre sigue teniendo sentido aunque cambies el color.
- Agrega una descripción de uso: exclusivo para botones, para reforzar la marca, etc.
- Una vez creado, se diferencia de un color absoluto porque muestra el nombre en la propiedad de relleno.
Para aplicarlo, seleccionas cualquier elemento —una tarjeta, un botón flotante, el tabbar— y eliges el estilo recién creado desde el mismo ícono [2:30]. No verás un cambio visual inmediato si el hexadecimal coincide, pero en el panel de Fill aparecerá el nombre Brand Primary confirmando que está vinculado.
¿Qué ocurre al editar un estilo de color?
Aquí está la verdadera ventaja. Si decides cambiar el color primario, vas a la sección de estilos en el panel derecho de la página, abres el ícono de configuraciones y modificas el valor. Al instante, todos los elementos que usan ese estilo reflejan el cambio [3:15]. Puedes probar con naranja, verde o cualquier otro tono y ver el resultado en tiempo real, sin tocar cada componente individualmente.
El mismo flujo aplica para crear estilos adicionales como Brand/Positive y Brand/Negative [3:50].
¿Cómo se crean estilos de texto y de efecto?
Para los estilos de texto, seleccionas un elemento tipográfico de tu type scale y creas el estilo desde el ícono de aplicar estilos. Lo que se guarda incluye tamaño del texto, peso de la fuente, tipo de fuente, interlineado y configuraciones avanzadas de decoración [4:10].
- Organiza con diagonales para crear jerarquías: Display/Large, Heading/Large, Heading/Medium.
- Una vez creados, aparecen agrupados en la sección de text styles del panel derecho.
- Si cambias el tamaño de Display/Large a 64, por ejemplo, el cambio se propaga a cada elemento vinculado [5:20].
¿Cómo funcionan los estilos de efecto con sombras?
Las sombras siguen la misma lógica. Seleccionas el elemento con el efecto deseado, creas el estilo desde el panel de efectos y le asignas un nombre con escala: Shadows/Level 1 para elevaciones sutiles y Shadows/Level 2 para elevaciones más pronunciadas [5:40].
- Puedes agregar niveles adicionales (Level 3, Level 4) conforme tu diseño lo requiera.
- Para aplicarlos, seleccionas el componente y eliges la sombra adecuada desde el panel de efectos.
- Si una tarjeta de presupuestos necesita mayor prominencia, basta con cambiar de Level 1 a Level 2 [6:20].
Con esta base creada, el siguiente paso es detectar todos los elementos del proyecto que necesiten un estilo de color, texto o efecto y vincularlos. Y cuando surja la necesidad de que un botón luzca idéntico en 20 pantallas pero con texto e ícono diferentes en cada contexto, estarás listo para trabajar con componentes e instancias, que es justo lo que viene a continuación. ¿Cuántos estilos lograste identificar en tu proyecto? Comparte tu experiencia en los comentarios.
