Skills
.Work. You
Rest

figma-mcp-server

Official

Generate code and tokens directly from Figma.

Design & Creative#code generation#figma#mcp#design tokens#ui implementation#code connect#canvas editing
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Connecting design work to implementation is slow when teams manually translate Figma frames into code and styling specs.

Core Features & Use Cases

  • Generate code from Figma frames: Turn selected frames into structured UI code (React + Tailwind by default) so developers can implement faster.
  • Extract design tokens: Pull variables such as colors, spacing, and typography from Figma to keep styling consistent.
  • Use Code Connect mappings: Generate code using your real component implementations instead of generic markup, and optionally write updates back to the canvas (beta).
  • Visual grounding: Retrieve screenshots and metadata to disambiguate truncated or complex designs.

Quick Start

Tell your agent: implement this Figma design using its node URL and generate code that follows your tokens and component mappings.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-mcp-server
Download link: https://github.com/Aradotso/mcp-skills/archive/main.zip#figma-mcp-server

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.