An MCP server that bridges Figma designs with AI development workflows, providing tools for extracting pixel-perfect code and assets.
sunnysideFigma-Context-MCP is worth checking the docs before setup with trust notes worth reviewing. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
gh repo view tercumantanumut/sunnysideFigma-Context-MCP --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
This tool connects Figma design files to AI coding assistants. It lets you extract CSS, React components, and design tokens directly from your Figma layers using natural language. You can use it with a Figma plugin for real-time extraction or via the Figma REST API for headless access.
Sunnyside Figma MCP is a comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs. The server supports two data paths: a plugin bridge that uses Figma's native getCSSAsync() for highest fidelity, and the Figma REST API for headless access. It can generate CSS, React components, Tailwind components, styled-components, and more. The server can be run via stdio, SSE, or Streamable HTTP transports, making it compatible with various MCP clients like Claude Code, Cursor, and GitHub Copilot.
Looks usable, but maintenance, license, or security notes deserve a closer look.
Last commit was about 99 days ago.
37 GitHub stars indicate community interest.
0 open issues signal maintenance load.
NOASSERTION license detected.
Extract pixel-perfect CSS from Figma layers for web development
Generate React components with Tailwind classes from design frames
Automate design-to-code handoff in CI/CD pipelines
Analyze app structure and architecture from Figma projects
Create design tokens and variables for consistent theming
Requires a Figma Personal Access Token which should be kept secret
Plugin bridge sends design data to the local MCP server; ensure network security
REST API access may expose design data if token is compromised
37
Stars
6
Forks
0
Issues
NOASSERTION
License
Extract any website's complete design system with one command.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
An MCP server that bridges Figma designs with AI development workflows, providing tools for extracting pixel-perfect code and assets.
Frontend developers who need to convert Figma designs to code, Design engineers working on design-to-code automation, AI-assisted developers using MCP-compatible coding agents
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
Requires a Figma Personal Access Token which should be kept secret Plugin bridge sends design data to the local MCP server; ensure network security
Similar or complementary options to evaluate include design-extract, uSpec, Argos.
Jun 7, 2026
3 security/trust notes recorded.
Setup difficulty is 3/5.