mcpskills.net
SkillsMCPsAgentsPrompts
mcpskills.net — A curated directory of AI agent Skills and MCP servers
TermsPrivacy
← Back to MCPs
Design

Figma Context

Bridges Figma designs into AI agents — read layouts, components, and design tokens for design-to-code workflows.

by GLipsRepository →Source →
Installnpx -y figma-developer-mcp --figma-api-key=<YOUR_KEY>

Figma Context MCP is the highest-starred Figma integration (15K+) for AI agents. It extracts design data from Figma files — layouts, components, styles, and tokens — so agents can generate accurate, design-faithful code.

Capabilities

  • Read Figma file structure and layers
  • Extract design tokens (colors, spacing, typography)
  • Get component properties and variants
  • Retrieve layout and positioning data
  • Support for auto-layout and constraint information

Usage

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_KEY>"]
    }
  }
}

Getting a Token

  1. Go to Figma → Settings → Personal Access Tokens
  2. Generate a new token
  3. Use it in the --figma-api-key flag