Variables frente a estilos en Figma: texto y rellenos

Al comparar variables frente a estilos en Figma, usa variables para decisiones individuales reutilizables y estilos para combinaciones de propiedades que se aplican juntas. Ambos recursos pueden colaborar: un estilo de texto puede utilizar variables en algunas propiedades tipográficas y un estilo de color puede incorporarlas en sus rellenos. Conserva los estilos útiles al introducir variables.

Esta guía ayuda a elegir el vínculo adecuado para una propiedad concreta. Los ejemplos y las pruebas son propuestas de trabajo, no resultados medidos en una migración de clientes. El objetivo es que alguien pueda aplicar un rol de texto, ajustar una decisión compartida y anticipar el resultado sin reconstruir todo el tratamiento visual.

Separar el valor del tratamiento reutilizable

Empieza por lo que necesita cambiar el equipo. Un margen interior o un color de texto representan decisiones pequeñas. Un tratamiento como el título de un artículo reúne varias. Preguntarse qué función es más reciente no resuelve su organización; identificar qué decisiones deben cambiar juntas ofrece un criterio más útil.

La comparación oficial de variables y estilos explica que las variables permiten reutilizar valores y crear alias, mientras que los estilos combinan propiedades. Figma contempla usar ambos. En este ejercicio, considera la variable un ingrediente ajustable y el estilo un tratamiento reutilizable. Es un criterio editorial para repartir responsabilidades, no una clase especial de objeto.

Antes de crear recursos, completa esta frase: «Cambiar esta decisión debería afectar a estos usos». Si no puedes concretarlos, reduce la abstracción propuesta. Que un número aparezca en dos lugares distintos no significa que esos lugares deban depender de una misma variable durante toda la vida del producto.

Crear un rol de texto fácil de aplicar

Trabaja con un ejemplo llamado Título de artículo. Define su función de lectura antes de decidir si alguna propiedad necesita una variable. El primer entregable útil es un tratamiento que el equipo reconozca y pueda aplicar de forma consistente a un título dentro de una pantalla real.

La tabla de propiedades de estilos de texto incluye familia, peso, tamaño, interlineado y espaciado entre letras; excluye relleno, alineación y comportamiento de redimensionado. Por tanto, aplicar un estilo de texto no resuelve el color ni cómo cambia de tamaño su capa. Revisa esas decisiones en el componente o en la pantalla.

En el ejercicio propuesto, empieza con un título de 28 px y un interlineado de 36 px. Son valores de ejemplo, no una norma tipográfica universal. Aplícalos a un título corto, otro de dos líneas y una versión española más larga. Añade signos de puntuación y un fragmento enlazado si el producto los necesita.

Introduce una variable en una propiedad cuando exista un cambio compartido concreto que debas facilitar. Por ejemplo, la familia tipográfica puede depender de una decisión común mientras el rol se conserva como estilo. Mantén un valor fijo cuando no haya una variación útil que gestionar. Vincular absolutamente todo también incrementa el trabajo de revisión.

Vincular variables dentro del estilo de texto

Revisa el vínculo como una relación real, no como una coincidencia de nombres. Un estilo Título de artículo y una variable tamaño-título-artículo no comparten actualizaciones solo por llamarse de forma parecida. Hay que establecer la conexión en la propiedad compatible que corresponda.

La guía para aplicar variables documenta su uso en propiedades de estilos de texto, incluidas variables de cadena para familia o peso y estilo de fuente. Utiliza el selector disponible en el editor actual y comprueba el recurso elegido. Escribir un valor literal idéntico al de una variable no establece la misma dependencia.

Prepara una página de prueba con dos títulos que utilicen el mismo tratamiento. Cambia una decisión vinculada en la copia de trabajo y observa ambas capas. Añade después un pie de imagen que deba permanecer independiente. Solo debería seguir el cambio si has compartido esa decisión de manera intencionada.

Documenta junto al ejemplo la propiedad, la variable, los consumidores esperados y la excepción. Si un consumidor debe comportarse de otra manera, define un rol adecuado o una excepción local explícita. Evita corregir silenciosamente el resultado después de cada cambio de biblioteca. Una captura correcta con un override sin explicar deja un acuerdo de mantenimiento poco claro.

Conservar la composición del relleno

Un tratamiento de color puede contener más que una muestra sólida. Piensa en un panel decorativo con imagen y superposición translúcida, o en un degradado detrás de una ilustración secundaria. Decide si lo reutilizable es una decisión de color o la composición completa que produce ese resultado.

La guía de estilos describe estilos de color que conservan combinaciones de rellenos y dirección del degradado. La documentación de degradados explica cómo vincular variables a sus puntos de color. Esto permite conservar la composición como estilo y vincular los colores individuales que necesiten reutilización independiente.

Para la prueba, prepara dos puntos de degradado con decisiones de color identificadas y conserva el ángulo dentro del tratamiento. Cambia un punto en la copia de trabajo y modifica después el ángulo por separado. Registra qué edición debería afectar a otros usos. No describas una variable de color como si almacenara toda la receta del degradado.

Comprueba también dónde se utilizará el relleno. Un panel decorativo y un fondo con texto requieren revisiones distintas. Evalúa el contenido real sobre el resultado antes de aprobar una muestra aislada. Si la composición no aporta significado ni jerarquía, un tratamiento sólido más sencillo puede facilitar el mantenimiento del producto.

Comprobar el contexto seleccionado

Si un tratamiento vinculado presenta un resultado inesperado, inspecciona primero el contexto donde se resuelve. Crea un frame de comparación pequeño y conserva el mismo contenido para poder seguir la causa del cambio. Deja fuera de esta primera comprobación los ajustes de layout que no estén relacionados.

