conduit.design

Turn any LLM-powered agent into a first-class Figma collaborator. No more clicking through menus or manual adjustments. Just describe what you want, and watch it happen.

Watch the Demo →

Table of Contents (Click to expand)

• Features
• Prerequisites
• Quick Start
  • Step 1: Configure Your MCP Application
  • Step 2: Install and Import the Figma Plugin
  • Step 3: Connect & Create
• Configuration
  • Basic Configuration
  • Environment Variables Reference
  • Windows Configuration
  • Instant AI edit Integration
• Export Capabilities
  • Export Features
  • Export Workflow
• Supported Applications
• Tool API
  • Core Design Tools
  • Utility Tools
• File Sandboxing
  • Security Best Practices
• Privacy & Data Usage
• Auto-Updates
  • Update Process
• Troubleshooting
• Limitations

Features

• Full Figma API access — Batch transform complex designs with simple prompts
• Instant AI editing — Transform complex design hierarchies in seconds
• Code Export — Generate production-ready code from design instantly

Prerequisites

Before installation, ensure you have:

• Figma Desktop App (Free version or Paid, browser version of Figma not supported)
• MCP-compatible application (Cursor, VSCode, AntiGravity, or another MCP-enabled editor.)

Quick Start

Step 1: Configure Your MCP Application

Add to your MCP configuration file (~/.cursor/mcp_settings.json for Cursor, .vscode/mcp.json for VSCode, or platform-specific location for others):

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"]
    }
  }
}

Step 2: Install and Import the Figma Plugin

1. Start your MCP application (e.g., Cursor or VSCode) — this automatically downloads and unpacks the Conduit Figma plugin to ~/.conduit/figma-plugin/
2. Open Figma Desktop → Navigate to Plugins → Development → Import plugin from manifest…
3. Select the manifest file: ~/.conduit/figma-plugin/manifest.json
4. Copy the channel ID displayed in the Conduit plugin UI (e.g., "purple-owl-27")

Step 3: Connect & Create

In your AI assistant (e.g., Cursor chat):

User: Talk to Figma on channel "purple-owl-27"
Agent: ✅ Connected to Figma on channel "purple-owl-27"

User: Create a modern navigation bar with our brand color #3366FF
Agent: ✅ Created navigation bar with brand color #3366FF

You're good to go! The AI can now read, modify, and create Figma designs.

Configuration

[!WARNING]
Security Notice: Conduit requires file system access. Only add trusted directories to ALLOWED_ROOTS. Always back up your projects before granting write permissions.

Basic Configuration

To customize Conduit's behavior, add environment variables to your MCP configuration:

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"],
      "env": {
        "CHANNEL_KEY": "purple-owl-26",
        "PORT": "3055",
        "PROJECT_ROOT": "/Users/John/my-project",
        "ALLOWED_ROOTS": "/Users/John/Desktop/experiments|/Users/John/Downloads/project-xyz"
      }
    }
  }
}

Environment Variables Reference

• CHANNEL_KEY: A permanent channel ID to pair the MCP server with the Figma plugin. If you don't provide one, it will be auto-generated. You can copy the ID from the Conduit plugin UI inside Figma. (Example: "purple-owl-26")
• PORT: The WebSocket port the plugin connects to. (Default: 3055)
• PROJECT_ROOT: The directory where Conduit will store its logs and temporary files. Many MCP hosts default this to your current workspace, but some may require you to set it explicitly. (Example: "/Users/John/my-project")
• ALLOWED_ROOTS: A pipe-delimited (|) list of absolute directory paths where Conduit is allowed to create and overwrite files. Be cautious with broad paths like ~/ or /. (Example: "/Users/John/my-project|/Users/John/experiments")

[!IMPORTANT]

• PROJECT_ROOT does not limit where ALLOWED_ROOTS can point—they are independent.
• Only directories listed in ALLOWED_ROOTS allow file overwrites. All other locations are read-only or create-only.

Windows Configuration

On Windows, use Windows-style paths and PowerShell syntax. Example:

{
  "mcpServers": {
    "conduit": {
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-Command",
        "iwr https://conduit.design/run.ps1 -UseBasicParsing | iex"
      ],
      "env": {
        "PROJECT_ROOT": "C:\\Users\\John\\my-project",
        "ALLOWED_ROOTS": "C:\\Users\\John\\my-project|C:\\Users\\John\\Desktop\\experiments"
      }
    }
  }
}

