conduit-design

Conduit

Design at the speed of thought

https://github.com/user-attachments/assets/27fb8080-a4f6-46d4-a016-60ba3f0208e8

What is MCP?

Model Context Protocol (MCP) is the framework that allows an AI agent to communicate with external applications. This implementation enables any AI agent to send commands to and receive information from Figma in real-time.

How it works

+------------+     +-----+     +------------------------+     +--------------+
| AI Agent   | <-> | MCP | <-> | Local WebSocket Server | <-> | Figma Plugin |
+------------+     +-----+     +------------------------+     +--------------+

Table of Contents

• Features
• Compatibility
• Prerequisites
• Installation
  • Step 1: Install the server and plugin
  • Step 2: Install the Figma Plugin
  • Step 3: Configure Agent
• Quick Example
• Docs
• Troubleshooting
• Testing
• Contributions
• License
• Authors
• Acknowledgments

Features:

• ✍️ Text manipulation – Add, edit, and style text elements, including advanced controls for font, size, weight, case, decoration, spacing, and paragraph/line height.
• 🎨 Gradient & color support – Create and apply solid colors, gradients, and color variables (design tokens) to any element.
• 🔤 Font support – Access and apply a diverse range of fonts, including bulk font operations.
• 📐 AutoLayout – Automatically create responsive and adaptive layouts, including hug/fill sizing and all Figma auto-layout properties.
• ⚙️ Batch operations – Perform actions on multiple Figma elements simultaneously for efficient workflows.
• 🔷 Geometric shapes – Generate rectangles, circles, ellipses, polygons, lines, and star shapes.
• 🌀 Vector & SVG support – Create, insert, and manipulate vector shapes and SVG graphics.
• 🖼️ Image support – Import, export, and manage raster images within Figma designs.
• 🗂️ Frame, Group, Component – Structure designs with frames, groups, reusable components, and component instances.
• 🧩 Component variants & properties – Create, manage, and organize component variants and their properties.
• 🏷️ Rename layers – Programmatically rename layers, including AI-powered renaming.
• 📄 Page management – Create, duplicate, and set the current page in your Figma document.
• 🔄 Node management – Clone, delete, lock/unlock, show/hide, insert, flatten, reorder, move, and resize nodes.
• ✂️ Boolean operations – Union, subtract, intersect, and exclude shapes for complex vector editing.
• 📏 Grids, guides, and constraints – Create and manage layout grids, guides, and responsive constraints.
• ✨ Effect styles – Create, set, and apply effect styles (drop shadow, blur, etc.).
• 🧬 Figma Variables (Design Tokens) – Create, update, delete, and apply variables for color, number, string, and boolean; switch between variable modes (e.g., light/dark theme).
• 💾 Export & code generation – Export nodes as images (PNG, JPG, SVG, PDF), generate HTML structure, and extract CSS from Figma nodes.
• 📝 Annotation support – Get, set, update, and delete annotations on nodes.
• 🔔 Event subscription – Subscribe and unsubscribe to Figma events (e.g., selection change, document change). This essentially allows turn-by-turn multi-agent collaboration.

Compatibility

• VSCode w/ GitHub Copilot agent (Sonnet 4.0) (50 free Sonnet 3.5 requests per month)
• VSCode w/ Cline (Multiple LLM's available, Gemini has $300 free credits)
• Claude Desktop Application (Sonnet 4.0)
• Cursor agent (Sonnet 4.0 / GPT 4.1 / Gemini 2.5 pro)

Prerequisites

• macOS/Linux:

curl -fsSL https://bun.sh/install | bash

• Windows:

irm bun.sh/install.ps1 | iex

Installation

Step 1: Install the server and plugin

• Clone this repository:

  git clone https://github.com/eonist/conduit.git
  

• Terminal: cd path-to-conduit
• Terminal: npm install -> Builds dependencies
• Terminal: bun run build:all -> Builds the Server and Plugin
• Terminal: bun socket -> Starts the Server

Step 2: Install the Figma Plugin

• Open Figma Desktop App
• Go to Plugins > Development > Import plugin from manifest...
• Navigate to conduit folder and select conduit/src/plugin/manifest.json
• Start Figma plugin: Plugin -> Development -> Conduit

Step 3: Configure Agent

• Open Agent App (GitHub Copilot Agent, Cline, Cursor, Claude desktop)
• Find MCP settings in your agent app of choice. ~/.app-name/mcp.json
• Add a new MCP connection with this config:

{
  "mcpServers": {
    "ConduitMCPServer": {
      "command": "bunx",
      "args": ["conduit-design@latest"]
    }
  }
}

• AI Agent app: Ensure MCP “Conduit” is enabled.
• AI Agent app: "Talk to Figma on channel: (unique channel id copied from plugin)"

Quick Example

User: Talk to figma on channel "xxxxxxx"
Agent: Connecting to Figma. Connected on channel "xxxxxxxx"
User: "Create a responsive navigation bar with our brand color #3366FF and add 5 menu items"
Agent: [executes commands in Figma and displays the results]

Docs:

• Available_MCP_Commands.md
• Server doc
• Plugin doc

Troubleshooting

• Connection Error: Ensure the WebSocket server is running (bun socket).
• Plugin Not Appearing: Verify the plugin import in Figma Development settings.
• Execution or Font Loading Errors: Check Figma’s development console for details.

[!TIP] In VSCode command pallet: > Reload Window this restarts cline and refreshes your MCP servers (To get new updates)

Testing

To run integration tests:

bun run test

See TESTING.md for more details.

[!NOTE] There is also Unit-tests in the /tests/ path

Contributions

• Fork the repository.
• Create a branch (e.g., feature/amazing-feature).
• Commit your changes.
• Push to your branch.
• Open a Pull Request.

See MCP protocol design best pratice: https://gist.github.com/eonist/eb8d5628aad07fc57ce339e518158c20

License

MIT License – see the LICENSE file for details.

Authors

• Sonny Lazuardi – Original implementation | GitHub
• Xúlio Zé – Adaptation for Claude | GitHub
• André J – Adoption for any agent with new features | GitHub

Acknowledgments

• Anthropic team for Claude and the Model Context Protocol.
• Figma community for their excellent plugin API.
• Sonny Lazuardi for the original implementation.
• Bun team for providing a fast JavaScript runtime.