English | 简体中文
Transform Figma designs into LLM-friendly HTML/CSS, empowering non-technical users to achieve high-fidelity design implementation with AI assistance.
Figma Bridge is a Figma-to-code conversion tool designed specifically for AI-assisted development. It parses Figma designs into clean, semantic HTML/CSS that is highly optimized for Large Language Models (LLMs), enabling AI to accurately understand design intent and assist in achieving high-fidelity implementation.
Key Features:
- LLM-Friendly Code Structure: Generates semantic, well-structured HTML/CSS that AI can easily understand and process
- Live HTML/CSS Preview: Real-time rendering with visual debugging overlays for instant validation
- Precise Design Information Extraction: Fully preserves layout, colors, fonts, spacing, and other design details
- Smart Font Handling: Automatic font matching with Google Fonts integration
- AI cannot accurately understand Figma design intent, only sees screenshots
- Manual annotation, measurement, and asset export required
- AI cannot achieve pixel-perfect restoration, losing many details, requiring repeated dialogue adjustments
- Non-technical users need to read code for further modifications
- Figma Bridge automatically exports LLM-friendly, structured, semantic HTML/CSS
- AI precisely understands every Figma design detail (layout, colors, fonts, spacing)
- AI directly generates production-ready code with pixel-perfect high-fidelity design restoration
- Designers can modify designs directly in Figma, AI fetches updated design data from Figma Bridge, reducing requirement description costs
# Clone the repository
git clone https://github.com/kingkongshot/Figma-Bridge.git
cd Figma-Bridge
# Install dependencies
npm install# Start the development server
npm run devThe server will start at http://localhost:7788. Open this URL in your browser to access the preview interface.
- Open a canvas in Figma
- Right-click on a blank area
- Select plugins → development → import plugin from manifest
- Select the manifest.json file from the project root directory to complete the import
- Then select Brige from the same menu to open the plugin
- Click on any component to see the preview in your browser
The generated HTML/CSS files are automatically saved to the output/ directory in real-time. You can open output/index.html in your browser to view the exported result.
Figma-Bridge/
├── packages/bridge-pipeline/ # Standalone conversion pipeline package
├── src/ # Server-side code and CLI tools
├── public/ # Browser preview interface
├── code.js # Figma plugin logic
├── ui.html # Figma plugin UI
├── debug/ # Debug output (when BRIDGE_DEBUG=1)
├── output/ # Generated HTML/CSS
└── docs/ # Architecture documentation
MIT License - see LICENSE file for details.
Created by link
Contributions are welcome! Feel free to open issues or submit pull requests.