skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

sunnyside-figma-context-mcp

Extract Figma design data as JSON for AI development workflows.

3|Updated May 16, 2026
Search Tags:#figma#mcp#design tokens#tailwind#ui extraction#token migration#react component generation
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill sunnyside-figma-context-mcp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sunnyside-figma-context-mcp
Source: https://github.com/Aradotso/design-skills/tree/main/skills/sunnyside-figma-context-mcp
Command: npx skills add https://github.com/Aradotso/design-skills --skill sunnyside-figma-context-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about sunnyside-figma-context-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens and CSS from Figma for my codebase?▼

To extract design tokens and CSS from Figma, this Skill uses an MCP toolchain that pulls layout-aware data including fills, strokes, variables, and per-layer CSS. It retrieves comprehensive structural JSON through either a plugin-bridge or headless REST API retrieval.

Can I generate React components with Tailwind directly from a Figma frame?▼

Yes, you can generate React components from Figma frames. The extraction process produces ready-to-use React components and includes Tailwind or styled-components variants based on the pixel-precise data extracted from your selected Figma layers.

What is the best way to simulate design token changes and analyze blast radius?▼

Simulating design token changes and analyzing blast radius is handled by the token safety checks feature. It simulates impacts, applies changes, and generates migration code to reduce breakages during system-wide refactors.

Does Figma extraction require an API key or plugin to access team files?▼

Figma extraction requires either a plugin-bridge for Drafts or a FIGMA_API_KEY for headless REST API retrieval. The headless path supports file/node data retrieval and batch asset exports when plugin fidelity is unavailable.

How do I audit design token coverage and find orphaned tokens in Figma?▼

Auditing design token coverage involves running the token health auditing tools. This reports coverage, conflicts, and orphaned tokens while providing recommendations to support system-wide refactors and maintain token lifecycle safety.

Related Skills

Explore More Software Engineering Skills→
KuassKuass
1

figma

Fetch Figma layout, style, and component data and download SVG and PNG assets.

Community
Intermediate
hasnahasna

shadcn-svelte

Provide 36 Tailwind CSS-styled shadcn-svelte components for json-render catalogs.

Official
Intermediate
TheGreatLTheGreatL

web-component-design

Create reusable UI components with React, Vue, and Svelte.

Community
Advanced
oakossoakoss
14

figma-developer

Extract design tokens, icons, and components from Figma via REST API.

Official
Advanced