Nombrar
Un nombre en Figma, DTCG y CSS
Cómo se transforma un mismo nombre de token al pasar de Figma a DTCG y a CSS, qué caracteres admite cada uno, qué errores deja pasar Figma y qué hacer con los nombres largos.
Última revisión:
Un nombre de token no vive en un único sitio. Nace como variable en Figma, viaja en un archivo DTCG y termina como variable CSS. Cada uno tiene sus reglas, y un nombre tiene que cumplir las tres a la vez. En esta lección verás cómo cambia el nombre en cada paso y qué restricciones impone cada formato.
En esta página
- Un nombre, tres formas
- La barra no se puede deshacer
- Los caracteres que admite cada formato
- Mayúsculas y minúsculas
- Lo que Figma deja pasar
- Los nombres largos
- Lo que te llevas
Un nombre, tres formas
Este es el recorrido del color de los enlaces de DesignToken101, desde la variable de Figma hasta la variable CSS que usa la web:
- Variable de Figma, color/text/accent/default
- Grupos en el archivo DTCG, color › text › accent › default
- Referencia en DTCG, {color.text.accent.default}
- Variable CSS, --t101-color-text-accent-default
- Figma. Los niveles se separan con
/, y cada/crea un grupo en la vista Variables (Figma: Create and manage variables). - Grupos en DTCG. Al exportar, cada nivel es un objeto anidado dentro del anterior. El último,
default, es el token: el objeto que tiene$value. - Referencia en DTCG. Cuando otro token apunta a este, los niveles se unen con puntos dentro de llaves (Format Module: Aliases / References).
- CSS. Los niveles se unen con guiones y se añade el prefijo
--t101-, el espacio de nombres de DesignToken101. El code syntax Web de la variable de Figma guarda ese nombre (Una sola fuente de verdad). Por qué hace falta el prefijo lo verás en el módulo De Figma al código.
La barra no se puede deshacer
En Figma y en DTCG, los niveles están separados: sabes dónde acaba uno y empieza el siguiente. En CSS, no. Los niveles y las palabras compuestas se unen con el mismo guion:
| Figma | CSS |
|---|---|
color/text/on-accent | --t101-color-text-on-accent |
size/content/max-width | --t101-size-content-max-width |
Leyendo --t101-color-text-on-accent, no puedes saber si on-accent es un nivel o dos. La conversión funciona en un sentido, de Figma a CSS, pero no en el contrario.
Recomendación
Trata el nombre de Figma como el original y el de CSS como una traducción. Por eso cada variable de DesignToken101 lleva su code syntax escrito, en vez de deducirlo del CSS. Y por eso la regla 1 pide guiones dentro de un nivel y nunca otro separador: un _ o una mayúscula en medio de un nivel darían en CSS un nombre distinto del esperado.
Los caracteres que admite cada formato
| Carácter | DTCG | Figma (API de plugins) | CSS |
|---|---|---|---|
. | Prohibido | Rechazado | Escapado |
{ y } | Prohibidos | Rechazados | Escapados |
$ al principio de un nivel | Prohibido | Rechazado | Escapado |
| Espacio | Permitido | Aceptado | Escapado |
/ | Permitido, pero no separa grupos: los grupos son objetos anidados | Separa los niveles | Escapado; DesignToken101 lo convierte en - |
Letras, números, - y _ | Permitidos | Aceptados | Permitidos |
De dónde sale cada columna:
- DTCG prohíbe
{,}y.en cualquier parte de un nombre, y que un nombre empiece por$. Son los caracteres de las referencias y de las propiedades reservadas, como$value(Format Module: Character restrictions). - Figma. Las páginas de ayuda que hemos consultado no dicen qué caracteres admite. Lo comprobamos el 2026-10-04 con la API de plugins: rechaza
.,{,}y cualquier nivel que empiece por$("invalid variable name"), y acepta espacios, mayúsculas, guiones y guiones bajos. - CSS. El nombre de una variable CSS empieza por
--y sigue las reglas de los identificadores (MDN: Custom properties). Un identificador admite letras, números,-y_; cualquier otro carácter tiene que ir escapado con una barra invertida (MDN: custom-ident).
Los tres formatos coinciden en lo que admiten sin problemas: letras, números y guiones. Es lo que permite la convención de DesignToken101.
Mayúsculas y minúsculas
DTCG distingue mayúsculas de minúsculas: Color y color son dos tokens distintos. La especificación lo permite, pero avisa de que las herramientas pueden mostrar advertencias, porque esos nombres dan problemas al exportarse a otros lenguajes (Format Module: Name and value). En CSS ocurre lo mismo: --my-color y --My-color son variables distintas (MDN: Custom properties).
Si un nombre pasa a un formato o a un lenguaje que no distingue mayúsculas, dos tokens que se diferenciaban por ellas chocan. Con todo en minúsculas (regla 1), ese problema no existe.
Lo que Figma deja pasar
Figma no comprueba tu convención. En la prueba del 2026-10-04 con la API de plugins, aceptó sin ningún error dos cosas que causan problemas fuera de Figma:
- Un token que también es grupo:
…/accent/defaulty…/accent/default/hoveren la misma colección. En DTCG, esa estructura no es válida (Format Module: Group structure). Lo viste en Estados en el nombre. - Mayúsculas y espacios. En CSS, un espacio tiene que ir escapado, y una mayúscula da otro nombre de variable.
Lo que Figma sí impide es repetir un nombre dentro de una colección: al intentarlo con la API, da el error "duplicate variable name". Al importar un archivo DTCG, Figma convierte los puntos en barras y, si dos nombres coinciden, importa el primero e ignora el resto (Figma: Modes for variables).
Los nombres largos
Propiedad primero da nombres largos. El más largo de DesignToken101 es color/background/accent/strong/default, con 38 caracteres. En un texto ocupa mucho: en esta web, a 320 px de ancho, no cabe en una línea, y la web lo parte para que no aparezca scroll horizontal (WCAG 2.2, Understanding 1.4.10 Reflow).
Un nombre largo no se arregla abreviando: bg en vez de background ahorra caracteres y pierde claridad (La convención de DesignToken101). Se arregla con la regla 3: escribir los niveles necesarios y ninguno más. Si un nombre te parece largo, revisa si algún nivel no distingue nada.
Lo que te llevas
- El mismo nombre se escribe con
/en Figma, con grupos y puntos en DTCG y con guiones en CSS, y la conversión no se puede deshacer. - Los tres formatos admiten sin problemas letras, números y guiones, en minúsculas.
- Figma acepta errores que DTCG no admite, como un token que también es grupo: la convención tiene que evitarlos.
Fuentes
- Design Tokens Format Module 2025.10: Character restrictions
- Design Tokens Format Module 2025.10: Name and value
- Design Tokens Format Module 2025.10: Group structure
- Design Tokens Format Module 2025.10: Aliases / References
- Figma: Create and manage variables and collections
- Figma: Modes for variables
- MDN: Custom properties (--*)
- MDN: custom-ident
- Understanding 1.4.10 Reflow