Empezar aquí
Requisitos
Qué necesitas para seguir DesignToken101 en Figma y, si quieres seguir el itinerario de código, en tu equipo.
Última revisión:
El curso está pensado para Figma Professional, o para otro plan que permita modos de variables. Para el itinerario de código, además, un entorno de desarrollo web. Revisa esta página antes de empezar para no encontrarte un bloqueo a mitad del curso.
En esta página
Figma
| Qué necesitas | Por qué | Fuente |
|---|---|---|
| Plan Professional, o Education, Organization o Enterprise | Figma permite crear y usar modos de variables (por ejemplo, Light y Dark) en estos planes. El número de modos por colección depende del plan. | Figma: Modes for variables |
| Permiso de edición en el archivo | Para crear variables, colecciones y modos | No aplica |
Aviso
El curso da por hecho que tu plan permite modos de variables, y no ofrece alternativas para otros planes. El plan Starter no está en la lista de planes con modos de la ayuda de Figma.
Nota
Leer variables mediante la API REST de Figma requiere plan Enterprise, según el README del Simple Design System de Figma. En el curso no la usamos: exportamos las variables desde la interfaz de Figma en formato DTCG.
El sistema de tokens de esta web también está en un archivo de Figma que puedes duplicar. Te servirá al final del curso, para comparar tu sistema con el suyo: lo tienes en Archivos de Figma.
Itinerario de código
Si quieres seguir los bloques En código, necesitas:
- Un editor de código, por ejemplo VS Code.
- Node.js instalado. La versión mínima la marca cada herramienta; consúltala en su documentación de instalación.
- Conocimientos básicos de terminal para instalar paquetes.
El proyecto del curso usa Next.js (App Router), TypeScript y Tailwind CSS v4. No necesitas conocerlos para entender los tokens, pero sí para reproducir el proyecto completo.
Estas son las versiones con las que construimos y probamos esta web en octubre de 2026:
| Herramienta | Versión |
|---|---|
| Next.js | 16.3 |
| Tailwind CSS | 4.3 |
Terrazzo (@terrazzo/cli y @terrazzo/plugin-css) | 2.7.1 |
| Node.js | 24 |
Nota
No hemos probado el curso con otras versiones. Si algo no coincide, revisa la documentación de la herramienta.
Conocimientos previos
- Imprescindible: manejo básico de Figma (frames, componentes, estilos).
- Útil: haber aplicado alguna vez un estilo de color o de texto en Figma.
- Opcional: CSS básico, para los bloques En código.
Lo que te llevas
- El curso está pensado para Figma Professional, o para otro plan que permita modos de variables.
- El itinerario de código es opcional y pide un editor, Node.js y algo de terminal.
- Lo imprescindible es manejar Figma con soltura: frames, componentes y estilos.