メニュー
Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/oimiragieo/agent-studio --skill figmaコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | figma |
| description | Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems. |
| version | 1.0.0 |
| model | sonnet |
| invoked_by | both |
| user_invocable | true |
| tools | ["Read","Write","Bash","WebFetch"] |
| agents | ["frontend-expert","styling-expert","ui-components-expert"] |
| category | design |
| tags | ["figma","design","ui","design-tokens","design-system","components"] |
| best_practices | ["Extract design tokens before building components","Use Figma REST API for programmatic access","Map Figma auto-layout to CSS flexbox/grid","Preserve design intent over pixel-perfect matching"] |
| error_handling | graceful |
| streaming | supported |
| verified | false |
| source | builtin |
| trust_score | 100 |
| provenance_sha | 835ae2fba8301b6f |
Extract design information from Figma files for implementation. Covers design token extraction, component inspection, and design-to-code translation.
FIGMA_ACCESS_TOKEN env var)curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID1,NODE_ID2"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=svg"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/components"
# Get all published styles
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles" | jq '.meta.styles'
/* Colors */
:root {
--color-primary: #2563eb; /* From Figma: Primary/500 */
--color-secondary: #7c3aed; /* From Figma: Secondary/500 */
--color-surface: #ffffff; /* From Figma: Surface/Default */
}
/* Typography */
:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--text-xl: 1.25rem; /* From Figma: Heading/XL */
--text-base: 1rem; /* From Figma: Body/Base */
--leading-tight: 1.25;
--leading-normal: 1.5;
}
/* Spacing */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-8: 2rem; /* 32px */
}
| Figma Auto-Layout | CSS Equivalent |
|---|---|
| Horizontal | display: flex; flex-direction: row; |
| Vertical | display: flex; flex-direction: column; |
| Space between | justify-content: space-between; |
| Packed (start) | justify-content: flex-start; |
| Gap: 16 | gap: 1rem; |
| Padding: 16,24 | padding: 1rem 1.5rem; |
| Fill container | flex: 1; or width: 100%; |
| Hug contents | width: fit-content; |
For each Figma component, extract:
| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Hardcoded hex colors | Breaks on design system update | Use CSS variables mapped from Figma tokens |
| Ignoring auto-layout | Layout doesn't match design | Map auto-layout 1:1 to flexbox/grid |
| Pixel-perfect obsession | Wastes time, ignores responsive | Match design intent, not exact pixels |
| Skipping component variants | Missing states (hover, disabled) | Extract ALL Figma variants |
| Manual token extraction | Error-prone, doesn't scale | Use Figma REST API for programmatic extraction |
When the official Figma MCP server is running, these 12 tools are available:
| Tool | Purpose |
|---|---|
get_design_context | Get full design context for a file/node (components, styles, layout) |
generate_figma_design | Generate new designs from natural language description |
get_variable_defs | Extract all design tokens (colors, spacing, typography variables) |
get_screenshot | Capture rendered screenshot of a frame/component |
code_connect_map | Map Figma components to their code counterparts |
create_design_system_rules | Auto-generate design system documentation |
get_figjam | Access FigJam board content and sticky notes |
generate_diagram | Generate Figma diagram from Mermaid input |
get_components | List all published components in a file |
get_styles | Extract all defined styles (color, text, effect) |
export_assets | Export assets as PNG/SVG/PDF with scale options |
get_annotations | Retrieve design annotations and spec notes |
get_metadata | Get XML layer representation of a file/node for programmatic parsing |
whoami | Get current user identity, plan tier, and available seat count |
MCP Setup: Install Figma Desktop app -> Settings -> Enable MCP server
Auth: Uses active Figma session (no API key needed for local MCP)
Key workflow: get_design_context -> code_connect_map -> export_assets for design-to-code
Identity check: Use whoami to verify plan tier before calling enterprise-only tools
Before starting:
Read .claude/context/memory/learnings.md
After completing:
.claude/context/memory/learnings.md.claude/context/memory/issues.md.claude/context/memory/decisions.mdASSUME INTERRUPTION: If it's not in memory, it didn't happen.