Figma Codex Bridge

English | 简体中文

Select in Figma. Build with Codex.

Give Codex the Figma frame you are looking at as bounded structure, design tokens, component context, and an optional PNG screenshot.

No Figma API token. Local authenticated bridge. Read-only tools.

Built for Codex and tested with Codex App and CLI. The server uses the Model Context Protocol and may work with other stdio MCP clients.

Why it is different

The flagship figma_get_design_context tool builds a Design Context Pack with a bounded node tree, colors, spacing, radii, typography, components, variables, styles, asset candidates, CSS variable suggestions, and an optional screenshot.

Related MCP server: opencode-figma-for-actually-codex

60-second setup

Requirements: Figma Desktop, Node.js 20 or later, and Codex App or CLI. Figma Web alone cannot run the development plugin.

git clone https://github.com/xiaobai59/figma-codex-bridge.git
cd figma-codex-bridge
npm run setup

The setup command creates a private .figma-codex-bridge/ directory containing:

• codex.toml: an MCP configuration with the absolute server path and a random local bridge token

• plugin/manifest.json: a generated Figma development plugin using the same token

Then:

1. Merge .figma-codex-bridge/codex.toml into your Codex configuration.

2. In Figma Desktop, choose Plugins > Development > Import plugin from manifest... and select .figma-codex-bridge/plugin/manifest.json.

3. Restart or reload Codex MCP servers.

4. Run Figma Codex Bridge from Figma's Development plugins.

5. Ask Codex to call figma_status.

The generated directory contains a local credential and is ignored by Git. Rotate it at any time:

npm run setup -- --rotate-token

Use a custom port with:

npm run setup -- --port 39555

Codex CLI alternative

After npm run setup, the equivalent CLI form is:

codex mcp add figma-codex-bridge \
  --env FIGMA_LOCAL_MCP_PORT=38455 \
  --env FIGMA_LOCAL_MCP_TOKEN=<generated-token> \
  -- node /absolute/path/to/figma-codex-bridge/server.mjs

Use the token and path generated in .figma-codex-bridge/codex.toml; do not paste a token into an issue or commit it.

Use it

Read my current Figma selection with figma_get_design_context. Extract the
layout, component hierarchy, typography, colors, spacing and reusable design
tokens, then implement the screen in this repository. Include a screenshot for
visual validation.

Recommended flow:

figma_status
  -> figma_get_design_context
  -> implement
  -> figma_get_screenshot for focused visual comparison

If nothing is selected, use figma_get_page_structure to find the relevant top-level frame first.

Tools

Tree tools support depth, maxChildren, and maxNodes. Screenshot exports are limited by scale, pixel count, and response size. Node IDs accept both Figma's 2:131 form and the link form 2-131.

See a trimmed Design Context Pack example and the complete tool reference.

Privacy and security

• The server listens only on 127.0.0.1.

• The generated plugin and MCP process share a random bridge token.

• Browser origins are restricted; wildcard CORS is not used.

• Tools are read-only and cannot edit the Figma canvas.

• Figma files and screenshots are not intentionally persisted by the bridge.

• Responses use node, text, body, screenshot, and concurrency limits.

MCP responses can still contain names, copy, layout values, and images from the active file. That content may be processed by the MCP client and model provider you configured. Read the privacy guide before using private or regulated designs.

This independent open-source project is not affiliated with Figma or OpenAI.

Architecture

flowchart LR
  A[Codex or stdio MCP client] -->|MCP| B[Node bridge]
  B -->|Authenticated localhost HTTP| C[Figma Desktop plugin]
  C -->|Read-only Plugin API| D[Active file and selection]

One process owns the loopback bridge; additional Codex conversations forward through that owner, allowing them to share one open Figma plugin instance. See architecture details.

Current scope

• Tested client: Codex App and Codex CLI

• Platform requirement: Figma Desktop development plugin

• Tool surface: read-only

• Distribution: GitHub source release; npm publishing is intentionally disabled

Roadmap

• Component and variable alias resolution

• Exportable asset metadata and code-generation recipes

• Figma-to-local-implementation visual comparison

• Installer packages and verified compatibility guides for more MCP clients

• Optional write tools only with scoped permissions and explicit confirmation

Development

npm test
npm run check
npm run doctor

Loopback integration tests run in GitHub Actions. See CONTRIBUTING.md, SECURITY.md, and troubleshooting.

License

MIT