skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

figma-mcp

Connects Claude Code to the official Figma MCP server to read design tokens and generate code from Figma frames.

2|Updated Apr 15, 2026
Search Tags:#react#claude code#figma#mcp#design tokens#tailwind#figma to code
One-click install
npx skills add https://github.com/tommylower/cortex --skill figma-mcp-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp
Source: https://github.com/tommylower/cortex/tree/main/design/tools/figma-mcp
Command: npx skills add https://github.com/tommylower/cortex --skill figma-mcp-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually translating Figma designs into code is slow and error-prone: developers eyeball colors, spacing, and typography, then hand-write values into config files. This Skill connects Claude Code to the official Figma MCP server so design data flows directly from Figma files into your codebase. ## Core Features & Use Cases - Design Token Extraction: Read colors, typography, spacing, and variables from a Figma frame link and write them into files like tailwind.config.ts. - Figma-to-Code Generation: Convert a selected Figma frame into a React component using live layout, position, and structure data. - Component Mapping: Map Figma components to existing codebase components for design system work. - Use Case: You receive a Figma link for a new landing page section. Paste the frame link into Claude Code, and it reads the design tokens, updates your Tailwind config, and generates a matching React component. ## Quick Start Run "claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp", restart Claude Code, authenticate via /mcp, then paste a Figma frame link and ask Claude to convert it to a React component.

Frequently Asked Questions about figma-mcp

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

FAQPage Schema
How do I set up the Figma MCP server in Claude Code?▼

Run "claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp" to register the official Figma remote server. Restart Claude Code, type /mcp, select figma, and authenticate through the browser.

How to convert a Figma frame to a React component?▼

Copy the link to a Figma frame via right click and copy link to selection, then paste it into Claude Code with a prompt like "Convert this Figma design to a React component: [link]". Claude reads the frame layout and generates the component code.

Does the Figma MCP server require the Figma desktop app?▼

No, the Figma MCP integration uses the official remote server at mcp.figma.com, so no desktop app is required. It works link-based: you provide a frame link or selection link for each request.

Can I extract design tokens from Figma into Tailwind config?▼

Yes, paste a Figma frame link and ask Claude to read the design tokens and update tailwind.config.ts with the extracted values. The server exposes colors, spacing, and typography variables from the file.

Why does Figma MCP give poor results on some frames?▼

Results degrade when frames are disorganized or layers are unnamed, since the server reads structure and layer names to interpret the design. Works best with well-organized frames and named layers.

Related Skills

Explore More Design & Creative Skills→
BangjjackBangjjack

figma-to-component

Convert Figma frames into React and TypeScript components using CVA and Radix patterns.

Official
Intermediate
jayteealaojayteealao

design-polish

Audit designs for alignment, spacing, typography, and interaction consistency.

Community
Advanced
figmafigma
1.9k

create-design-system-rules

Generate project-specific design system rules for Figma-to-code implementations.

Official
Intermediate
openaiopenai
24.7k

figma

Translate Figma designs into project-specific code via the Figma MCP server.

Official
Intermediate