¿Qué Son las Variables de Tipografía en Figma y Por Qué Deberías Usarlas?

Cuando se habla de variables en Figma, especialmente con colores, la comprensión es bastante intuitiva: azul, verde, negro. Sin embargo, con la tipografía, el concepto se vuelve más interesante. Una «tipografía» como tal engloba múltiples propiedades que pueden ser tokenizadas. De hecho, hasta ocho tipos diferentes de variables pueden componer una sola definición tipográfica.

Esto significa que, para crear una variable de tipografía en Figma completa, primero se deben construir estas sub-variables y luego unirlas bajo un mismo «paraguas». Esto permite una granularidad y control increíbles sobre cómo se muestra y se comporta la tipografía en los diseños.

Las 8 propiedades de tipografía que se pueden tokenizar en Figma son:

1. Fuente (Font Family): El tipo de letra en sí (Ej: Inter, Roboto, Arial).
2. Peso de la Fuente (Font Weight): Grosor de la fuente (Ej: Bold, Medium, Regular).
3. Estilo de Fuente (Font Style): Aunque Figma no permite tokenizarlo directamente en variables (sí en estilos), es importante saber que existe (Ej: Italic, Underline, Strikethrough). Herramientas como Tokens Studio sí lo permiten.
4. Altura de Línea (Line Height): La separación vertical entre líneas de texto.
5. Tamaño de Fuente (Font Size): El tamaño de la tipografía (Ej: 12px, 16px).
6. Espaciado de Letras (Letter Spacing): El famoso kerning, espacio entre caracteres.
7. Altura de Caja de Texto (Text Box Height/Vertical Trim): Figma permite ajustar cómo el texto se asienta en su caja, dándole un poco de «aire». Normalmente se usa «Standard» o «Cap height».
8. Interlineado entre Párrafos (Paragraph Spacing): El espacio vertical entre párrafos.

Tokenizar estas decisiones y luego agruparlas en un estilo de Figma es la clave para una gestión eficiente y escalable de la tipografía en Figma. Esta aproximación modular garantiza que cada ajuste se propague de forma consistente, ahorrando tiempo y esfuerzo en el proceso de diseño.

Paso a Paso: Creando Variables de Tipografía en Figma Como un Experto

Marta Conde guio a los asistentes a través de un proceso claro para construir sus variables de tipografía en Figma. A continuación, se replica ese proceso:

1. Creación de Variables Primitivas

Las variables primitivas son la base del sistema. Son los valores más fundamentales que definen la tipografía en Figma.

• Acceso: En Figma, se debe ir a la sección «Local variables» en el panel derecho.
• Tipos de Valor: Se usarán principalmente String (para texto, como el nombre de la fuente o el peso) y Number (para valores numéricos como tamaño o altura de línea).

a) Font Family (Familia de Fuente – String):

• Se crea una variable de tipo String.
• Nombre: font-family/roboto (o el nombre que se prefiera, como primitives/font/roboto).
• Valor: Roboto (asegurándose de que el nombre coincida exactamente con una fuente instalada).
• Importante: Si el nombre de la fuente en el valor no existe, Figma la mostrará tachada al intentar aplicarla.

b) Font Weight (Peso de Fuente – String o Number): Marta Conde utilizó String para los pesos, lo cual es una práctica común.

• Se crean variables de tipo String:
• Nombre: font-weight/bold, Valor: Bold
• Nombre: font-weight/medium, Valor: Medium
• Nombre: font-weight/light, Valor: Light

c) Font Size (Tamaño de Fuente – Number):

• Se crean variables de tipo Number:
• Nombre: font-size/scale-01 (o size/xs), Valor: 12
• Nombre: font-size/scale-02 (o size/sm), Valor: 16
• Nombre: font-size/scale-03 (o size/md), Valor: 18

d) Line Height (Altura de Línea – Number):

