Diseño → código
El sistema de diseño se entregó al equipo de desarrollo del cliente con componentes, variantes, estados y tokens documentados en Figma. La plataforma llegó a producción y estuvo activa durante seis meses.
- Handoff a desarrollo externo
- Tokens documentados
- Variantes y estados
- Figma como fuente de verdad
- Implementado en producción
La arquitectura de componentes en Figma siguió una estructura de dos niveles. El primer nivel son los foundations: tokens de color (primitivos y semánticos), tipografía (sans-serif para interfaz, monoespaciada para datos numéricos), espaciados y estados base. El segundo nivel son los componentes: cada uno con sus variantes explícitas (tamaño, estado, contexto de uso) y sus anotaciones de comportamiento. Los componentes del configurador recibieron especial atención, cada widget documentado con todos sus estados posibles: disponible, seleccionado, deshabilitado por restricción de plan, deshabilitado por incompatibilidad con otra selección. El objetivo era que el equipo de desarrollo no tuviera que tomar ninguna decisión visual por su cuenta.
El proyecto llegó a producción y estuvo activo durante seis meses. Durante ese tiempo, la implementación reveló casos que el diseño no había anticipado completamente, combinaciones de variables del configurador que en producción generaban estados intermedios no previstos en Figma. Esos casos requerían volver al sistema y añadir variantes adicionales. Es la validación más directa de que un sistema de diseño nunca está terminado, solo está actualizado o desactualizado. La plataforma dejó de operar por razones financieras ajenas al producto, no por problemas de diseño o implementación.
Los tokens siguieron una nomenclatura técnica pensada para que el equipo de desarrollo los consumiera directamente. Tokens primitivos con valores brutos: color-green-500, color-red-400, font-mono-md: y tokens semánticos con significado de uso: color-market-up, color-market-down, font-data-primary. La separación entre primitivos y semánticos permitía cambiar los valores de marca sin afectar a la lógica semántica de los componentes. El equipo de desarrollo podía mapear cada token directamente a una variable CSS sin ambigüedad.
El handoff se realizó íntegramente desde Figma. Cada componente entregado con sus variantes, estados y tokens nombrados con criterio técnico. Las anotaciones de comportamiento cubrían los casos que una captura estática no podía transmitir, especialmente en el configurador, donde las restricciones entre variables requerían documentación explícita de qué estados eran posibles en cada combinación. El objetivo del handoff no era que el developer interpretara el diseño sino que lo implementara sin tener que preguntar.
