Back to Plugins
Code to Figma - AI Bridge

Code to Figma - AI Bridge

Turn AI-generated code into Figma designs and extract code from any design

Plugin Preview

Code to Figma - AI Bridge 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

Version11
CreatedApril 28, 2025
Last UpdatedApril 28, 2026
Categorydesign-tools-other
CreatorMohamed Fawzy
Stats1217 installs, 167 likes
PricingFree

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