Crear variables tipográficas en Figma: roles de texto

Para crear variables tipográficas en Figma, crea variables de cadena para los nombres de fuente y variables numéricas para las dimensiones. Vincúlalas a las propiedades de texto compatibles, reúne los valores en unos pocos estilos reutilizables y comprueba el resultado con contenido de interfaz. La lista empieza a ser útil cuando otra persona puede aplicar un rol, cambiar un valor aprobado y anticipar qué textos responderán.

El ejercicio construye una receta pequeña para un proyecto ficticio llamado Fieldnote. Su panel de ajustes incluye título, explicación, etiquetas y una acción para guardar. Los nombres, medidas y pruebas son propuestas editoriales, no valores predeterminados de Figma ni umbrales universales de accesibilidad. Buscamos una primera configuración mantenible que pueda revisarse con claridad.

Empieza con tres roles de texto

Empieza por la función del texto: título, cuerpo y etiqueta. Coloca un panel de ajustes con contenido realista junto a la muestra tipográfica. Prueba “Notificaciones del espacio de trabajo” como título, una explicación de dos frases y “Frecuencia del correo” como etiqueta. Estos tres usos aportan más información sobre la interfaz que una página llena de letras idénticas.

Escribe un contrato breve para cada rol. El título sitúa la sección; el cuerpo explica consecuencias; la etiqueta identifica un control. Anota la longitud esperada y los énfasis permitidos. En este ejemplo dejamos que el título ocupe varias líneas, que la explicación crezca en vertical y que las etiquetas sigan siendo legibles junto a sus controles. Son decisiones del ejercicio.

Elige una familia disponible antes de crear valores. Comprueba tildes, eñes, signos de apertura, cifras y los pesos utilizados en el producto. Compara “Resumen mensual” con “Resumen mensual de actividad del equipo” y añade un nombre de cuenta largo. Una muestra del abecedario no demuestra que la familia funcione igual de bien en todos los componentes.

La muestra tipográfica de EmviUI que aparece a continuación permite comparar Inter en distintos tamaños y pesos. Úsala para discutir jerarquía, sin deducir de la imagen que existan vínculos a variables. El kit de Figma de EmviUI ofrece componentes donde probar los roles en contexto. Revisa el archivo concreto antes de describir cómo está configurado.

Crea y vincula los valores tipográficos

Abre Variables desde la navegación izquierda de Figma, crea una colección para el ejercicio y añade valores con nombre. La guía de creación de variables explica el acceso actual, la creación y el alcance. Trabaja primero en local con permiso de edición y comprueba las capacidades del plan antes de preparar bibliotecas entre archivos.

Crea type/family/ui como cadena con el valor Inter. Añade type/size/body = 16 y type/line/body = 24 como números. Completa las filas de la tabla y separa las dimensiones de los nombres. Usamos valores explícitos en píxeles para esta muestra de Figma. Su función es hacer visible y revisable cada vínculo, no imponer una escala definitiva al producto.

La lista de propiedades compatibles distingue las cadenas de familia o estilo de los números de tamaño, peso numérico, interlineado y espaciado. Selecciona una capa de texto, abre el selector de variables de la propiedad y elige el valor correspondiente. Si no aparece, comprueba tipo y alcance antes de crear otra variable con un nombre parecido.

Vincula primero el tamaño del cuerpo y cambia su valor de 16 a 18 de forma temporal. Comprueba que responde el texto elegido y vuelve a 16. Repite con el interlineado. Este cambio controlado distingue un vínculo de una cifra escrita que casualmente coincide. Conserva un ejemplo vinculado y otro deliberadamente independiente para explicar qué debe permanecer igual.

Utiliza nombres de estilo válidos para la familia elegida. La documentación para desarrolladores de Figma también explica el tratamiento del peso numérico y los vínculos en estilos o fragmentos de texto. En este ejercicio manual, verifica una propiedad cada vez. Los párrafos con formatos mezclados necesitan una revisión específica; no presupongas que toda la capa responde de manera uniforme.

Antes de salir de Variables, añade una descripción útil a cada valor de rol. Explica que el tamaño de cuerpo sirve para instrucciones ordinarias y no para metadatos compactos. En el interlineado, indica la unidad de la muestra y el tamaño al que acompaña. La descripción debe permitir elegir sin abrir el panel original. Evita expresiones como “el valor normal”: dejan de orientar cuando aparece un segundo contexto o una nueva persona se incorpora al equipo.

Conserva estilos de texto reutilizables

Crea los estilos Cuerpo, Etiqueta y Título desde la muestra aprobada siguiendo el flujo de estilos de texto de Figma. Un estilo reúne propiedades reutilizables; las variables aportan valores reutilizables dentro de esa combinación. Explica ambas responsabilidades cuando compartas la receta con otra persona.

Usa nombres relacionados con el propósito, como Text/Body/Default, sin incluir todas las cifras actuales. Aplica Cuerpo a un párrafo nuevo y revisa sus vínculos. Cambia después el tamaño subyacente en la copia de prueba. Deben responder ambos consumidores previstos. Si solo cambia el original, inspecciona la definición del estilo y la segunda capa antes de extender la configuración al resto del archivo.

Mantén explícitas las decisiones de color y maquetación. El rol de cuerpo no decide por sí solo si el bloque se estira, salta de línea o conserva una altura fija. En el panel, permite que la explicación ocupe el ancho disponible y crezca con el contenido. Revisa también el contenedor: un texto flexible dentro de una tarjeta rígida puede seguir dejando instrucciones recortadas.

Para esa parte continúa con Auto Layout y Fill Container. Si necesitas revisar la separación entre valores y tratamientos reutilizables, consulta variables y estilos. Aquí mantenemos el foco en demostrar una receta tipográfica concreta, con consumidores conocidos y un resultado comprobable.

