figma-design-extraction

Extract design tokens, screen structure, and visual references from Figma files.

Process: CHECK → PARSE → DISCOVER → EXTRACT → ORGANIZE

The goal is to pull structured, source-tracked design data from Figma for use in design-setup pipelines, conflict resolution, and downstream code generation. Every extracted value carries its source tag — this matters because downstream consumers (like design-setup Phase 3) need to know whether a token came from an explicit Figma Variable definition or was inferred from applied styles, since that affects conflict...

Extract design tokens, screen structure, and visual references from Figma files. Use whenever a figma.com URL appears in the conversation, when someone mentions Figma tokens, variables, design system extraction, or screen captures. Also use when calling get_variable_defs, get_design_context, get_metadata, or get_screenshot — this skill defines how to use them effectively. Trigger for phrases like "get from Figma", "extract design", "Figma variables", "design tokens from Figma", "capture screens", or any figma.com/design link. Even if the user just pastes a Figma link without instructions, use this skill to parse it and decide what to extract. Source: petbrains/mvp-builder.