Queria controlar Figma desde mi terminal. No solo leer pixeles — crear frames, pushear tokens y construir componentes sin abrir la interfaz de Figma.
La mayoria trata diseno y codigo como dos mundos separados. Los disenadores entregan mockups. Los desarrolladores los interpretan. Las cosas se pierden en la traduccion. Yo queria matar esa brecha por completo.
Este es el sistema que arme con Claude Code y MCP.
1. Figma-Code Bridge — la infraestructura
La base es una conexion bidireccional entre Figma Desktop y Claude Code, corriendo en tiempo real:
- Plugin de Figma (
figma-plugin/code.js) — vive dentro de Figma, recibe y ejecuta comandos - Broker WebSocket (
mcp-bridge/) — intermediario corriendo enlocalhost:18765 - 2 MCPs trabajando juntos:
figma-desktopmaneja operaciones de solo lectura (screenshots, metadata) mientrasfigma-bridgemaneja lectura/escritura (crear, modificar, borrar nodos)
El resultado: puedo crear frames, textos, rectangulos, variables y componentes completos directamente en un archivo de Figma — desde la terminal. Sin mouse, sin posicionamiento manual, sin cambiar de contexto.
2. Design System Pipeline — tokens a codigo a Figma
Los design tokens son el pegamento. Una unica fuente de verdad que fluye a todos lados:
figma-tokens.json → sync-figma.js → tokens.css → components.css → showcase.html
- figma-tokens.json — la unica fuente de verdad (colores, tipografia, spacing, radii)
- tokens.css — CSS custom properties auto-generadas
- components.css — componentes estilizados con esos tokens
- showcase.html — demo visual de cada componente del sistema
Los mismos tokens se pushean a Figma como variables (set_variable) y se usan para buildear componentes visuales (build_component). Cambias un color en el JSON y se actualiza en todos lados — CSS, componentes y Figma. Sin sincronizacion manual.
3. Playbook Framework — de idea a mockup en 13 fases
Esto es lo que une todo. Un framework reutilizable que lleva cualquier idea de producto desde concepto hasta mockup Hi-Fi:
- Fases 0–4: Setup, Caso de Negocio, Usuarios, Propuesta de Valor, Alcance MVP
- Fases 5–8: Flujos de Usuario, AI/Sitemap, Estados, Contenido
- Fases 9–12: Wireframes Lo-Fi, Direccion Visual, Design System, Mockup Hi-Fi
Fases 0–8 son markdown puro — estrategia, producto, research de usuarios. No necesitas herramienta de diseno. Fases 9–12 integran el Figma bridge y Pencil MCP para diseno visual.
Todo vive en playbook/template/ como plantillas reutilizables. init-project.sh levanta un proyecto nuevo desde la plantilla. Un comando, estructura completa.
4. Ylisto — el primer proyecto real
No construi este sistema como prueba de concepto. Lo use para disenar un producto real: Ylisto, una app movil de servicios de limpieza para iOS y Android.
Las 13 fases, de inicio a fin:
- 3 personas (Maria, Roberto, Carmen), 10 Jobs-to-be-Done, flujos completos, sitemap
- 16 pantallas (S01–S16) disenadas como mockups Hi-Fi en Figma
- Design system propio — paleta cyan/orange, tipografia Inter, set completo de tokens
- Diagramas UX en Figma (personas, flows, sitemap, transiciones, motivaciones, decisiones)
- HTML de showcase para revision visual fuera de Figma
Que significa esto realmente
| Que | Para que |
|---|---|
| Bridge Figma-Code | Controlar Figma desde la terminal via MCP |
| Playbook de 13 fases | Framework reutilizable: cualquier producto de idea a mockup |
| Ylisto | App real con design system, 16 pantallas Hi-Fi, documentacion UX completa |
Claude Code corre con 2 MCPs de Figma. Tiene acceso directo al archivo de Figma y al filesystem — puede disenar, generar codigo y documentar, todo desde un solo lugar.
Esto es lo que realmente significa cerrar la brecha entre diseno y codigo. No una filosofia. Un pipeline.
Y este pipeline es lo que hace posible todo lo demas — el cambio de workflow, la evolucion. Todo empieza con las herramientas.