Recursos
Archivos de Figma
El sistema de tokens de esta web en un archivo de Figma Community: qué contiene, cuándo usarlo en el curso, cómo duplicarlo, qué plan necesitas y con qué licencia se publica.
Última revisión:
El sistema de tokens de DesignToken101 está publicado en Figma Community. Es el mismo que usa esta web: las variables, los estilos de texto, los componentes y las plantillas. Esta página explica qué contiene, cuándo te conviene abrirlo y cómo hacer tu copia.
En esta página
- El sistema de referencia
- Cuándo usarlo
- Cómo hacer tu copia
- Qué plan necesitas
- Licencia
- Lo que te llevas
El sistema de referencia
DesignToken101: Reference system, versión 1.0.0, publicada en octubre de 2026.
| Página | Qué tiene |
|---|---|
| Read me | Qué es el archivo, su versión, lo que no está en Figma y por qué, y las licencias |
| Naming convention | Las reglas para nombrar los tokens y el mismo nombre en Figma, DTCG y CSS |
| Primitives | Las escalas de color, espaciado, radio, grosor de borde y tipografía |
| Semantics | Los colores por función en Light y Dark, los tamaños y los tamaños de texto por modo |
| Text styles | Los 10 estilos de texto, en Desktop y Mobile |
| Components | Los componentes de la web, cada uno con una descripción de sus props y su anatomía |
| Templates | Una lección en Desktop y Mobile, en Light y Dark, con el menú móvil abierto |
Las variables están en cuatro colecciones: Primitives, Semantic color (con los modos Light y Dark), Semantic size y Layout (con los modos Desktop y Mobile). Cada una tiene sus scopes y su code syntax, y cada semántico, su descripción, como se explica en el curso.
Algunos tokens del sistema no están en el archivo porque viven solo en código, como el interlineado o el movimiento. El Read me los lista con el motivo de cada uno, y en el curso los ves en Los tokens de código.
Cuándo usarlo
Recomendación
Abre el archivo cuando termines el ejercicio final, no antes. El curso te enseña a tomar cada decisión con tu propio diseño. Si copias estos valores antes, te saltas esas decisiones y te quedas con un sistema que no es el tuyo.
Con tu sistema cerrado, compáralo con este: la estructura de las colecciones, los nombres, las descripciones, los scopes y el code syntax. Los valores serán distintos, porque salen de tu diseño; la estructura, el método y la convención deberían coincidir.
Cómo hacer tu copia
- Abre la página del archivo en Figma Community.
- Pulsa Open in Figma. Figma crea una copia del archivo en tu cuenta.
- Abre el panel de variables para ver las colecciones y sus modos.
Tu copia es un archivo nuevo e independiente: los cambios del archivo original no llegan a ella. Cuando se publique una versión nueva, tendrás que volver a duplicarlo (Figma: Duplicate or copy files). La versión de tu copia está en su Read me.
Qué plan necesitas
El archivo está pensado para Figma Professional, como el curso (Requisitos). Las colecciones Semantic color y Layout tienen dos modos cada una, y el número de modos por colección depende del plan (Figma: Modes for variables).
También necesitas las fuentes Inter y JetBrains Mono, las dos con licencia SIL Open Font License 1.1.
Licencia
Figma publica los archivos gratuitos de Community con la licencia Creative Commons Attribution 4.0 (CC BY 4.0): puedes copiar el archivo, adaptarlo y usarlo, también con fines comerciales, siempre que cites al autor (Figma: Community copyright and licensing).
Los iconos son de Lucide, con licencia ISC, y algunos derivan de Feather, con licencia MIT. El Read me incluye el texto completo de las dos licencias.
Lo que te llevas
- El sistema de tokens de esta web está en Figma Community, en la versión 1.0.0, con sus variables, estilos de texto, componentes y plantillas.
- Ábrelo al terminar el ejercicio final, para comparar tu sistema con este, no para copiar sus valores.
- Tu copia no se actualiza sola, y el archivo está pensado para Figma Professional y se publica con licencia CC BY 4.0.