figma-ds-mcp

STDIO MCP server. Gives the LLM a component spec from Figma mapped to design tokens from CSS — colors, typography, spacing, border-radius, layout.

Tools

inspect — full inspection of a component / frame / COMPONENT_SET. Returns the hierarchy with properties, variants, tokens used in the subtree, and Tailwind hints. Params: url, css_path, detail_level (full | structure | tokens_only, default full), max_depth (default 5), include_variants (default true).

compare_tokens — scans a page/frame and compares values against the CSS. Returns exact / close / unmatched with usage counts and the nearest-token suggestion. Params: url, css_path, scope (colors | typography | spacing | all), threshold (RGB delta, default 10).

Every response has the shape { status, data, next_action, recovery, diagnostics }.

Configuration

FIGMA_TOKEN must be set in the MCP server's env — in ~/.claude.json or mcp.json. Not in a shell .env, not in tool arguments.

{
  "mcpServers": {
    "figma-ds": {
      "command": "bun",
      "args": ["run", "/absolute/path/to/figma-ds-mcp/src/index.ts"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "DESIGN_SYSTEM_CSS_PATH": "/absolute/path/to/project/src/index.css"
      }
    }
  }
}

Token: https://www.figma.com/developers/api#access-tokens (scope file_content:read). DESIGN_SYSTEM_CSS_PATH is optional — if unset, css_path must be passed with every call.

Run locally

bun install
bun run src/index.ts     # bun run dev  — with --watch
bun run typecheck        # tsc --noEmit

License

MIT