• Se crean variables de tipo Number:
• Nombre: line-height/sm, Valor: 18 (para el tamaño 12px)
• Nombre: line-height/md, Valor: 20 (para el tamaño 16px)
• Nombre: line-height/lg, Valor: 28 (para el tamaño 18px)
• Nota: Estos valores son ejemplos; se ajustan según las necesidades del diseño.
• Nombra tu Colección: Se renombra la colección de estas variables a «Primitives» (Primitivas).

2. Creación de Variables Semánticas (Capa Semántica)

Las variables semánticas otorgan significado y contexto a las primitivas. En lugar de pensar en «scale-01», se pensará en «caption» o «body». Esto es crucial para la comunicación con el equipo y para la escalabilidad de la tipografía en Figma.

• Se crea una nueva colección y se llama «Typography» (Tipografía).

a) Estructura por Bloque (Ej: Headline): En lugar de crear todos los pesos, luego todos los tamaños, etc., es más eficiente crear un bloque completo (Ej: Headline) y luego duplicarlo.

• Para headline:
• String para Peso:
• Nombre: headline/weight
• Valor: Se enlaza a la variable primitiva font-weight/bold. (Se hace clic en el icono de la derecha en el campo de valor para enlazar variables).
• Number para Tamaño:
• Nombre: headline/size
• Valor: Se enlaza a font-size/scale-03.
• Number para Altura de Línea:
• Nombre: headline/line-height
• Valor: Se enlaza a line-height/lg.
• Agrupa: Se seleccionan estas tres variables y se crea un grupo llamado headline. Figma lo hará automáticamente si se usa el formato nombre-grupo/nombre-variable.

b) Duplica y Adapta para body y caption:

• Se duplica el grupo headline.
• Se renombra el duplicado a body.
• Se ajustan los enlaces de las variables dentro de body:
• body/weight -> font-weight/medium
• body/size -> font-size/scale-02
• body/line-height -> line-height/md
• Se repite el proceso para caption:
• caption/weight -> font-weight/light
• caption/size -> font-size/scale-01
• caption/line-height -> line-height/sm

3. Creación de Modos para Tipografía Responsive (Breakpoints)

Aquí es donde la magia ocurre para el diseño adaptable. El objetivo es que el tamaño de la tipografía en Figma cambie según el contexto (Ej: tamaño de pantalla).

• Se crea una nueva colección y se llama «Breakpoints» (Puntos de Ruptura).
• En esta colección, se crean modos. Por defecto se tendrá «Mode 1». Se renombra a LG (Large). Se añaden dos modos más: MD (Medium) y SM (Small).

a) Variables de Tamaño para Breakpoints: Solo se crearán variables para las propiedades que cambian, en este caso, el tamaño de fuente.

➡️ Para headline-size:

• Se crea una variable de tipo Number.
• Nombre: headline-size
• Valor para LG: Se enlaza a primitives/font-size/scale-03 (el más grande).
• Valor para MD: Se enlaza a primitives/font-size/scale-02.
• Valor para SM: Se enlaza a primitives/font-size/scale-01.

➡️ Para body-size:

• Se duplica headline-size y se renombra a body-size.
• Valor para LG: primitives/font-size/scale-02.
• Valor para MD: primitives/font-size/scale-01.
• Valor para SM: primitives/font-size/scale-01 (en el ejemplo de Marta Conde, se mantenía igual que MD).

➡️ Para caption-size:

• Se duplica y se renombra a caption-size.
• Valor para LG: primitives/font-size/scale-01.
• Valor para MD: primitives/font-size/scale-01.
• Valor para SM: primitives/font-size/scale-01.

4. Ocultar Variables No Necesarias (Scoping)

Para evitar que el equipo use directamente las primitivas o ciertas variables semánticas que solo son intermedias, se pueden ocultar del panel de propiedades de Figma. Esto mantiene el panel de diseño limpio y asegura que se utilicen los tokens adecuados para la tipografía en Figma.

