HomeProjectsArticlesPK BoardAbout
Explore Projects

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

Strengths & Limitations

✅ Strengths

  • • Actively maintained, recent updates
  • • High community interest (15.7k stars)
  • • Permissive open-source license (MIT)
  • • Responsive to issues, low backlog

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

TalkToFigma MCP

7.0k · JavaScript
Active A

TalkToFigma is an MCP integration tool that enables AI agents (Cursor, Claude Code) to communicate with Figma for reading designs and modifying them programmatically.

mcpfigmadesign +3
  • · MCP server enabling AI agents (Cursor, Claude Code) to read and programmatically modify Figma designs
  • · WebSocket-based communication between MCP server and Figma plugin
  • · Rich Figma operations: read document info, manage selections, create/modify/delete nodes
View full details → View on GitHub

designlang

3.4k · JavaScript
Normal B

designlang reads the complete design system off any website in one command, emitting DTCG tokens, Tailwind, Figma variables, multi-platform component code, and an MCP server.

design-systemmcpdesign-to-code +2
  • · One-command extraction - point at any URL to read the full design system off the live DOM
  • · Multi-format output - emits DTCG tokens, Tailwind config, shadcn theme, Figma variables, and 17+ files
  • · Responsive and state analysis - parses layout and hover/focus/active states across 4 breakpoints
View on GitHub

21st Magic MCP

5.7k · JavaScript
Active A

21st Magic MCP is a frontend-focused MCP server providing v0-like AI component generation capabilities inside Cursor, WindSurf, Cline, and other IDEs.

mcpfrontendui-generation +2
  • · AI-powered UI component generation from natural language descriptions via MCP protocol
  • · Multi-IDE support for Cursor, Windsurf, VS Code, and VS Code + Cline integrations
  • · Access to a vast library of pre-built, customizable components inspired by 21st.dev designs
View full details → View on GitHub