[!NOTE]
Use double backslashes (\\) in JSON for Windows paths. At runtime, these become standard Windows paths like C:\Users\John\....

Instant AI edit Integration (Optional)

To enable AI-powered instant edits, add your provider API keys and model preferences:

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"],
      "env": {
        "CHANNEL_KEY": "purple-owl-26",
        "PORT": "3055",
        "PROJECT_ROOT": "/Users/John/my-project",
        "ALLOWED_ROOTS": "/Users/John/my-project",
        "AI_DEFAULT_PROVIDER": "openai",
        "AI_DEFAULT_MODEL": "gpt-5-1",
        "OPENAI_API_KEY": "sk-proj-...",
        "AI_TEMPERATURE": "0.7",
        "AI_MAX_TOKENS": "4096"
      }
    }
  }
}

AI Provider Options

Provider	Supported Models	Environment Key
OpenAI	gpt-5-1, gpt-5-1-mini	OPENAI_API_KEY
Anthropic	claude-sonnet-4-5, claude-opus-4-5	ANTHROPIC_API_KEY
Google	gemini-3.0-pro, gemini-3.0-flash	GEMINI_API_KEY

AI-Specific Environment Variables

Variable	Description	Default	Example
AI_DEFAULT_PROVIDER	AI provider to use for instant edits.	None	openai
AI_DEFAULT_MODEL	Model to use for instant edits.	None	gpt-5-1
AI_TEMPERATURE	Creativity/randomness (0.0-1.0).	0.7	0.7
AI_MAX_TOKENS	Maximum tokens for AI responses.	4096	4096

Export Capabilities

Conduit can export production-ready websites from Figma frames using the {page-breakpoint-theme} naming convention:

Export Features

• Responsive Design — Automatic mobile, tablet, and desktop breakpoints
• Theming — Dark and light mode support
• Asset Export — Optimized SVG and image exports
• CSS Tokens — Design system variables extracted automatically
• Complete Files — HTML, CSS, and all assets bundled together
• Google Fonts — Automatic imports and optimization
• Multi-Page — Export entire websites with multiple pages
• Hyperlinks — Navigation and interaction support

Export Workflow

1. Name your Figma frames using the pattern: {page-breakpoint-theme}
   • Example: home-desktop-light, about-mobile-dark
2. Use the export tool via your AI assistant
3. Conduit generates complete HTML/CSS/JSX with all assets

Supported Applications

Other MCP-compatible applications can also use Conduit. Below is a list of tested applications:

Application	Configuration Location	Status
Cursor	~/.cursor/mcp_settings.json	✅ Stable
Google Antigravity	Extension settings	✅ Stable
VSCode	.vscode/mcp.json	✅ Stable

Tool API

Conduit exposes the following tools to LLM agents. Most tools support both single and batch operations.

Core Design Tools

Tool	Description
annotation	Get, set, and delete annotations on Figma nodes.
asset	Get or set images, SVG, and vector assets on nodes.
autolayout	Configure auto layout stacks and grids with spacing, padding, and alignment.
boolean	Perform boolean operations (union, subtract, intersect, exclude) or flatten nodes.
component	Create, manage, and modify components, instances, and component sets.
constraint	Set layout constraints for responsive behavior (left, right, top, bottom, center, scale, stretch).
effect	Apply visual effects like shadows and blurs to nodes.
grid	Create, update, delete, and retrieve layout grids on frames and components.
group	Group or ungroup nodes.
guide	Add, delete, or retrieve ruler guides on pages.
node	Insert, move, clone, rename, and delete nodes with full hierarchy control.
page	Create, delete, rename, duplicate, or navigate between pages.
property	Set node properties like visibility, locked state, and opacity.
shape	Create shapes (rectangle, ellipse, star, polygon, line, frame) with styling.
style	Create, update, remove, and apply fill, stroke, text, and effect styles.
text	Create and style text nodes with typography, alignment, and formatting.
transform	Set position, size, rotation, or apply transformation matrices.
variant	Manage component variants and their properties within component sets.
variable	Create and manage design tokens (colors, numbers, strings, booleans).

Utility Tools

