Vibe Coding Discoverfigwright
View on GitHubFree, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.
Local MCP server plus Figma plugin that gives coding agents two-way access to the canvas: read a selection into framework-aware code, or write frames, text, auto-layout, styles, variables and components back into Figma. 113 tools, works with Claude Code, Cursor, Codex or any MCP client on the free Figma tier.
Use Cases
Generate framework-aware React components from a Figma selectionBuild or edit Figma frames, text, auto-layout and components from code or a specReuse existing components, design tokens and icons during codegen via component/token/icon mapsDiff a design against a saved baseline to update only affected codeExport Figma assets, screenshots, PDFs and animated frames as MP4/GIF/WebMRun multiple agents across separate open Figma filesInstall agent skills that trigger Figma read/write workflows automatically
Built With
- Language
- TypeScript
- Frameworks
- Model Context Protocol · Vue 3 · Node.js · TypeScript · WebSocket · msgpack · Vitest · pnpm · oxlint
Tags
figma · mcp-server · design-to-code · code-to-figma · bidirectional · figma-plugin · agent-skills · codegen · websocket-relay · local-first · claude-code · cursor · codex · typescript · dev-mode-alternative