La documentación de modos explica su aplicación en distintos niveles y su herencia. En este ejercicio, selecciona explícitamente el modo esperado en cada frame de comparación y revisa si las capas hijas tienen otra selección. Llamar Móvil a un modo no equivale a configurar el comportamiento de un breakpoint del navegador.

Haz dos revisiones: primero el valor resuelto y después el tratamiento completo. Un título puede recibir el tamaño esperado y aun así partirse mal por su anchura disponible o su contenido. También puede parecer correcto utilizando una dependencia equivocada. Separar los hallazgos ayuda a corregir la causa en lugar de ocultarla.

Si otra persona encuentra un resultado inesperado, pide que el registro de la incidencia identifique capa, propiedad y contexto. «La tipografía está rota» ofrece pocas pistas. «Título de artículo utiliza la familia alternativa en este frame» permite reproducir el caso. Conserva ese ejemplo mientras se revisa la solución y su alcance.

Revisar el espécimen tipográfico de EmviUI

El espécimen real de EmviUI muestra una escala de Inter con columnas regular, medium, semibold y bold. Sirve para comparar roles visuales y diferencias de peso. La imagen no expone identificadores de estilos, vínculos de variables ni asignaciones de modos, así que no demuestra que una dependencia concreta ya exista.

El catálogo de componentes de EmviUI ofrece referencias de diseño para interfaces en Figma. Combina un componente elegido con un rol de texto de tu biblioteca de trabajo y sustituye los ejemplos por el lenguaje real del producto. EmviUI aporta un punto de partida visual; el equipo debe comprobar y establecer los vínculos en su archivo.

Un caso útil es una sección de ajustes con título, descripción y acción principal. Compara el título con el espécimen y después inspecciona por separado estilo de texto y relleno. Alarga la descripción y la etiqueta del botón. Busca una composición legible cuyas decisiones puedas explicar, en lugar de igualar la referencia mediante excepciones ocultas.

Si todavía estás definiendo el alcance de los recursos compartidos, consulta UI kit frente a sistema de diseño. Para preparar una colección propia, continúa con cómo crear un kit de interfaz. Son pasos posteriores a decidir qué debe controlar cada tratamiento.

Migrar un tratamiento antes de toda la biblioteca

Escoge un rol utilizado con frecuencia y cuyos consumidores puedas inspeccionar. Haz el experimento reversible en una copia y registra su aspecto actual, dependencias previstas y excepciones conocidas. Una migración pequeña y representativa enseña más que crear cientos de variables que todavía no has probado en una pantalla.

Utiliza esta secuencia como una propuesta de aceptación. Se centra en el archivo de diseño y sus consumidores. Evita combinar el primer vínculo experimental con un cambio de nombres general, una nueva escala tipográfica y otra paleta de marca. Si lo cambias todo a la vez, resulta mucho más difícil explicar una diferencia inesperada.

1. Identifica un tratamiento y sus consumidores previstos.
2. Lista las propiedades que deben cambiar juntas.
3. Vincula únicamente las decisiones que necesitan ajustes compartidos.
4. Prueba contenido corto, largo y localizado.
5. Revisa el contexto seleccionado y las excepciones locales.
6. Documenta el resultado antes de ampliar la migración.

Conserva ejemplos anteriores y posteriores con las mismas dimensiones. Pide a otra persona del equipo que aplique el tratamiento sin tus explicaciones verbales. Si no identifica el rol correcto, mejora nombre o descripción antes de extenderlo. Si necesita modificarlo sistemáticamente, revisa el rol en lugar de considerar cada override un error de uso.

Documentar excepciones sin ocultar la regla

Mantén un registro breve de excepciones del tratamiento probado. Anota consumidor, motivo y persona responsable de revisarlo. Por ejemplo, un título promocional puede utilizar otra familia de forma intencionada mientras un encabezado de ajustes mantiene el rol compartido de la interfaz. La diferencia resulta útil cuando es deliberada y se puede descubrir.

Pregunta si la excepción cambia el significado o solamente el aspecto. Un título con otra función puede necesitar su propio rol; uno especialmente largo quizá necesite ajustar el layout. No crees un rol tipográfico cada vez que una capa salta de línea. Reproduce el caso y decide qué responsabilidad debe cambiar.

En la siguiente revisión, comprueba si las excepciones se han convertido en el uso habitual. Si casi todos los consumidores modifican el tratamiento, su definición puede haber dejado de encajar. Conserva un ejemplo representativo y revisa el acuerdo compartido de manera explícita, evitando acumular ajustes locales sin explicación.

Publicar un cambio que se pueda revisar

Termina con una nota que explique qué decisión cambió y dónde conviene comprobar el resultado. Describe el efecto visible, como el ajuste de la familia de un título, además del cambio de vínculo. La nota de mantenimiento debe ayudar a cada consumidor a saber qué inspeccionar dentro de su propio archivo.

La guía de publicación de bibliotecas describe cómo publicar actualizaciones. En este flujo, revisa el cambio propuesto en un archivo consumidor de prueba antes de extender su adopción. Comprueba tanto el ejemplo modificado como un control que deba permanecer igual. Encontrar el recurso en un selector solo inicia la verificación.

Cuando el siguiente paso sea coordinar los valores aprobados con la implementación, consulta la guía del pipeline de tokens. Conserva este registro junto al tratamiento: qué variable controla cada decisión, qué estilo reúne sus propiedades y qué excepciones siguen siendo intencionadas. Esa información concreta facilita la conversación posterior con desarrollo.