$ npm run check
✓ check:tokens Figma ↔ code
✓ check:production 52 / 56 match
✓ check:components 35 components
! check:contrast 30 pairs < AA
Figma, código y producción, comparados entre sí
Llevé el sistema de diseño de Airtm de Figma al código: 35 componentes React, los tokens y seis verificaciones que comparan Figma, el código y lo que la app realmente entrega. Después prototipé con él.
Airtm es una billetera digital en dólares usada en América Latina y otros mercados emergentes para guardar, enviar y recibir dólares en stablecoin, con entradas y salidas locales.
- Rol
- Senior Product Designer. Fue una iniciativa del equipo de diseño, y yo la impulsé: llevar el sistema de Figma al código, correr Storybook y auditar qué coincidía con Figma y qué no. Lo construí con herramientas de IA y revisé cada decisión que registra.
- Colaboradores
- Equipo de diseño, ingenieros web y mobile.
- Norte
- Cualquier diseñador debería poder preguntarle al sistema qué es un color o un componente, y obtener una sola respuesta.
En 30 segundos
- 01 · Problema
- El diseño de Airtm vivía en tres lugares que no coincidían: varias bibliotecas en Figma, la biblioteca de componentes de producción y la memoria de cada diseñador sobre ambas.
- 02 · Decisión
- Hacer del código la referencia de trabajo, y dejar que scripts, y no opiniones, digan dónde Figma y producción se alejan de él.
- 03 · Resultado
- 35 componentes más 6 módulos del kit de prototipos, con Storybook y sitio de documentación, seis verificaciones automáticas, y 52 de 56 colores primitivos coincidiendo con producción en la primera corrida.
El problema
Tres bibliotecas de Figma todavía publicaban su propio Button. Dos frames se llamaban Primitives. El mismo nombre de token se convertía en dos blancos distintos según el archivo. Producción tenía su propia biblioteca, y nadie sabía qué tan lejos estaba de Figma. Cada prototipo empezaba con alguien adivinando.
La restricción
Nada podía detenerse. Figma seguía siendo la herramienta de los diseñadores, producción seguía entregando su propia biblioteca, y nadie tenía tiempo para reescribir todo. Lo que construyera tenía que convivir con ambos, y ser útil desde la primera semana.
Por qué tenía que ser código
Dos motivos. El equipo necesitaba ver el sistema funcionando: Storybook, todos los estados y una auditoría honesta de qué coincidía con Figma. Y yo quería prototipar más rápido, con componentes 100% fieles a los diseños de Figma. Los prototipos hechos con componentes reales generan valor antes, son más fáciles de compartir con stakeholders y mejoran las pruebas con usuarios, porque la gente reacciona al producto y no a un dibujo de él.
El código como referencia
Rehice el sistema en React: primero los tokens, después 35 componentes con sus estados, 6 módulos del kit de prototipos, un Storybook y un sitio de documentación. Los prototipos importan estos componentes en lugar de dibujar imitaciones, así que prototipo y sistema no se separan sin que nadie lo note.
Verificaciones, no opiniones
Seis scripts corren juntos. Comparan los tokens con Figma, los tokens con producción, los componentes con sus fuentes en Figma, la navegación con su taxonomía, y cada par de texto y fondo con el contraste WCAG en los dos temas. Una diferencia se vuelve una línea en un reporte, y no una discusión en una revisión.
Producción como tercera fuente
Cuando llegó la biblioteca de producción, entró como un snapshot y empezó a compararse también. 52 de 56 colores primitivos coincidieron en la primera corrida. Los cuatro que no coincidieron eran hallazgos reales, entre ellos un gris que estaba mal en las foundations impresas desde hacía meses.
Los hallazgos van a personas
Las verificaciones no corrigen nada solas. Cuando código y producción no coinciden, la decisión es del equipo de diseño. Las verificaciones pusieron en cola 14 de esas decisiones, y cada una tiene su registro.
A qué renuncié
A una única fuente de verdad. Siguen siendo tres: Figma para el diseño, el código para la intención, producción para lo que ve el usuario. Dejé de intentar unirlas e hice visibles las diferencias. El costo es mantenimiento: alguien tiene que mantener los snapshots al día.
Resultado
- Construido
- 35 componentes y 6 módulos del kit de prototipos, Storybook, sitio de documentación y un inventario de los 156 módulos de la biblioteca de producción, en una sola página.
- Encontrado
- 30 pares de color por debajo de WCAG AA, los dos blancos detrás de una inconsistencia antigua, y nombres de componentes publicados dos veces en Figma.
- Usado
- Mis prototipos y handoffs en Airtm salieron de él, de mayo a septiembre de 2026. Producción mantuvo su propia biblioteca; las verificaciones miden la distancia.
Qué haría después
Correr las verificaciones en CI con cada cambio del sistema de diseño, y llevar los 30 pares de contraste a triage con el equipo. Esa lista es el trabajo de accesibilidad más directo que le queda al sistema.