Code to Figma - AI Bridge
Turn AI-generated code into Figma designs and extract code from any design
Plugin Preview
About this plugin
🎨 Design Anything You Prompt — Directly in FigmaTurn AI-generated code into real Figma designs, and extract code from any design — all in one plugin.✨ Code → DesignPrompt your design in any AI tool — ChatGPT, Claude, or GeminiCopy the generated Figma plugin codePaste it into the plugin and hit RunYour design renders instantly on the canvas🔄 Design → CodeSelect any elements in FigmaGenerate clean, structured code from your designImages auto-upload via Catbox (with ImgBB fallback)Feed the output to any LLM to convert into React, SwiftUI, Flutter, HTML/CSS, or any stack📦 Library ExtractionAnalyze and extract your document's component library — map component keys, variants, and properties for seamless AI-powered workflows.🛠️ Works in Dev ModeDevelopers get full Design → Code access with image uploads — right from Figma's Dev Mode.🚀 Whether you're wireframing fast ideas, prototyping at speed, or handing off to developers, this plugin bridges the gap between code and canvas.No setup. No signups. No limits. Completely free.
Plugin Details
| Version | 11 |
|---|---|
| Created | April 28, 2025 |
| Last Updated | April 28, 2026 |
| Category | design-tools-other |
| Creator | Mohamed Fawzy |
| Stats | 1217 installs, 167 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
Design-to-code uploads images to Catbox first (direct, then CORS proxy bridge for runtime compatibility) with optional ImgBB fallback, and must allow Figma-hosted resources.
- Editor Types:figma
- Allowed Domains:
- https://api.imgbb.com
- https://catbox.moe
- https://corsproxy.io
- https://files.catbox.moe
- https://i.ibb.co
- https://www.figma.com
More Like This
Discover other plugins in the design-tools-other category.