sunnyside-figma-context-mcp

What problem does it solve?

This Skill removes the guesswork and manual copy-paste needed to translate Figma designs into implementable code, tokens, and component structures for AI-driven development.

Core Features & Use Cases

• Figma → Structured JSON extraction: Pulls comprehensive, layout-aware data including fills, strokes, variables, design tokens, and per-layer CSS through an MCP toolchain.
• Generate React components from selected frames: Produces ready-to-use React components as well as Tailwind or styled-components variants based on extracted selection.
• Design token lifecycle and safety checks: Simulates token changes, analyzes impact/“blast radius”, applies changes, and generates migration code to reduce breakages.
• Token coverage and health auditing: Reports coverage, conflicts, orphaned tokens, and recommendations to support system-wide refactors.
• Headless extraction paths: Uses Figma REST API for file/node data retrieval and batch asset exports when plugin fidelity is not available.

Quick Start

Start the MCP server locally by following the repository install steps, then ask your agent to extract design tokens from a selected Figma frame using the MCP tool interface.