Cómo crear grupos de variables en Figma sin cambiar valores

Abre Variables locales, elige una colección, selecciona las filas que quieres organizar y usa Nuevo grupo con selección. También puedes usar barras en el nombre: text/default coloca default en el grupo text. Agrupa para que sea más fácil encontrar una variable; usa un modo cuando esa misma variable deba tomar otro valor según el contexto. Si la biblioteca ya está en uso, prueba los nombres nuevos en un archivo que la utilice antes de pedir al equipo que acepte la actualización.

Elige entre grupo, colección y modo

Empieza por la pregunta que alguien se hace al editar una capa. «¿Qué color corresponde al texto normal?» es una cuestión de búsqueda: reúne los colores de texto para que se encuentren juntos. «¿Qué valor tiene el texto normal en un marco oscuro?» es una cuestión de modo. En este ejemplo, text/default pertenece a la colección Colors y tiene un valor en Light y otro en Dark. No hace falta duplicar la variable con un nombre como text/dark/default.

La guía de gestión de variables de Figma describe cómo funcionan los grupos dentro de una colección. Su guía sobre modos explica para qué sirven las columnas de valores. Si el texto y las superficies comparten los mismos contextos claro y oscuro, pueden convivir en una colección para este ejercicio. Si otro conjunto de variables necesita alternar de forma independiente, por ejemplo entre espaciado compacto y amplio, plantéate una colección aparte.

Imagina una pantalla de ajustes con tres colores: texto normal, borde del campo y fondo de la página. Anota primero qué propiedad usa cada uno. Puede que el borde y el texto tengan el mismo gris en el primer diseño. Dales funciones separadas si el sistema debe permitir que cambien por separado. En cambio, dos etiquetas que siempre siguen la misma regla pueden compartir el color de texto. El grupo ayuda a encontrar decisiones reutilizables; no tiene por qué copiar los nombres de las capas de un diseño concreto.

Si acabas de recibir una biblioteca que no conoces, haz un inventario pequeño antes de reorganizarla. Apunta la colección, el nombre completo, el tipo, el alias si lo hay, los valores por modo y un uso real de cada variable candidata. Así puedes distinguir dos variables llamadas border que pertenecen a colecciones distintas. La guía sobre tokens en diseño web explica cómo separar una decisión reutilizable de un valor circunstancial.

Agrupa filas existentes en Figma

Abre el archivo de origen y entra en el modal desde Variables locales. Con la colección adecuada seleccionada, marca dos o tres filas que cumplan la misma función. Usa Command o Control para seleccionar filas sueltas y Mayús para seleccionar un intervalo. Haz clic derecho sobre la selección y elige Nuevo grupo con selección. Ponle un nombre como text. Figma permite arrastrar los grupos en la barra lateral para reordenarlos o anidarlos y hacer doble clic en su nombre para renombrarlos.

Pruébalo con default y muted en una colección Colors de práctica. Una vez creado el grupo, compara los nombres y los valores de los dos modos con tu inventario. En esta pasada deja las celdas de color tal como estaban. Pon un título y un mensaje de ayuda en la pantalla de ajustes y comprueba a qué variable está vinculada cada capa. El objetivo es conservar el aspecto de la pantalla y facilitar la búsqueda de los colores.

Al seleccionar un intervalo es fácil incluir una fila intermedia sin querer. Revisa la selección antes de crear el grupo. Si se cuela field-border en text, corrige la organización y vuelve a comprobar el campo. Si el grupo entero no tiene sentido, usa Desagrupar en su menú. Figma también ofrece Duplicar grupo y Eliminar grupo; son operaciones distintas. Evita crear o eliminar definiciones en una pasada dedicada a ordenar.

Pide a alguien que no haya hecho la reorganización que aplique el color de texto normal a una etiqueta y el de menor énfasis a un mensaje de ayuda. Observa si puede distinguirlos sin conocer los grises. Si busca «ayuda», añade una descripción breve que indique dónde se usa muted. Así puedes mantener corto el nombre y reservar la explicación para la descripción.

Crea rutas que expliquen el uso

Al nombrar una variable, pon una barra donde quieras marcar un límite entre grupos. surface/page es una ruta corta. Una como border/field/default tiene sentido si aparecen varios bordes de campo que conviene encontrar juntos. La documentación de Figma sobre nombres y descripciones explica cómo agrupar con barras y añadir una descripción. Acordad una convención en el archivo de origen antes de extenderla a toda la colección.

Deja para el último tramo la distinción que importa al aplicar la variable. text/default y text/muted hablan del énfasis. Una pareja como text/gray-700 y text/gray-500 obliga a deducir qué color corresponde a cada caso y puede quedar desfasada cuando cambien los valores. Una paleta base sí puede usar nombres como gray/700: la persona que mantiene la paleta necesita saber qué valor ajusta, mientras que quien diseña el campo necesita saber qué borde aplicar.

Prepara una tabla corta con los cambios. En el archivo de práctica, pasa de copy-default a text/default, de copy-secondary a text/muted y de input-stroke a border/field/default. Explica el motivo de cada cambio. Antes de aplicarlo, busca la ruta de destino en la colección. Si ya existe, conserva las dos definiciones hasta comprobar si de verdad tienen valores y usos equivalentes. Fusionarlas exige otra decisión.

