Estilos de color, texto y efectos

¿Por qué son tan importantes los estilos?

Imagina que estás diseñando una aplicación con 50 pantallas y has usado un azul específico para todos los botones primarios. Si algún día tu cliente decide que ese azul debe ser más claro, tendrías que cambiar manualmente cada uno de esos 50 botones. Con los estilos, simplemente modificas el estilo una vez y todos los botones se actualizan instantáneamente. Esta centralización del diseño es lo que hace a Figma una herramienta poderosa para equipos de diseño.

Los estilos también facilitan la colaboración. Cuando trabajas en equipo, cada diseñador puede utilizar los mismos estilos, asegurando que el producto final tenga un aspecto coherente independientemente de quién haya trabajado en cada pantalla. Además, cuando exportas tus diseños a开发团队, pueden acceder a una lista clara de todos los colores, tipografías y efectos utilizados, lo que facilita la implementación.

Figma organiza los estilos en tres categorías principales: estilos de color, estilos de texto y estilos de efectos. Cada uno de ellos tiene su propia biblioteca y se gestiona de manera independiente, aunque pueden combinarse en componentes más complejos.

Estilos de color en Figma

Los estilos de color te permiten definir una paleta cromática coherente para tu proyecto. Un estilo de color puede ser un color sólido, un gradiente o incluso un color con opacidad. La clave está en nombrar tus colores de manera semántica en lugar de descriptiva. Por ejemplo, en lugar de llamar a un color "azul-claro", es mejor llamarlo "color-primario" o "botón-fondo". Esto hace que sea más fácil recordar para qué sirve cada color cuando tienes una paleta grande.

Para crear un estilo de color en Figma, primero selecciona un elemento que tenga el color que deseas guardar. Luego, en el panel de propiedades derecho, haz clic en el icono del círculo de color. En el menú desplegable que aparece, verás la opción "+ Crear estilo". Al hacerlo, se abrirá un diálogo donde puedes nombrar tu estilo y elegir si guardarlo en el archivo actual o en una biblioteca de equipo.

Una vez creado, puedes aplicar el estilo a cualquier elemento que acepte color: fondos, bordes, texto, iconos, etc. Para aplicarlo, selecciona el elemento, ve al panel de propiedades, haz clic en el círculo de color y selecciona tu estilo de la lista. Verás que aparece un pequeño icono de enlace junto al color, indicando que está vinculado a un estilo.

Trabajando con variables de color

Las variables de color son una evolución más reciente de Figma que ofrecen aún más flexibilidad. A diferencia de los estilos tradicionales, las variables pueden tener diferentes valores según el modo en que se encuentren. Esto es especialmente útil para crear temas claros y oscuros sin duplicar toda tu paleta de colores.

1. Paso 1: Ve al panel de Assets (Cmd/Ctrl + Alt + O) y haz clic en "Variables" en lugar de "Estilos".
2. Paso 2: Crea una colección de variables haciendo clic en el icono "+" junto a "Variables".
3. Paso 3: Dentro de la colección, añade un grupo para tus colores y luego añade variables individuales como "background" o "text-primary".
4. Paso 4: Asigna valores diferentes para cada modo (Light/Dark) haciendo clic en el icono de modo junto a cada valor.
5. Paso 5: En tus diseños, aplica las variables en lugar de estilos fijos. Figma cambiará automáticamente según el modo activo.

Estilos de texto en Figma

Los estilos de texto son fundamentales para mantener una jerarquía tipográfica coherente. Un estilo de texto en Figma no solo define la fuente, sino también el tamaño, el peso, la altura de línea, el espaciado entre letras y muchos otros parámetros tipográficos. Cuando aplicas un estilo de texto a unlayer, toda la configuración se aplica de una vez.

Para crear un estilo de texto, selecciona un text layer con el formato que deseas guardar. Luego, en el panel de propiedades derecho, junto a la sección de tipografía, verás un icono de "T" con cuatro puntos. Haz clic en él y selecciona "+ Crear estilo de texto". Al igual que con los colores, puedes nombrar tu estilo de manera descriptiva.

Los estilos de texto más efectivos siguen una escala tipográfica basada en proporciones matemáticas, como la escala mayor (1.067, 1.333, 1.618) o la escala menor (1.2). Esto garantiza que los tamaños de texto se vean armónicos entre sí. Por ejemplo, si tu texto base es de 16px, tu título H1 podría ser 32px (2x), H2 sería 24px (1.5x), y así sucesivamente.

