El Puente entre Diseño y Desarrollo
La brecha entre diseño y desarrollo es uno de los mayores desafíos en la creación de productos digitales. Diseñadores crean en Figma, desarrolladores replican en código, y rara vez ambos mundos coinciden perfectamente. Los design tokens y variables de Figma están cambiando esta dinámica.
¿Qué son los Design Tokens?
Los design tokens son valores atómicos de diseño como colores, tipografías, espaciados y radios. En lugar de hardcodear valores en tu código, usas tokens que se sincronizan automáticamente con tu diseño en Figma.
Paso 1: Configurar Variables en Figma
En Figma, crea un sistema de variables organizado:
- Colors: Primary, Secondary, Accent, Success, Warning, Error
- Typography: Font families, sizes, weights, line heights
- Spacing: XS, SM, MD, LG, XL, 2XL, 3XL
- Border Radius: None, SM, MD, LG, Full
- Shadows: None, SM, MD, LG, XL
Paso 2: Exportar Tokens con Tokens Studio
Usa el plugin Tokens Studio para Figma para exportar tus variables en formato JSON. Este es el formato estándar que los desarrolladores pueden consumir directamente.
Configuración de Exportación
Configura Tokens Studio para exportar a:
- Style Dictionary (para CSS, SCSS, Less)
- Token Transformer (para Tailwind)
- Custom format (para cualquier framework)
Paso 3: Automatizar la Transformación
Configura un pipeline de CI/CD que transforme automáticamente los tokens cuando cambien en Figma:
Script de Transformación
Crea un script que ejecute Style Dictionary para convertir los tokens JSON en CSS variables:
# Instalar Style Dictionary npm install -g style-dictionary # Configurar el build style-dictionary build --config sd.config.js
Configuración de GitHub Actions
Configura un workflow que se ejecute cuando los tokens cambien:
- Detecta cambios en el archivo tokens.json
- Ejecuta la transformación
- Crea un PR con los cambios actualizados
- Notifica al equipo de diseño
Paso 4: Consumir Tokens en React
Con Tailwind CSS, puedes mapear los tokens directamente a tu configuración:
Configuración de Tailwind
Importa los tokens generados en tu tailwind.config.ts:
import tokens from './tokens.json'; module.exports = { theme: { extend: { colors: tokens.colors, fontSize: tokens.typography.sizes, spacing: tokens.spacing, } } }
Paso 5: Componentes React con Tokens
Crea componentes que usen los tokens de manera declarativa:
Ejemplo: Componente Button
Usa las clases de Tailwind que mapean a tus tokens:
function Button({ variant, size, children }) { return ( ); }
Beneficios de este Pipeline
- Consistencia: Un único origen de verdad para diseño y código
- Eficiencia: Cambios en diseño se reflejan automáticamente en código
- Colaboración: Diseñadores y desarrolladores trabajan con el mismo vocabulario
- Escalabilidad: Fácil mantener consistencia en proyectos grandes
Conclusión
Un pipeline automatizado de Figma a React elimina la fricción entre diseño y desarrollo. Los design tokens son el lenguaje universal que permite a ambos equipos colaborar eficientemente. Con esta configuración, cualquier cambio en el diseño se propaga automáticamente al código, manteniendo siempre la consistencia visual.