Zapcode — AI Figma to Code Generator, Design & Wireframe Builder | Claude in Figma
Build Figma wireframes & generate production code with AI. MCP-powered, no rate limits, any plan.
Plugin Preview
About this plugin
Design with AI. Build in Figma. Ship production code.Zapcode is the only Figma plugin that gives AI full two-way access to your designs. AI reads your frames and writes new ones — generating wireframes, components, and layouts directly inside Figma. Then converts any design to production-ready code.Website, docs & setup guides: https://zapcode.pages.dev/NEW IN V18: AI NOW BUILDS IN FIGMATell Claude or Cursor to design something — and watch it appear in your Figma canvas in real time.✦ AI creates frames, shapes, text, components✦ AI builds wireframes and full page layouts✦ AI applies styles, colors, and auto-layout✦ AI aligns, groups, duplicates, and organizes layers✦ All via natural language — no code, no manual workHOW IT WORKS1. Install MCP server: https://www.npmjs.com/package/zapcode-figma-mcp2. Run Zapcode plugin in Figma Desktop3. Toggle MCP mode and wait for connection4. Ask Claude/Cursor: "Design a login screen" or "Generate code from this frame"5. AI designs in Figma and/or generates your code — instantlyTWO-WAY AI DESIGN WORKFLOWFigma → AI: Share any frame as full design context (structure, styles, assets)AI → Figma: Let AI create and edit designs directly on your canvasNo other Figma MCP plugin does both.WHY ZAPCODE MCP?NO API RATE LIMITS - Unlimited usage via Plugin API (not REST)COST-EFFECTIVE - Smart tiered coin system. Lightweight tools cost less.WORKS ON ANY PLAN - No Figma paid plan requiredSUPPORTED AI TOOLS (via Model Context Protocol)Claude Code | Cursor | Cline | GitHub CopilotFull MCP installation guide: https://www.npmjs.com/package/zapcode-figma-mcpTECH STACK FLEXIBILITYChoose your output format:• HTML/CSS (Tailwind or Bootstrap)• React• Angular• Vue• FlutterPRIVACY & SECURITY✓ MCP server runs locally (via npx)✓ Data flow: Figma ↔ Local MCP ↔ Your AI tool✓ No external servers. Designs stay on your machine.FREE DAILY CREDITSGet 5 Zapcoins daily. Smart tiered pricing: lightweight AI actions cost less, so your coins go further. Need more? Purchase directly in-plugin.REQUIREMENTS✓ Figma Desktop or Figma Web✓ Node.js 16 or higher✓ MCP-compatible AI tool (Claude, Cursor, etc.)ARCHITECTURE COMPARISONZapcode MCP:• Plugin API — direct canvas access, bidirectional• No Figma REST API rate limits• AI reads AND writes Figma designs• Works on any Figma planOther MCP Servers:• REST API only — read-only context extraction• Rate limits: 6/month (Starter) to 50/min (paid)• Source: https://developers.figma.com/docs/rest-api/rate-limits/QUICK STARTStep 1: Install MCP → https://www.npmjs.com/package/zapcode-figma-mcpStep 2: Plugins → Zapcode → Toggle MCP modeStep 3: Ask AI to design or generate codeEverything you need: https://zapcode.pages.dev/
Plugin Details
| Version | 18 |
|---|---|
| Created | December 28, 2024 |
| Last Updated | March 19, 2026 |
| Category | Software development |
| Creator | ZapCode |
| Stats | 69 installs, 14 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:./ui.html
- main:./code.js
- Document Access:dynamic-page
- Network Access:
ZapCode requires network access to connect with Local MCP server for MCP client integrations, Supabase for authentication and Database, and Stripe for payment processing. Your data is safe and local to your Figma environment.
- Editor Types:figma
- Allowed Domains:
- http://localhost:3000
- http://localhost:3001
- http://localhost:32044
- http://localhost:32896
- http://localhost:32897
- http://localhost:32898
- http://localhost:32899
- http://localhost:40000
- http://localhost:5000
- http://localhost:50000
- http://localhost:5173
- http://localhost:54321
- http://localhost:60000
- http://localhost:61234
- http://localhost:62000
- http://localhost:63000
- http://localhost:8000
- http://localhost:8080
- http://localhost:8888
- http://localhost:9000
- https://bupvbzpykwtudyqjdpsg.supabase.co
- ws://localhost:3000
- ws://localhost:3001
- ws://localhost:32044
- ws://localhost:32896
- ws://localhost:32897
- ws://localhost:32898
- ws://localhost:32899
- ws://localhost:40000
- ws://localhost:5000
- ws://localhost:50000
- ws://localhost:5173
- ws://localhost:54321
- ws://localhost:60000
- ws://localhost:61234
- ws://localhost:62000
- ws://localhost:63000
- ws://localhost:8000
- ws://localhost:8080
- ws://localhost:8888
- ws://localhost:9000
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.