SKILL verified MIT Self-run

Figma Mcp

Name: Figma Mcp
Availability: InStock
Author: tommylower

skill-tommylower-cortex-figma-mcp · by tommylower

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: fi…

↗ Repository

— No reviews yet

0 installs

0 views

— view→install

Install

$ agentstack add skill-tommylower-cortex-figma-mcp

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

✓ Prompt-injection patterns
✓ Secret / credential exfiltration
✓ Dangerous shell & filesystem operations
✓ Untrusted network calls
✓ Known-malicious package signatures

What it can access

✓ Network access No
✓ Filesystem access No
✓ Shell / process execution No
✓ Environment & secrets No
✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Figma Mcp? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.

About

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Author: tommylower
Source: tommylower/cortex
License: MIT

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

v0.1.0 Imported from the upstream source.