Design to Code

Official guide to connecting AI coding tools with Figma's MCP server, covering canvas writes, design-context extraction, Code Connect, client setup, rate limits, and reusable workflow skills.

Open-source bridge between AI agents and Figma that reads selections into framework-aware code and writes changes back to the canvas through a local MCP server and Figma plugin.

Fusion 1.0 closes the designer-to-developer gap with context-aware AI code generation from Figma designs plus Slack conversations. Understands your team's existing codebase and patterns to generate production-ready components without the usual handoff friction.

Open-source, AI-native vector design canvas with prompt editing, diffable JSON files, MCP access, and code export for React, SwiftUI, Flutter, and other frameworks.

Figma plugin that turns email designs into responsive, email-safe HTML with mobile and dark-mode overrides. Preview desktop and mobile layouts, then copy HTML or export a package for major email platforms.

Design tool where you generate and edit on a canvas that maps 1:1 to React and Tailwind code, so there is no handoff. Ships an MCP server to connect Cursor, Claude Code, or Codex. Public alpha; free tier available.