Skills
.Work. You
Rest

figma-mcp

Community

Bridge design and code with Figma MCP.

Design & Creative#code generation#design system#ui/ux#figma#mcp#diagrams#figjam
AuthorRonnasayd
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the workflow between design and development by enabling direct interaction with Figma and FigJam, automating tasks like design generation, context extraction, and diagram creation.

Core Features & Use Cases

  • Design Generation: Create Figma designs from live web interfaces.
  • Context Extraction: Retrieve design tokens, styles (CSS, React+Tailwind, Vue), and Code Connect mappings from Figma layers.
  • Diagramming: Generate FigJam diagrams from text or Mermaid syntax.
  • Use Case: A developer needs to implement a button component designed in Figma. They can use this skill to extract the exact styling and code representation (e.g., React+Tailwind) of the button from Figma, ensuring pixel-perfect implementation.

Quick Start

Use the figma-mcp skill to get the React+Tailwind CSS for the Figma layer at the provided URL.

Dependency Matrix

Required Modules

None required

Components

references

💻 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
Download link: https://github.com/Ronnasayd/AI-pair-programming/archive/main.zip#figma-mcp

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 223,000+ vetted skills library on demand.