Las variables tipográficas tampoco son fuentes variables. La guía de fuentes variables de Figma describe archivos con ejes ajustables. Vincular el tamaño no convierte una fuente estática en variable, y elegir una fuente variable no crea valores de diseño con nombre. Resuelve aparte la disponibilidad de la familia y sus estilos cuando la muestra no pueda utilizarlos.

Haz una pequeña prueba negativa antes de aprobar el estilo. Coloca un segundo párrafo junto a la muestra y deja su tamaño deliberadamente sin vincular. Cambia la variable del cuerpo, observa la diferencia y señala con claridad el párrafo independiente. Retira esa prueba del entregable final. Así la revisión demuestra una dependencia concreta y no se limita a comparar capturas parecidas. También facilita hablar de modificaciones locales sin tocar componentes de producción que no forman parte del ejercicio.

Prueba el contenido antes de añadir modos

Ejecuta la primera prueba con una sola receta aprobada. Sustituye el contenido corto por una traducción más larga e introduce un nombre de espacio poco habitual. Revisa saltos de línea, altura del cuerpo y alineación de etiquetas. Conserva el significado al corregir la composición: reducir la letra para ocultar un desbordamiento cambia la lectura sin resolver necesariamente su causa.

Lleva un registro sencillo con contenido, ancho, rol, resultado observado y decisión. Prueba el mismo mensaje en un panel estrecho y en otro amplio. Distingue los problemas de métricas, contenedor y elección de rol. Una etiqueta partida puede necesitar más espacio vertical; un título de tres líneas quizá requiera una redacción más breve. No son la misma corrección ni deberían registrarse como tal.

Añade modos cuando exista una diferencia de contexto documentada. Para Fieldnote puedes proponer un modo compacto con título 20/28 y cuerpo 16/24. Compara ambas recetas en frames con modos elegidos de forma explícita. Es un experimento de diseño: llamar “compacto” a un modo no implementa los breakpoints del navegador ni genera automáticamente el CSS adaptable del producto.

Prepara una prueba independiente de implementación para los ajustes de espaciado. WCAG sobre espaciado del texto exige conservar contenido y funcionalidad ante las modificaciones indicadas por el criterio; no obliga a emplearlas como diseño inicial. Marca los puntos de posible colisión en Figma y comprueba después la interfaz web con las modificaciones aplicadas. Una maqueta limpia no demuestra conformidad.

Comprueba también la ampliación en el navegador. WCAG sobre cambio de tamaño del texto trata la ampliación hasta el 200 % sin pérdida de contenido o funcionalidad, con sus excepciones. Revisa explicaciones, etiquetas y acciones. Separa el resultado de esta prueba del visto bueno visual y conserva el contenido y el ancho que produjeron el fallo si desaparece algún elemento.

Publica una receta tipográfica probada

Publica la receta cuando una segunda persona pueda aplicarla a otra sección y explicar el resultado. Entrégale los tres roles, los valores de ejemplo aprobados, un contenido largo y las reglas de salto de línea. Pídele crear una preferencia de notificaciones sin copiar las capas de texto originales. Así compruebas si el sistema puede entenderse y reutilizarse.

En una copia de trabajo de EmviUI, prueba los roles dentro de una tarjeta o modal que se parezca a la tarea real. Inspecciona los estilos existentes antes de sustituirlos. Asigna título, descripción y etiqueta y repite la prueba de contenido largo. EmviUI aporta un contexto visual útil; el equipo sigue siendo responsable de las decisiones tipográficas, los vínculos y las pruebas de implementación.

Mantén el primer cambio acotado y reversible. Guarda los valores anteriores y una muestra del mismo contenido antes y después. Si cambiar la familia deja estilos ausentes, detén la extensión y resuelve esa dependencia. Evita sustituirla en silencio por otro tratamiento. Compara la muestra corregida con la original para distinguir una nueva jerarquía intencionada de una configuración rota.

Utiliza la guía de fuentes ausentes si el acceso o las versiones bloquean el ejercicio. En el handoff indica rol, valor e interpretación, incluidas las unidades. Un 24 de interlineado en Figma necesita una correspondencia explícita en código. Compartir un nombre no demuestra que las métricas resultantes sean equivalentes en el navegador.

La nota de publicación debe indicar qué cambió, qué roles lo consumen, qué contenidos pasaron las pruebas y quién comprobará la implementación. Conserva una excepción cuando tenga un motivo, por ejemplo una cifra especializada con métricas distintas, y vuelve a revisarlo más adelante. El resultado útil es una receta pequeña que el equipo pueda aplicar, probar y corregir sin depender de la memoria de su autor.

Define una decisión de aceptación: los tres roles se aplican a texto nuevo, los consumidores previstos responden al cambio controlado, el contenido largo permanece disponible y las pruebas web tienen responsables. Si falla alguna condición, conserva la receta en revisión. Una muestra parcialmente correcta sigue aportando evidencia cuando el fallo puede reproducirse. Guarda la cadena problemática y el rol exacto para que la siguiente revisión empiece con una prueba concreta, en lugar de una petición genérica de mejorar la tipografía.

Vuelve a revisar la receta cuando aparezca otro sistema de escritura, un contenido especial o un contexto de producto diferente. Antes de multiplicar modos o duplicar todos los estilos, reproduce el requisito junto a las pruebas existentes. Identifica qué rol no puede expresarlo y decide si la excepción corresponde al contenido, a la composición o a la tipografía. Esa decisión ayuda a mantener comprensible la biblioteca compartida mientras crece la interfaz.