How do I install Figma Skills?

Install Figma Skills manually from figma/dev-mode-mcp-server-guide, or use MCP Market Hub to sync and share them with your team.

Where can I download Figma Skills from source?

Download Figma Skills from figma/dev-mode-mcp-server-guide.

How do I install these skills?

Download and sync to your agents with MCP Market hub: https://mcpmarket.com/hub. Or install manually from the GitHub repo: https://github.com/figma/mcp-server-guide

What AI agents can use Figma Skills?

Any agent that supports Skill.md can use these skills; see the Agent Skills specification: https://agentskills.io/specification. Compatible agents include Claude, Claude Code, Codex, and OpenCode.

Which products do these skills cover?

Code Connect maps design components to production code so developers see real snippets in Dev Mode.

Can these skills automate this workflow?

You can programmatically create and edit Design files, FigJam boards, and Slide decks.

Can I use these for iOS development?

Yes, specific skills translate between design nodes and native SwiftUI code using system patterns.

How do I verify created animations?

Use the export tool to render video files and sample frames for motion verification.

Official

Figma Agent Skills

Q: Which agents support Figma Skills?

Figma Skills work with agents that support the Agent Skills format, including Claude, Claude Code, Codex, and OpenCode.

Automate UI development and design system management with Figma Agent Skills for AI coding agents.

Install Figma Skills Browse 28 skills

Official Agent Skills published by Figma

What Figma skills help with

Connect design systems directly to production environments. Use these Agent Skills to manage files, extract tokens, and generate UI code for faster implementation.

Sync production code

Generate .figma.ts files to map design components to production implementations.

Translate UI nodes

Convert design nodes into SwiftUI, CSS, or motion.dev animation snippets.

Create workspace files

Initialize Design, FigJam, and Slides files within team workspaces.

Top Figma skills

Official Agent Skills published by Figma.

View all

Figma Code Connect

Automates the creation of Figma Code Connect template files to synchronize design components with production code.

Official

1.7k

Figma File Creator

Automates the creation of new Figma design files, FigJam boards, and Slide decks within your team's workspace.

Official

1.7k

Figma Design to Code

Translates Figma design nodes into production-ready code by extracting design context, tokens, and component mappings.

Official

1.7k

Install Figma SkillsforClaude|

Add Figma Skills to agents that support the Agent Skills format, including Claude, Claude Code, Codex, and OpenCode. Install manually from source, or use MCP Market Hub to sync and share them with your team.

Recommended

Install with MCP Market Hub

Add official skills once, keep them current across your agents, and share the same skill set with your team.

Install

Sync

Install with MCP Market Hub

Source repo

Download from source repo

Prefer manual control? Download the skills from source, then follow the install guide for your agent.

figma/dev-mode-mcp-server-guide

Figma Agent Skill workflows

Real workflows powered by Figma skills.

Convert designs to SwiftUI
Transform high-fidelity frames into functional iOS code using semantic color tokens.
Build design system libraries
Synchronize codebase variables and component definitions into production-grade libraries automatically.
Generate diagrams from Mermaid
Turn Mermaid syntax into editable FigJam flowcharts, sequence diagrams, and architecture maps.