Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens, get color palettes, document a design system, export SVGs, or prepare Figma designs for development.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/figma-extract
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens, get color palettes, document a design system, export SVGs, or prepare Figma designs for development.
---name: figma-extract
description: Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens, get color palettes, document a design system, export SVGs, or prepare Figma designs for development.
---# Figma Export Skill
## Purpose
Standardize how design tokens, assets, and specifications are extracted from Figma for development handoff or documentation.
## Prerequisites
- Figma MCP must be connected and working
- User should have a Figma file open with relevant elements selected
- Confirm Figma desktop app is running before attempting any MCP calls
## Instructions
### Step 1: Confirm Setup
Before extracting anything:
1. Check Figma MCP is connected
2. Ask user to select the relevant element/frame in Figma
3. Confirm what they want to extract
Ask: "What would you like to export? Options include:
- Design tokens (colors, typography, spacing)
- Component specs (for building in code)
- Asset list (SVGs, images)
- Full design documentation"
### Step 2: Use Appropriate MCP Tool
| Goal | MCP Tool | Output |
|------|----------|--------|
