Labsco
MCP SERVER

Design Context Bridge

by CristinaFores

Let an AI coding agent read a Figma file properly — exact colours, real spacing, component variants and exportable icons.

Design Systems & UI Component Libraries
Summary
Two ways in, and the URL one needs nothing running.

Plugin mode gives you the live selection, but the REST path is what makes this usable on a file you don't have open — pass a link and `analyze_structure` will come back with suggested routes and a component inventory. `extract_design_system` deriving tokens from the design itself matters more than it sounds, because the Variables API is Enterprise-only and most files don't have Variables anyway.

What it is

An independent server for Figma that gives an agent the file's actual data instead of a screenshot to guess from. It works two ways: a Figma desktop plugin pushes your live selection to a local bridge, or you pass any `figma.com` URL and the server reads it through the Figma REST API. Not affiliated with Figma.

What you get
  • 20 tools. Selection tools are plugin-only; everything else works from a URL over REST
  • Live selection: `get_current_selection`, `get_selected_colors`, `get_selected_texts`, `get_selected_spacing`, `get_selected_interactions` — the last returns real prototype reactions, so hover and disabled states are read rather than invented
  • Navigation: `get_all_pages`, `get_current_page`, `get_frame_by_name`, `get_node_info`, `get_nodes_info`, `scan_nodes_by_types` (capped at 1000 nodes)
  • `extract_design_system` derives colours with usage counts, type scale, spacing scale, radii and shadows — even when the file has no Figma Variables
  • `analyze_structure` returns pages and screens, suggested app routes from screen names, and a component inventory; `get_component_variants` returns every variant's values
  • `find_assets` finds export-worthy nodes with suggested filenames, and `export_image` returns inline SVG source or a render URL for `png` / `jpg`
  • `get_variables` reads local tokens, but its REST mode is Enterprise-only — use `extract_design_system` on other plans
Requirements

Node.js 18 or newer. Run it as `npx -y design-context-bridge` over stdio (npm package `design-context-bridge`, version 1.1.0). For REST mode, generate a Figma personal access token under Settings → Security → Personal access tokens and pass it as `FIGMA_ACCESS_TOKEN`; it is sent only to `api.figma.com` and never written to disk. For plugin mode you need the Figma desktop app — import `figma-plugin/manifest.json` via Plugins → Development → Import plugin from manifest. The local bridge listens on `127.0.0.1:3055` only; `FIGMA_BRIDGE_PORT` changes the server side, but the plugin's port is compiled in and has to be rebuilt to match.

Setup effort

One command plus a key — npx design-context-bridge, then supply credentials