Figma mcp

Skill tommylower/cortex/design/tools/figma-mcp

Public skill library, workflows, tools, and references for AI-assisted development.

Install

npx -y skills add tommylower/cortex --skill figma-mcp

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Set up and use the official Figma MCP server in Claude Code to read design tokens, components, frame layouts, and variables directly from Figma files, and to generate code from Figma frames. Use when the user wants to connect Figma to Claude, extract colors/typography/spacing from a design, convert a Figma frame to React/Tailwind, sync design tokens, or do any Figma-to-code workflow. Triggers: figma, design tokens, design system sync, figma to code, figma to react, extract from figma, figma mcp, design variables.

SKILL.md

2.3 KB, as published. Nobody here has run it

Figma MCP

Official Figma remote MCP server. Lets Claude Code read design tokens, components, and layout data directly from Figma files.

Setup (Claude Code)

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Use --scope user to make it available across all projects.

After adding, restart CC, type /mcp, select figma, and authenticate via browser.

Usage

Read design tokens from a frame

Copy link to a Figma frame (right click → copy link to selection), then prompt: "Read the design tokens from this Figma frame: [paste link]. Update tailwind.config.ts with these values."

Generate code from a design

Select a frame in Figma, copy the link, then prompt: "Convert this Figma design to a React component: [paste link]"

Extract variables and styles

"Pull the color variables and typography styles from this Figma file: [paste link]"

What It Can Do

Read frame layout, positions, sizes, and structure
Extract design variables (colors, spacing, typography)
Map Figma components to codebase components
Generate code from selected frames
Pull in component and layout data for design system work

Workflow

Design tokens and system in Figma
Copy frame link
Paste into CC with instructions
CC reads Figma data and generates/updates code
Use agentation to fine-tune in browser when annotation feedback is needed.
Use preflight for Cortex-native accessibility and polish review, or rams when the user explicitly asks for Rams.

Notes

Works with Figma remote server — no desktop app required
Link-based: always provide a frame link or selection link
Works best when frames are well-organized with named layers
Pair with a DESIGN_DIRECTION.md or CLAUDE.md fallback for tokens