figmaOfficial·17 Agent Skills Included

mcp-server-guide

Turn Figma designs into code and build designs with AI

Connects AI coding agents to Figma so they can read designs, generate code, and write directly to the canvas. Builds slide decks, FigJam diagrams, design systems, and project plans without manual clicking in Figma. Converts UI recordings into annotated storyboards and translates animations into production-ready motion code.

1,868|171

↗

npx skills add figma/mcp-server-guide --all -g -y

All Skills in This Repository (17)

Pure Emerald Level Indicators

📦 In Repo

figma

video-interaction-mapper

Extract key moments from video screen recordings and build annotated Figma storyboards.

generate-project-plan

Create FigJam project plan boards from a PRD and codebase context.

figma-use-motion

Animate Figma nodes with keyframing, styles, and timeline durations via the Plugin API.

figma-use-slides

Design slides in Figma using the Plugin API with custom layouts and typography.

figma-generate-design

Build full-page Figma UIs by importing design system components, variables, and styles.

figma-implement-motion

Convert Figma animation data into executable code for web and mobile apps.

figma-generate-diagram

Generate diagrams in FigJam from Mermaid syntax.

figma-create-new-file

Create new Figma design, FigJam, or slides files via the Figma MCP tool.

figma-swiftui

Convert Figma designs to SwiftUI code and SwiftUI views to Figma files.

figma-generate-library

Automate Figma design system creation with variables and component libraries.

figma-use

Execute JavaScript code within Figma files via the Plugin API.

figma-use-figjam

Automate FigJam design operations using Figma's MCP tooling.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install Figma MCP Server Guide?▼

Run `npx skills add figma/mcp-server-guide --all -g -y` in your terminal to install all skills in this suite globally.

How to turn a Figma design into code with AI?▼

Connect your AI agent to the Figma MCP server, paste a Figma frame link, and the agent pulls layout, components, and tokens to generate matching code in your stack.

Can AI create Figma files and designs automatically?▼

Yes. These skills let your agent create new Figma, FigJam, and Slides files, then build screens, diagrams, and design systems using your existing components and tokens.

Does Figma MCP work with Cursor and Claude Code?▼

Yes. It works with Cursor, Claude Code, VS Code, and Gemini CLI through the standard MCP server connection at mcp.figma.com.

Can I convert a screen recording into a Figma storyboard?▼

Yes. The video interaction mapper skill extracts key moments from a UI recording and builds an annotated Figma storyboard with before-and-after states.