• Se va a la colección «Primitives».
• Para cada variable (excepto font-family que se usará directamente en los estilos), se hace clic en el icono de edición (rueda dentada) y se desmarca «Show in all supported properties» (o se ajusta el «Scoping» para que no aparezca en «Text content»).
• También se puede marcar «Hide from publishing» para que no se publiquen en librerías si no es necesario.
• En la colección «Typography», la variable size (Ej: headline/size) también debería ocultarse de las propiedades de texto, ya que su valor provendrá de la colección «Breakpoints».

Vinculando Variables de Tipografía en Figma a Estilos

Una vez que las variables están estructuradas, es momento de crear los estilos de texto de Figma que las consumirán, dando vida a la tipografía en Figma.

1. Selecciona un Elemento de Texto: O simplemente se va al panel de «Text styles» (cuatro puntos) y se hace clic en «+».

2. Configura el Estilo (Ej: Headline):

• Font Family: Se hace clic en el icono de variable (ruedita) y se selecciona la variable primitiva: primitives/font/roboto.
• Font Weight: Se hace clic en el icono de variable y se selecciona la variable semántica: typography/headline/weight.
• Font Size: ¡Aquí está el truco para la responsividad! Se hace clic en el icono de variable y se selecciona la variable de la colección «Breakpoints»: breakpoints/headline-size.
• Line Height: Se hace clic en el icono de variable y se selecciona: typography/headline/line-height.
• Ajuste de Caja de Texto: Marta Conde recomienda «Align top» (o «Standard» en la terminología más antigua) en la sección «Type settings» (tres puntos horizontales) -> «Vertical trim» para dar un poco de aire al texto.

3. Guarda el Estilo: Se le da el nombre headline.

