LabscoMCP early access ↗
CristinaForesMCP SERVER

Design Context Bridge

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

by CristinaFores ↗Design Systems & UI Component LibrariesCommunity

LABSCO 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 — npx design-context-bridge

See installation options