figma-design-extraction

Complete Figma design extraction for pixel-perfect implementation.Extracts design tokens, component specs, layouts, and responsive behavior systematically.Use when user provides Figma design:- Figma URL or file link provided- User mentions "Figma", "design file", "mockup", or "design system"- During /create-plan phase when design needs extraction- User says "extract from Figma" or references Figma linkExtract systematically:- Design tokens: ALL colors (hex + usage), typography (sizes, weights, line heights), spacing scale, border radius, shadows, opacity values- Components: ALL states (default, hover, active, focus, disabled, loading, error), ALL variants (size/style/intent), exact dimensions, spacing, visual properties- Layouts: page structure, grid systems (columns, gutters), component hierarchy- Responsive: mobile/tablet/desktop differences explicitly documented- Assets: icons (names, sizes), images (dimensions, alt text), illustrationsGoal: Extract ONCE completely during planning phase

// tip: Run this command in your terminal to install the skill