Sync Figma & Github real time
Exploración práctica sobre sincronización de design tokens entre Figma y GitHub. Un ejemplo simple de cómo un problema bien entendido define la solución, el proceso y las herramientas.
En muchos productos sigue existiendo una fricción difícil de eliminar: mantener alineados los tokens entre Figma y Development. Entre ambos, la sincronización suele ser manual, frágil y dependiente de disciplina.
Esta exploración parte de ese pain concreto. No como ejercicio teórico, sino como un problema real que se rompe una y otra vez en equipos de producto. Antes de pensar en herramientas o implementación, el resultado deseado estaba claro: cambiar tokens en Figma y ver ese cambio reflejado en producción sin fricción adicional.
A partir de ahí aparecieron las limitaciones habituales, pero no bloquearon el avance; ayudaron a acotar la solución. Los problemas técnicos se volvieron rápidamente específicos:
Acceso a los tokens en Figma
Sin cuenta Enterprise no hay acceso directo a la API de variables. La alternativa fue trabajar desde un plugin, evitando depender de planes o permisos que no eran parte del problema real.
Incompatibilidad de formatos de color
Figma expone colores en RGBA, mientras que producción trabaja con HSL u OKLCH. La sincronización requería una conversión consistente para evitar drift visual y técnico.
Conexión con GitHub
La autenticación vía OAuth resultó inestable dentro del entorno de Figma. Para garantizar un flujo confiable fue necesario priorizar una conexión simple y predecible.
La solución terminó reduciéndose a un único intermediario: un archivo de tokens en GitHub con el que Figma se comunica directamente y que concentra tanto la conversión de valores como la propagación de los cambios hacia el resto del sistema. Menos superficie, menos puntos de fallo, más control.
Las decisiones técnicas siguieron siempre el mismo criterio: confiabilidad antes que sofisticación. El objetivo no era usar una tecnología particular, sino que el flujo existiera y funcionara de forma predecible.
Takeaway
Incluso en una exploración pequeña y muy concreta como esta, se vuelve evidente lo importante que es:
Definir bien el problema
En lo posible, vivir el problema. Cuando sos parte del pain, la empatía no es un ejercicio: es una condición de partida.Definir la solución desde la expectativa del usuario
Antes de pensar en herramientas o factibilidad es clave entender qué resultado llevaría al usuario a sentir que el problema está realmente resuelto. En este caso, el usuario era yo.Dejar que la solución y el outcome dicten el proceso y la herramienta
No al revés. El proceso y la tecnología aparecen después, como consecuencia de una decisión clara sobre qué se quiere lograr.
Back to Home