Tool	Description
bulk	Execute multiple MCP commands in sequence with structured results.
compare	Compare JSON data and generate diffs for tracking changes.
describe	Get detailed metadata and documentation for any MCP tool.
info	Retrieve detailed node information in multiple formats with depth control.
join	Connect to a Figma channel (required before other operations).
selection	Get or set the current node selection in Figma.
export	Export Figma frames to production-ready HTML/CSS with responsive breakpoints and themes.
jsx	Get, set, or AI-edit JSX representations of Figma nodes.

File Sandboxing:

"Working directory" is what your AI agent app (Cursor / VSCode) advertises as allowed roots. Please avoid adding low-level directories to config, AIs might in rare cases overwrite files unintentionally. Ensure you backup your project files frequently.

1. Read Access — Conduit can read files from your entire system.
2. Soft-Write Access — Conduit can create new files and folders anywhere on your system but cannot overwrite existing files.
3. Safe-Write Access — Conduit can overwrite existing files only within directories listed in ALLOWED_ROOTS.

Security Best Practices

[!WARNING]
Only add trusted directories to ALLOWED_ROOTS. Avoid broad paths like ~/ or / that grant write access to sensitive system or user files.

• Limit ALLOWED_ROOTS to project-specific directories (e.g., /Users/John/my-project).
• Back up your projects regularly before granting write permissions.
• Review directories in ALLOWED_ROOTS periodically to ensure they're still appropriate.

Privacy & Data Usage

Only data you actively work on is exposed to external services. See below regarding what gets exposed.

1. Conduit is an entirely local application and has no analytics and does not call any external service or server.
2. Conduit uses (Cursor / VSCode) as your daily driver. If you trust them you're good to go. Their EULA applies.
3. Conduit connects to google-gemini, Anthropic, openAI APIs if you use the "instant edit" feature. Their EULA applies.

Auto-Updates

Conduit automatically updates both the MCP server and the Figma plugin when you restart your MCP application or reload your MCP configuration.

Update Process

1. On MCP Restart: Conduit checks for updates to the server binary and Figma plugin.
2. Auto-Download: If updates are available, they are downloaded and applied automatically.
3. Plugin Sync: The Figma plugin is updated in ~/.conduit/figma-plugin/ without requiring manual re-import.

Troubleshooting

Figma Plugin Not Connecting

Issue: The Figma plugin shows "Disconnected" or fails to pair with the MCP server.

Solution:

1. Verify the CHANNEL_KEY in your MCP configuration matches the channel ID shown in the Figma plugin UI. (This step is optional, you can also just give channel_key to the AI when joining)
2. Ensure the PORT is not blocked by a firewall or already in use.
3. Restart both your MCP application and the Figma desktop app.

File Write Errors

Issue: Conduit fails to write or overwrite files.

Solution:

1. Check that the target directory is listed in ALLOWED_ROOTS.
2. Verify the path uses absolute paths (e.g., /Users/John/my-project, not ~/my-project).
3. Ensure you have file system permissions for the target directory.

Plugin Import Issues

Issue: Cannot import the Figma plugin via Plugins → Development → Import plugin from manifest….

Solution:

1. Ensure you're using Figma Desktop — Plugin import is not available in the browser version.
2. Verify the manifest file exists at ~/.conduit/figma-plugin/manifest.json.
3. If the file is missing, restart your MCP application to trigger the auto-download.

AI Instant Edit Not Working

Issue: AI-powered instant edits fail or are unavailable.

Solution:

1. Verify you've added the appropriate API key (e.g., OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY) to your MCP configuration.
2. Check that AI_DEFAULT_PROVIDER and AI_DEFAULT_MODEL are set correctly.
3. Ensure your API key is valid and has sufficient quota.

Limitations

[!NOTE]
Early Access Notice: Conduit is under active development. The following limitations are being actively addressed:

• Instant AI Edit: Batch-mode not yet available (workaround: target parent nodes directly).
• Node Type Coverage: Instant AI Edit supports ~95% of node types; some complex types require turn-by-turn mode.
• Multi-level Styles: Instant AI Edit doesn't support multi-level styles yet; use turn-by-turn mode for these cases.
• Export Formats: Currently limited to HTML, CSS, and JSX. Tailwind, Vue, and other frameworks coming in future releases.
• Bulk Operations: Chaining mixed tool calls in bulk mode is experimental; only select tools currently support this.

---

© 2025 conduit.design - All rights reserved.