How do I install the Figma Official Skills skill?

Run npx skillmds add podo/figma-official-skills in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Official Skills safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Official Skills?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Official Skills free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Official Skills?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Official Skills by podo — Agent Skill

Name: Figma Official Skills
Rating: 4.2 (5 reviews)
Author: podo

Figma Official Skills

7 official Figma skills for design-to-code and code-to-design workflows. Covers Figma Plugin API scripting, design implementation, library generation, Code Connect component mapping, and design system rules creation.

podo 7170523 2 files · 2.9 KB Updated Sep 9, 2026

File contents

figma-official-skills

Catalogue stub — full package: figma/skills

Decision tree

Run this before any Figma ↔ code workflow:

Is a Figma skill already installed? Check: ~/.design-agent-skills/skills/figma-use/SKILL.md exists (representative skill).
- Yes → invoke the specific Figma skill by name and proceed
- No → go to step 2
Do you have shell access?
- Yes → install the specific skill below, then invoke it
- No → show the install command; in Claude Code, send it as a chat message starting with ! — add -g for global install or omit for project-only

Install command

Install individual skills (recommended — install only what you need):

# Figma Plugin API scripting
npx skills add figma/figma-use

# Figma to production code with 1:1 fidelity
npx skills add figma/figma-implement-design

# Build/update Figma screens from code or description
npx skills add figma/figma-generate-design

# Build design system library in Figma from codebase
npx skills add figma/figma-generate-library

# Connect Figma components to code
npx skills add figma/figma-code-connect-components

# Generate project-specific design system rules
npx skills add figma/figma-create-design-system-rules

# Create a blank Figma/FigJam file
npx skills add figma/figma-create-new-file

Invoke after install

Skill	Invoke with
`figma-use`	"run Figma Plugin API", "Figma script"
`figma-implement-design`	"implement this Figma design", "Figma to code"
`figma-generate-design`	"generate Figma design", "code to Figma"
`figma-generate-library`	"build Figma library", "design system in Figma"
`figma-code-connect-components`	"code connect", "link Figma to code"
`figma-create-design-system-rules`	"Figma design system rules"
`figma-create-new-file`	"create Figma file", "new FigJam"

What it does

Official Figma skill suite covering the complete design ↔ code bridge. Converts Figma designs to production code with 1:1 fidelity, generates or updates Figma screens from code changes, builds design system libraries, connects Figma components to code components via Code Connect, and scripts the Figma Plugin API for custom automation.

---name: figma-official-skillsdescription: 7 official Figma skills for design-to-code and code-to-design workflows. Covers Figma Plugin API scripting, design implementation, library generation, Code Connect component mapping, and design system rules creation.--- # figma-official-skills > Catalogue stub — full package: [figma/skills](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) ## Decision tree Run this before any Figma ↔ code workflow: 1. **Is a Figma skill already installed?** Check: `~/.design-agent-skills/skills/figma-use/SKILL.md` exists (representative skill). - Yes → invoke the specific Figma skill by name and proceed - No → go to step 2 2. **Do you have shell access?** - Yes → install the specific skill below, then invoke it - No → show the install command; in Claude Code, send it as a chat message starting with `!` — add `-g` for global install or omit for project-only ## Install command Install individual skills (recommended — install only what you need): ```bash # Figma Plugin API scripting npx skills add figma/figma-use # Figma to production code with 1:1 fidelity npx skills add figma/figma-implement-design # Build/update Figma screens from code or description npx skills add figma/figma-generate-design # Build design system library in Figma from codebase npx skills add figma/figma-generate-library # Connect Figma components to code npx skills add figma/figma-code-connect-components # Generate project-specific design system rules npx skills add figma/figma-create-design-system-rules # Create a blank Figma/FigJam file npx skills add figma/figma-create-new-file ``` ## Invoke after install | Skill | Invoke with | |-------|-------------| | `figma-use` | "run Figma Plugin API", "Figma script" | | `figma-implement-design` | "implement this Figma design", "Figma to code" | | `figma-generate-design` | "generate Figma design", "code to Figma" | | `figma-generate-library` | "build Figma library", "design system in Figma" | | `figma-code-connect-components` | "code connect", "link Figma to code" | | `figma-create-design-system-rules` | "Figma design system rules" | | `figma-create-new-file` | "create Figma file", "new FigJam" | ## What it does Official Figma skill suite covering the complete design ↔ code bridge. Converts Figma designs to production code with 1:1 fidelity, generates or updates Figma screens from code changes, builds design system libraries, connects Figma components to code components via Code Connect, and scripts the Figma Plugin API for custom automation.

Frequently asked questions