Figma y las variables de texto

Empecemos por el principio, ¿qué son las variables en Figma?

Las variables son parámetros que permiten definir valores concretos que van a ser reutilizados a lo largo de todo el diseño.

Este concepto de valor reusable, ya era conocido por los usuarios de Figma, y se utilizaba a través de los estilos. Los diseñadores establecían estilos específicos de color, de texto, espaciados… que más adelante aplicaban en sus pantallas, con el fin de darle consistencia y eficiencia al diseño.

No obstante, Figma ha llevado este concepto un paso más allá al introducir las variables, optimizando así el proceso de definición y aplicación de valores. Con las variables, los usuarios pueden definir conjuntos de colores de marca o temas, como los modos light y dark, e interactuar con ellos en sus pantallas sin necesidad de modificar los elementos individualmente.

Además, en su última actualización, Figma también ha incluido en sus variables, las de texto.

Pero, ¿cómo funcionan?

Hasta el momento, Figma ofrece opciones para generar variables de Color, String, Number y Booleano. Por ejemplo, mediante el uso de las Variables de String y Numbers, podemos configurar valores como:

String:

Font-family (Roboto, Inter…)

Font-weight (Normal, Bold…)

Font-style (Italic, Oblique…)

Number:

Font-size (24px, XL,MD…)

Font-weight (100, 200, Bold…)

Line-height (20px, basic, large…)

Letter-spacing (-0.3px, 2px, normal…)

Paragraph indent (4px, normal…)

Paragraph spacing (20px, normal…)

¿A favor o en contra?

¿Qué opinamos respecto a esta novedad? En general, bien. La verdad, lo estábamos esperando como agua de mayo, debido a que cuando tenemos diferentes modos (temas, breakpoints, etc.) nos aporta mucha flexibilidad, consistencia y eficiencia.

Pero… (siempre hay un pero), aunque siga existiendo cierta dependencia de los estilos, nos generó un sabor agridulce y dudas sobre su implementación. Analizando más detenidamente, vamos a daros en nuestra opinión, pros y contras sobre el uso de variables de tipografía:

Pros

• Simplifica el proceso de mantenimiento del diseño y evita posibles errores, ya que al actualizar un único valor se reflejarán los cambios en todas partes (esto ya lo teníamos con los estilos de texto, pero ahora la edición es más sencilla ya que lo editamos todo desde el panel de variables)
• Optimizan el trabajo en entornos de marca controlados o en diferentes dispositivos al establecer correlaciones entre variables
• Establecen una coherencia visual escalable a más estilos, marcas y miembros del equipo

Contras

• Para casos en los que no se utilicen correctamente, para breakpoints o multitenant, añade un paso intermedio adicional, ya que seguimos dependiendo de los estilos, por lo que no aporta tanto valor al flujo de trabajo.
• Presentan limitaciones en cuanto a la hora de establecer porcentajes, scoping, decoraciones o soporte para fuentes variables, entre otros aspectos.
• La anidación entre colecciones de variables puede volverse más compleja y descontextualizada.

Entonces, ¿estilos o variables? ¿Qué merece la pena?

Cuando se trata de elegir entre estilos de texto y variables de tipografía en Figma, no hay una opción mejor o peor. La elección adecuada depende del contexto específico de tu proyecto, incluyendo los recursos disponibles y las necesidades del producto.

Estilos de Texto: consistencia y facilidad

• Ideal para proyectos estáticos y menos complejos.
• Fácil actualización: los cambios globales se reflejan en todos los elementos.
• Mejor colaboración: proporciona una referencia común para los equipos de diseño.

En definitiva, recomendamos que utilices estilos de texto si buscas mantener una coherencia y facilitar la gestión de un producto que no es multitenant.

Variables de tipografía: flexibilidad y control

• Recomendado para proyectos dinámicos (multitenant).
• Control detallado: ajustes precisos en cada propiedad tipográfica.
• Personalización rápida: facilita ajustes sin necesidad de redefinir estilos globales.

En resumen, opta por las variables tipográficas si trabajas en un producto multitenant, ya que ofrecen una mayor adaptabilidad y control sobre las diferentes marcas involucradas.

En conclusión

Las variables de tipografía en Figma han generado un notable interés a la comunidad gracias a la flexibilidad y escalabilidad que ha aportado a los procesos de diseño, a pesar de las limitaciones actuales.

A medida que Figma continúe implementando actualizaciones, es probable que aborden las limitaciones identificadas, permitiéndonos aprovechar aún más las ventajas de las variables de tipografía.