4. Repite para body y caption: Se crean estilos de texto para body y caption, enlazando sus propiedades a las variables semánticas (typography/body/*, typography/caption/*) y de breakpoints (breakpoints/body-size, breakpoints/caption-size) correspondientes.

Si ya se tienen estilos creados y se desea vincularlos a variables: Se edita el estilo existente y, para cada propiedad (peso, tamaño, etc.), se hace clic en el icono de la variable (ruedita) y se selecciona la variable correspondiente que se ha creado.

Aplicando Variables de Tipografía en Figma y Modos para un Diseño Responsive

Con los estilos listos y vinculados a variables (que a su vez pueden tener modos), se observa cómo funciona para lograr una tipografía en Figma adaptable.

Ejemplo con una Card: Marta Conde utilizó un componente de Card con un título (headline), un cuerpo de texto (body) y una descripción pequeña (caption).

1. Aplica los Estilos:

• Al título de la Card, se aplica el estilo de texto headline.
• Al cuerpo, se aplica el estilo body.
• A la descripción, se aplica el estilo caption.

2. Cambiando Modos en el Componente:

• Se selecciona la instancia de la Card.
• En el panel derecho, bajo la sección de la colección «Breakpoints», se verá un desplegable con los modos (LG, MD, SM).
• Al cambiar el modo, la tipografía en Figma de la Card se ajustará automáticamente según cómo se hayan configurado las variables de tamaño en la colección «Breakpoints».

3. Cambiando Modos en un Frame:

• Se crean tres frames: Desktop (grande), Tablet (mediano), Mobile (pequeño).
• Se selecciona el frame «Desktop». En el panel derecho, se va a la sección de la colección «Breakpoints» y se asigna el modo LG.
• Al frame «Tablet», se asigna el modo MD.
• Al frame «Mobile», se asigna el modo SM.
• Ahora, si se arrastra una instancia de la Card de un frame a otro, ¡su tipografía en Figma se adaptará automáticamente al modo del frame!

Extra: Variables Dinámicas con el Plugin «Dynamic Variables»

Marta Conde compartió un tip avanzado: el uso del plugin «Dynamic Variables» de Figma. Este plugin permite crear escalas tipográficas (y de otros tipos) de forma dinámica, ofreciendo un control sin precedentes sobre la tipografía en Figma.

• Cómo funciona: Se define una variable base (Ej: font-size/base = 16px).
• Luego, en la descripción de otras variables de tamaño, se pueden usar fórmulas como base * 1.3 o base / 1.3.
• El plugin lee estas descripciones y actualiza los valores de las variables.
• Beneficio: Si se cambia el valor de font-size/base, todas las demás variables que dependen de ella se recalculan automáticamente al ejecutar el plugin. Esto es genial para mantener escalas consistentes en la tipografía en Figma.
• Uso:
  1. Se instala el plugin «Dynamic Variables».
  2. Se crea una variable base, ej: primitives/font-size/base con valor 16. En su descripción, se escribe base.
  3. Para otra variable, ej: primitives/font-size/large, en su descripción, se escribe base * 1.618 (o el factor que se desee).
  4. Para primitives/font-size/small, en su descripción, se escribe base / 1.25.
  5. Se ejecuta el plugin. ¡Se verá cómo los valores se actualizan!

Por Qué Dominar las Variables de Tipografía en Figma es Crucial

Entender y aplicar correctamente las variables de tipografía en Figma no es solo una habilidad técnica más; es una inversión estratégica en el flujo de trabajo y en la calidad de los diseños, es esencial para los Product Designers:

✔️Consistencia Absoluta: Asegura que la tipografía en Figma sea uniforme en todo el proyecto, eliminando inconsistencias visuales.

✔️Escalabilidad Sencilla: Modificar un token o variable actualiza automáticamente todas sus instancias. Ideal para sistemas de diseño complejos y la evolución de la tipografía.

✔️Eficiencia Mejorada: Reduce el tiempo dedicado a ajustes manuales, permitiendo al diseñador enfocarse en el diseño creativo.

✔️Colaboración Fluida: Facilita el trabajo en equipo y la entrega a desarrollo, ya que los tokens de tipografía en Figma son un lenguaje común.

✔️Diseño Responsive Inteligente: La gestión de modos simplifica enormemente la adaptación a diferentes dispositivos, garantizando una tipografía en Figma impecable en cualquier pantalla.

Consejos y Buenas Prácticas

• Planifica la Nomenclatura: Antes de empezar, se debe planificar cuidadosamente cómo se nombrarán las colecciones y variables. Una buena nomenclatura es clave para la organización de la tipografía en Figma. Marta Conde compartió un recurso valioso sobre esto (ver más abajo).
• Empieza con Primitivas: Siempre se deben definir los valores base (primitivas) y luego construir capas semánticas sobre ellas para la tipografía en Figma.
• Usa la Semántica Consistentemente: Es recomendable aplicar estilos semánticos (headline, body) en lugar de estilos ad-hoc.
• Documenta las Decisiones: Especialmente en equipos, es fundamental explicar el porqué de los tokens de tipografía en Figma y su uso.
• Prueba en Diferentes Dispositivos/Contextos: Se debe asegurar que los modos responsivos funcionan como se espera para la tipografía en Figma.
• Itera: El sistema de tokens de tipografía en Figma no tiene por qué ser perfecto desde el día uno. Se puede empezar, probar y ajustarlo a medida que evolucionan las necesidades.

Empodera tus Diseños con Variables de Tipografía en Figma

Las variables de tipografía en Figma son una herramienta poderosa que, una vez dominada, permitirá diseñar de manera más inteligente, rápida y consistente. Como demostró Marta Conde, con una estructura bien pensada y el uso de primitivas, semánticas y modos, se pueden crear sistemas de tipografía flexibles y preparados para cualquier desafío.

¡Se espera que esta guía sea de gran utilidad! Anímate a experimentar y a llevar tus diseños en Figma a un nuevo nivel.