figma-extractlisted

# 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 | |------|----------|--------| | Get design tokens | `get_variable_defs` | Colors, typography, spacing values | | Get code specs | `get_design_context` | Component structure, styles | | Visual reference | `get_screenshot` | Image of selection | | Layer structure | `get_metadata` | XML hierarchy of layers | ### Step 3: Format Output by Type --- ## Output Formats ### Design Tokens → CSS Variables ```css :root { /* Colors - Primary */ --color-primary: #675ACD; --color-primary-hover: #5449B3; /* Colors - Text */ --color-text-primary: #000000; --color-text-secondary: #6B7280; /* Colors - Background */ --color-bg-primary: #FFFFFF; --color-bg-second