What problem it solves

AI assistants need structured access to design-system data and controls in Figma to extract tokens, inspect components, create designs, and debug design-to-code differences. Teams also need deterministic checks for accessibility, design-code parity, and design-system health without imposing a specific framework or house style.

Key features

• Design system extraction and token sync — Extract variables, components, and styles, then export or synchronize token data between Figma and code-side formats.

  Source: README

• Design creation and variable management — Create components, frames, layouts, and variant sets directly in Figma, and manage design tokens through dedicated tools.

  Source: README

• Accessibility and parity checks — Run design accessibility checks, compare Figma components with their code, and produce scored design-system health audits.

  Source: README

• Debugging and version awareness — Capture screenshots, inspect console logs and selections, compare version snapshots, and trace when properties or variants were introduced.

  Source: README

• Multiple connection modes — Connect through a desktop bridge, cloud pairing for web AI clients, remote read-only exploration, or a local source checkout.

  Source: README

Quick start

Copied verbatim from the project's README.

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Check Figma status

Who it may suit

This may suit designers, frontend teams, and developers who use AI assistants to inspect or modify Figma design systems. It may also suit contributors who want to work with the TypeScript server source and its automated tests.

Topics to discuss

• Which design-system extraction and token-synchronization workflows should be discussed first?

• How should deterministic accessibility and design-code parity checks shape AI-assisted development?

• Which Figma creation, debugging, and collaboration capabilities need better community examples?

Written by ReadmeX AI from the project's README, source and public GitHub data; it may contain mistakes.

Read the original README https://github.com/southleft/figma-console-mcp#readme

ReadmeX opened this community for a trending project; it is not run by the project. Maintainers can claim it from the community page.