Zapcode - AI Figma to Code Generator, Design & Wireframe Builder | Claude in Figma
Connect straight from claude.ai or ChatGPT - zero install. AI reads & builds in Figma.
Plugin Preview
About this plugin
Design with AI. Build in Figma. Ship production code. No install required.Zapcode is the only Figma plugin that gives AI full two-way access to your designs - and now you can connect straight from the browser. No npx, no local server, no port config. Add Zapcode as a connector in claude.ai or ChatGPT and start designing and generating code in minutes.Website, docs & setup guides: https://zapcode.pages.dev/NEW IN V19: CONNECT FROM ANYWHEREZero-install remote MCP connector —-works with browser-based AI chat, not just desktop apps.✦ Add Zapcode as a connector directly in claude.ai or ChatGPT — no local install✦ One-click connection key issuance from inside the plugin — no port hunting, no config files✦ Manage, label, and revoke keys anytime from the account page✦ Still works with Claude Desktop, Cursor, Cline, Windsurf, and every MCP-compatible toolHOW IT WORKS1. Open Zapcode in Figma Desktop or Figma Web2. Generate a connection key from the plugin — one click, no setup3. Add Zapcode as a connector in claude.ai, ChatGPT, or your MCP tool of choice4. Ask AI: "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 - and now none require a local server either.WHY ZAPCODE MCP?⚡ NO API RATE LIMITS - Unlimited usage via Plugin API (not REST)🌐 ZERO INSTALL - Connect from claude.ai or ChatGPT in the browser, no local setup🎯 WORKS ON ANY PLAN - No Figma paid plan requiredSUPPORTED AI TOOLSclaude.ai (browser) | ChatGPT (browser) | Claude Desktop | Claude Code | Cursor | Cline | Windsurf | Zed | Continue | GitHub CopilotTECH STACK FLEXIBILITYChoose your output format:• HTML/CSS (Tailwind or Bootstrap)• React• Angular• Vue• FlutterPRIVACY & SECURITY✓ Connection secured by a personal key you generate and can revoke anytime✓ Keys are shown once at creation - never stored in plaintext✓ Data flows only between Figma, Zapcode, and your chosen AI toolFREE DAILY CREDITSGet 10 Zapcoins daily on the Free plan. Need more power or advanced Pro commands? Upgrade to Pro directly in-plugin.REQUIREMENTS✓ Figma Desktop or Figma Web✓ An MCP-compatible AI tool - including claude.ai and ChatGPT in the browser, no install neededQUICK STARTStep 1: Open Zapcode in Figma → generate a connection keyStep 2: Add Zapcode as a connector in claude.ai, ChatGPT, or your AI toolStep 3: Ask AI to design or generate codeEverything you need: https://zapcode.pages.dev/Learn more about MCP: https://modelcontextprotocol.io
Plugin Details
| Version | 20 |
|---|---|
| Created | December 28, 2024 |
| Last Updated | July 23, 2026 |
| Category | Software development |
| Creator | ZapCode |
| Stats | 96 installs, 19 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 to the hosted Zapcode MCP bridge for MCP client integrations, Supabase for authentication and Database, and Stripe for payment processing. Your data is safe and only transits Zapcode's servers as a transient relay to Figma.
- Editor Types:figma
- Allowed Domains:
- https://bupvbzpykwtudyqjdpsg.supabase.co
- https://zapcode-mcp.onrender.com
- wss://bupvbzpykwtudyqjdpsg.supabase.co
- wss://zapcode-mcp.onrender.com
More Like This
Discover other plugins in the Software development category.
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.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code