Figma Context MCP

Active
GitHub TypeScript MIT

Description

MCP server that provides Figma layout information to AI coding agents like Cursor, enabling precise design-to-code conversion.

Key Features

  • MCP server that connects AI coding agents to Figma design files
  • Extracts only relevant layout and styling metadata, reducing context noise
  • One-shot design-to-code conversion in Cursor and other AI IDEs
  • Works with Figma files, frames, and groups via simple paste links
  • Cross-platform support for macOS, Linux, and Windows
  • MIT licensed with active community on Discord

Use Cases

πŸ’‘ Implementing Figma designs directly in code using AI agents
πŸ’‘ Frontend developers converting mockups to production UI
πŸ’‘ Design-to-code workflows in Cursor IDE
πŸ’‘ Reducing manual inspection of Figma specs during development
πŸ’‘ Teams streamlining handoff between designers and developers

Tags

mcp figma design-to-code typescript cursor

Categories

πŸ”Œ MCP Tools

Quick Start

1. Create a Figma personal access token from Figma settings.
2. Add the MCP server config to your IDE's configuration file (e.g. Cursor's mcpServers).
3. Paste a Figma file/frame link into your IDE chat.
4. Ask the AI agent to implement the design β€” it will fetch metadata and write code.
Visit GitHub

Related Projects