"La tipografía es el arte de disponer el tipo de forma que facilite la lectura y sea estéticamente agradable." — Jan Tschichold

Figma incluye soporte para fuentes variables, que son fuentes que pueden ajustar su peso de forma continua en lugar de tener pesos predefinidos (Regular, Medium, Bold). Esto te da más flexibilidad para crear estilos de texto personalizados que se adapten perfectamente a tus necesidades.

Estilos de efectos en Figma

Los efectos incluyen sombras, bordes suaves (glows), desenfoques y fondos con gradientes. Figma permite crear estilos de efecto que combinan varios efectos en uno solo, lo que es perfecto para crear efectos de tarjeta consistentes o estados de hover complejos.

Los tipos de efectos disponibles en Figma son:

• Drop shadow: Sombra clásica que se proyecta fuera del elemento.
• Inner shadow: Sombra que aparece dentro del elemento, dando efecto de profundidad.
• Blur: Desenfoque que puede ser de fondo (background blur) o gaussiano general.
• Layer blur: Desenfoque que afecta a todo el layer.

Para crear un estilo de efecto, aplica los efectos deseados a un elemento, luego en el panel de efectos, haz clic en el icono de menú (tres puntos) y selecciona "+ Crear estilo de efecto". Puedes combinar hasta cinco efectos diferentes en un solo estilo, cada uno con su propia configuración de color, opacidad, offset y blur.

Escalas de sombra efectivas

Cuando trabajes con sombras, es útil crear una escala de sombras que represente diferentes niveles de elevación en tu interfaz. Material Design utiliza este concepto con su sistema de elevación, donde sombras más pronunciadas indican elementos que están "más arriba" y, por tanto, más cerca del usuario.

Aplicando estilos a componentes

Los estilos cobran su máximo potencial cuando los combinas con componentes. Cuando creas un componente con propiedades de estilo, puedes usar "variants" (variantes) para diferentes estados como hover, active o disabled, cada uno con sus propios estilos aplicados.

Imagina un botón que cambia su estilo de fondo al pasar el cursor sobre él. En lugar de crear dos botones separados, creas un componente con dos variantes. Cada variante tiene aplicada una versión diferente de tu estilo de color (por ejemplo, "button/primary" y "button/primary-hover"). Cuando el prototipo interactúa con el botón, simplemente cambia la variante, actualizando automáticamente todos los estilos.

Errores frecuentes al trabajar con estilos

Incluso los diseñadores experimentados cometen errores al trabajar con estilos. Conocer estos pitfalls te ayudará a evitarlos:

Organizando tu biblioteca de estilos

Una buena organización de estilos es clave para la escalabilidad de tu proyecto. Aquí tienes una estructura recomendada que funciona bien para proyectos de cualquier tamaño:

• Colores: Agrupa por categoría (primarios, neutros, semánticos, etc.), luego por estado o tono.
• Textos: Organiza por jerarquía (display, heading, body, caption) y luego por variante (regular, bold, italic).
• Efectos: Agrupa por tipo de sombra o efecto, luego por intensidad o tamaño.

Figma permite crear carpetas y grupos en el panel de estilos para ayudarte a organizar. Usa esta funcionalidad. Una estructura clara facilita encontrar el estilo correcto y reduce la tentación de crear duplicados.

Publicar y compartir estilos con tu equipo

Para compartir estilos con tu equipo, necesitas publicar una biblioteca de equipo. Ve al menú principal, selecciona "Assets" y luego "Publish to Team Library". Cualquier estilo puede ser publicado independientemente de otros elementos del archivo.

Los demás miembros del equipo pueden activar esta biblioteca yendo a "Assets" > "Team Libraries" y activando la biblioteca que necesitan. Los estilos aparecerán en su panel de propiedades y podrán usarlos en sus diseños.

Cuando actualices un estilo publicado, Figma te preguntará si deseas publicar los cambios. Los miembros del equipo recibirán una notificación y podrán optar por actualizar los estilos en sus archivos o mantener las versiones actuales.

Resumen y buenas prácticas

Los estilos de color, texto y efectos son pilares fundamentales del diseño de interfaces consistente y escalable. Dominar su uso te permitirá:

• Mantener coherencia visual en todo tu proyecto.
• Realizar cambios globales de manera rápida y segura.
• Colaborar efectivamente con tu equipo de diseño y desarrollo.
• Crear sistemas de diseño robustos y profesionales.
• Reducir el tiempo de mantenimiento y corrección de diseños.