Connect your Figma designs directly to your AI coding assistant in VS Code! This extension acts as a bridge, allowing AI tools that support the Model Context Protocol (MCP) to access real-time context from your selected Figma frames.
Modern AI coding assistants (like Cline, Cursor, etc.) running in VS Code are powerful, but they lack direct insight into your visual design process happening in Figma. Manually copying descriptions or code snippets is slow and error-prone.
The ZapCode Extension solves this by creating a local connection between the ZapCode Figma Plugin (required companion) and your VS Code environment.
- You select a design element in Figma.
- The companion Figma Plugin prepares the context (structure, styles, assets).
- This VS Code extension receives the context via MCP.
- The extension exposes this context to compatible AI assistants using the standard Model Context Protocol (MCP) via a local HTTP/SSE server.
- Your AI assistant can then request and use this Figma context automatically when generating code, ensuring generated code more accurately reflects your design intent.
- Real-time Connection: Establishes a direct link between the ZapCode Figma Plugin and VS Code.
- MCP Server: Hosts a local SSE MCP server (
http://localhost:3001/zapcode-mcp-sse) discoverable by compatible AI clients. - Figma Context Tool: Provides the
get_figma_contextMCP tool, enabling AI assistants to request data about the currently selected Figma frame(s). - Status Bar Control: Easily activate and deactivate the extension directly from the VS Code status bar.
- Secure & Local: All communication happens locally on your machine; no design data is sent to external ZapCode servers for the MCP functionality.
- VS Code: Version
1.99.0or higher. - ZapCode Figma Plugin: You must install the companion ZapCode Figma Plugin. [Zapcode - Figma Plugin]
- MCP-Compatible AI Assistant: A VS Code extension that can act as an MCP Client over HTTP/SSE. Examples include:
- Cline (Cline MCP Docs)
- Cursor (Cursor MCP Docs)
- Github Copilot New version with agent mode
Follow these steps to get the extension working:
Step 1: Install ZapCode Figma Plugin
- Install the required companion plugin from the Figma Community.
- Installation Link: [Zapcode - Figma Plugin]
Step 2: Install ZapCode VS Code Extension
- Install this extension directly from the VS Code Marketplace.
- Search for "ZapCode" in the VS Code Extensions view (
Ctrl+Shift+XorCmd+Shift+X).
- Search for "ZapCode" in the VS Code Extensions view (
Step 3: Configure Your AI Assistant (Example: Cline)
You need to tell your AI assistant where to find the ZapCode MCP server.
-
Open your AI Assistant's MCP Server settings (Refer to its documentation). For Cline: Go to
Settings (UI)>MCP Serversor edit~/.continue/config.json. -
Add a new "Remote Server" (even though it's local).
-
Configure it with the following details:
- Name:
ZapCode(or similar) - URL:
http://localhost:3001/zapcode-mcp-sse(Ensure the port3001and path/zapcode-mcp-ssematch the extension's defaults. If you encounter port conflicts, this might need adjustment in the future, but stick to the default for now.)
- Name:
-
Save the settings and ensure Cline shows the server as connected after you start the ZapCode in VS Code (Step 5).
Example Cline
config.jsonentry:{ "mcpSources": [ { "title": "ZapCode", "url": "http://localhost:3001/zapcode-mcp-sse" } ] }(Consult your specific AI Assistant's documentation for the exact configuration method.)
Step 4: Configure Figma Plugin (If Needed)
- Open the ZapCode Figma Plugin in Figma.
- Ensure any necessary setup within the plugin itself (like API keys for other ZapCode features, or selecting default tech stacks) is complete. Note: The basic MCP functionality does not require external API keys.
- Start the Extension: Open VS Code. Click the "Start ZapCode" item in the status bar (bottom left/right). The status bar icon should change to indicate it's active.
- Open Figma Plugin: Go to your Figma design file and run the ZapCode Figma Plugin.
- Enable MCP Mode: Inside the ZapCode Figma Plugin UI, find the "MCP Mode" toggle switch and turn it ON.
- Confirm Connection:
- In the Figma Plugin UI, you should see a status indicator next to the toggle change from "Connecting..." to "✓ Connected".
- Use Your AI Assistant: Select a frame or component in Figma. Go back to VS Code and instruct your AI Assistant (e.g., Cline) to perform a task based on the design. For example:
- "Generate a React component based on the current Figma selection."
- "Create HTML and CSS for the selected Figma frame."
- Automatic Context Fetching: The AI Assistant, configured with the ZapCode MCP server, should automatically detect the need for Figma context and call the
get_figma_contexttool provided by this extension behind the scenes. - Code Generation: The AI assistant will receive the context (HTML structure, CSS styles, image data, assets, prompt guidance) and use it to generate more accurate code.
- Stop the Extension: When finished, click the "ZapCode" status bar item in VS Code and select "Stop ZapCode". This closes the local servers. Remember to also toggle MCP Mode OFF in the Figma plugin if you are switching back to using its other features.