FigmaExporterMcp

FigmaExporterMcp is a local bridge that lets Codex and other MCP clients inspect, export, and modify Figma files through a development Figma plugin.

Architecture

Codex / MCP client <--stdio--> MCP Server <--WebSocket :3066--> Figma Plugin
                                  ^
                                  |
                     other Codex sessions proxy by HTTP

The first MCP server process owns the embedded relay on port 3066. Additional Codex sessions start normally, detect the occupied port, and proxy commands to the relay owner. This allows multiple Codex sessions to share one Figma plugin connection without port conflicts.

Related MCP server: figma-opencode-mcp

Local Paths

• Repository: D:\LongWorkspace\FigmaExporterMcp

• MCP entry: dist/server.js

• Server source: src/server.ts

• Plugin manifest: figma-plugin/manifest.json

• Plugin code: figma-plugin/code.js

• Plugin UI: figma-plugin/ui.html

Install and Build

cd D:\LongWorkspace\FigmaExporterMcp
npm install
npm run build

Codex Global MCP Config

Add this to C:\Users\chenlong\.codex\config.toml and restart Codex:

[mcp_servers.figma_exporter_mcp]
command = 'node'
args = ['D:\LongWorkspace\FigmaExporterMcp\dist\server.js']
startup_timeout_sec = 120

[mcp_servers.figma_exporter_mcp.env]
FIGMA_EXPORTER_RELAY_PORT = '3066'
FIGMA_EXPORTER_EXPORT_DIR = 'D:\LongWorkspace\FigmaExporterMcp\exports'

Install the Figma Plugin

1. Open Figma.

2. Go to Plugins -> Development -> Import plugin from manifest.

3. Select D:\LongWorkspace\FigmaExporterMcp\figma-plugin\manifest.json.

4. Run the plugin in the Figma file you want Codex to access.

5. The plugin auto-connects to ws://localhost:3066.

Multi-Session Usage

• Use get_connected_files to list connected Figma files.

• Use set_active_file with a file name or channel keyword before mutating a design.

• Active file selection is scoped per Codex session, so sessions do not overwrite each other's active target.

• If a session logs Proxy mode, it is forwarding commands to the process that owns port 3066; this is expected.

Development Notes

• Modify src/server.ts for MCP tools, relay endpoints, proxy mode, and session routing.

• Modify figma-plugin/code.js for Figma Plugin API command implementations.

• Modify figma-plugin/ui.html for connection UI, reconnect behavior, and WebSocket messaging.

• Run npm run build after server changes and commit the regenerated dist/ files.

• Keep node_modules/, exports/, logs, and copilot_temp/ out of git.

Environment Variables