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.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

---
name: figma-official-skills
description: |
  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.
triggers:
  - "Figma skill"
  - "figma-implement-design"
  - "figma-generate-design"
  - "Figma to code"
  - "code to Figma"
  - "figma-use"
  - "Figma Plugin API"
das:
  category: figma-code
  upstream: "https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server"
  version: latest
  install: false
---

# 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.

type: platform
tier: official
category: figma-code
rank: 1
upstream: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server
version: latest
install_default: "Figma Dev Mode MCP — enable in Figma desktop, no npx install"
installed_as: figma-use