La referencia de Figma para desarrolladores distingue los nombres e identificadores de las variables de los modos de su colección. Una herramienta que lea el nombre completo puede detectar un cambio aunque la pantalla tenga el mismo aspecto. Localiza los scripts, documentos de entrega y transformaciones de tokens que dependan de la ruta. Pon la antigua junto a la nueva para que quien mantiene esa salida pueda comprobarla. La guía para pasar variables de Figma a Tailwind muestra un ejemplo de esa correspondencia.

Comprueba la capa en los dos modos

Aplica los colores propuestos de texto, fondo y borde a tres capas de la pantalla de ajustes. Crea un marco en Light y otro en Dark para la misma colección. Usa el mismo diseño en ambos. Inspecciona qué variable corresponde a cada capa y qué valor debe tomar en ese modo. Que coincida el color visible solo aporta evidencia después de comprobar el vínculo: un relleno fijo puede coincidir por casualidad en uno de los modos.

Introduce un fallo deliberado en la copia de práctica. Sustituye el relleno del texto de ayuda por un color fijo igual al de Light. Cambia a Dark y observa la diferencia. Después vuelve a vincular la variable y repite la prueba. Es una forma de mostrar al equipo la diferencia entre ver un nombre y tener una conexión que cambia el valor. Si interviene un alias, comprueba tanto su destino como el nombre de la variable. Renombrarla no demuestra que el alias apunte al origen previsto.

Si una capa muestra un estilo en lugar de la variable esperada, revisa el estilo y la propiedad que controla antes de sustituirlo. El vínculo puede estar dentro del estilo. La guía sobre variables y estilos en Figma explica cómo seguir esa relación. En el registro de revisión anota si cada capa usa un vínculo directo o un estilo, de modo que otra persona pueda repetir la prueba sin adivinar qué miraste.

Termina comparando los nombres de antes y después. Escribe el cambio con palabras claras: «Tres colores pasan a los grupos de texto y borde; los valores de los modos siguen igual». Si encuentras una diferencia inesperada, aísla su causa en el archivo de práctica. Las correcciones de paleta, contraste o alias que surjan al revisar merecen una propuesta aparte. Así, si luego cambia el aspecto de una pantalla, será más fácil saber por qué.

Verifica un archivo que use la biblioteca

Si compartís variables entre archivos, reserva uno con capas e instancias representativas. Comprueba su estado antes de publicar la actualización. Cuando la persona responsable publique el cambio, sigue el proceso de revisión y aceptación de actualizaciones en ese archivo. La guía de publicación de bibliotecas explica por qué un cambio en el archivo de origen todavía no está disponible como actualización para los demás.

Haz dos pruebas pequeñas. Primero inspecciona un título o un campo que ya existía y verifica que sigue utilizando la variable esperada después de aceptar la actualización. Luego vincula una capa nueva desde el selector sin buscar el nombre antiguo. La primera prueba puede pasar aunque a nadie le resulte fácil encontrar el color para un diseño nuevo. Si la biblioteca usa Light y Dark, comprueba otra vez los dos modos. Anota el archivo, las rutas y cualquier diferencia observada.

Si el proceso de código depende de los nombres, compara la salida anterior con la nueva junto a la persona responsable. Una eliminación inesperada en la comparación merece revisar la correspondencia antes de seguir. Si el archivo siempre ha sido local, repite las comprobaciones con una segunda página o un marco representativo. Solo necesitas los pasos entre archivos cuando otros documentos usan la biblioteca compartida.

Antes de extender el cambio, escribe dos comprobaciones en la nota: «Encuentra el color del texto en su grupo nuevo» y «Abre la muestra existente en cada modo compatible». Si quien revisa solo dispone de una captura, comparte también la capa de origen o un archivo que use la biblioteca. La imagen puede revelar un cambio visual, pero no dice si la capa está vinculada a la variable adecuada. Conserva la ruta anterior hasta comprobar la última dependencia que la utilice.

En la prueba piloto, anota el resultado por capa en vez de dar por revisado todo el archivo. Puede que el encabezado conserve su vínculo y que el texto de ayuda siga usando un relleno fijo. Una nota con el nombre de la capa permite saber qué corregir. Repite la prueba tras el arreglo y guarda esa muestra para la próxima reorganización.

Revisa el selector con EmviUI

El kit de Figma de EmviUI ofrece un punto de partida editable con componentes reutilizables y variables de diseño. Usa una muestra editable a la que tengas acceso, por ejemplo un campo junto a un encabezado. Pide a alguien que encuentre el color del texto y el del borde antes de comparar el resultado en los dos modos. La captura de EmviUI muestra un selector de colores de biblioteca con nombres y muestras. Sirve para hablar de búsqueda; para agrupar filas, sigue la documentación actual de Figma.

Deja la convención propuesta junto a la muestra en la página de revisión. Después comprueba qué recursos exponen el kit y tu archivo. Las rutas de esta guía pertenecen al ejercicio y no describen los nombres de EmviUI. El kit aporta un diseño donde comprobar las decisiones; el equipo decide cómo llamar a los colores, quién mantiene la colección y cómo se revisan los archivos que la usan. El resultado será útil cuando otra persona encuentre la misma variable al actualizar una capa existente y al crear una nueva.