I wanted to control Figma from my terminal. Not just read pixels — actually create frames, push tokens, and build components without ever opening the Figma UI.
Most people treat design and code as two separate worlds. Designers hand off mockups. Developers interpret them. Things get lost in translation. I wanted to kill that gap entirely.
Here's the system I built with Claude Code and MCP.
1. Figma-Code Bridge — the infrastructure
The foundation is a bidirectional connection between Figma Desktop and Claude Code, running in real time:
- Figma Plugin (
figma-plugin/code.js) — lives inside Figma, receives and executes commands - WebSocket Broker (
mcp-bridge/) — intermediary running onlocalhost:18765 - 2 MCPs working together:
figma-desktophandles read-only operations (screenshots, metadata) whilefigma-bridgehandles read/write (create, modify, delete nodes)
The result: I can create frames, text layers, rectangles, variables, and full components directly in a Figma file — from the terminal. No mouse, no manual placement, no context switching.
2. Design System Pipeline — tokens to code to Figma
Design tokens are the glue. One source of truth that flows everywhere:
figma-tokens.json → sync-figma.js → tokens.css → components.css → showcase.html
- figma-tokens.json — the single source of truth (colors, typography, spacing, radii)
- tokens.css — auto-generated CSS custom properties
- components.css — components styled with those tokens
- showcase.html — visual demo of every component in the system
The same tokens get pushed to Figma as variables (set_variable) and used to build visual components (build_component). Change a color in the JSON, and it updates everywhere — CSS, components, and Figma. No manual syncing.
3. Playbook Framework — from idea to mockup in 13 phases
This is what ties it all together. A reusable framework that takes any product idea from concept to Hi-Fi mockup:
- Phases 0–4: Setup, Business Case, Users, Value Proposition, MVP Scope
- Phases 5–8: User Flows, IA/Sitemap, States, Content
- Phases 9–12: Lo-Fi Wireframes, Visual Direction, Design System, Hi-Fi Mockup
Phases 0–8 are pure markdown — strategy, product thinking, user research. No design tool needed. Phases 9–12 integrate the Figma bridge and Pencil MCP for visual design.
The whole thing lives in playbook/template/ as reusable templates. init-project.sh spins up a new project from the template. One command, full project structure.
4. Ylisto — the first real project
I didn't build this system as a proof of concept. I used it to design a real product: Ylisto, a mobile cleaning services app for iOS and Android.
All 13 phases, start to finish:
- 3 personas (Maria, Roberto, Carmen), 10 Jobs-to-be-Done, complete user flows, sitemap
- 16 screens (S01–S16) designed as Hi-Fi mockups in Figma
- Custom design system — cyan/orange palette, Inter typeface, complete token set
- UX diagrams in Figma (personas, flows, sitemap, transitions, motivations, decisions)
- HTML showcases for visual review outside Figma
What this actually means
| What | Why |
|---|---|
| Figma-Code Bridge | Control Figma from the terminal via MCP |
| 13-phase Playbook | Reusable framework: any product from idea to mockup |
| Ylisto | Real app with design system, 16 Hi-Fi screens, full UX docs |
Claude Code runs with 2 Figma MCPs. It has direct access to the Figma file and the filesystem — it can design, generate code, and document, all from one place.
This is what closing the design-to-code gap actually looks like. Not a philosophy. A pipeline.
And this pipeline is what makes everything else possible — the workflow shift, the evolution. It all starts with the tooling.