Analyzes Figma designs into implementation-ready visual evidence, tokens, component specifications, and interaction states for handoff to planning or development.

Figma Designer "Transform Figma designs into implementation ready specifications with pixel perfect accuracy" Overview This skill analyzes Figma designs through the available Figma integration and produces design evidence. prd planner owns product requirements and technical PRD methodology; this skill supplies visual facts and unresolved design gaps. Prerequisites Figma MCP Server Ensure the host exposes a Figma MCP server or plugin before using this skill. Tool names vary by host and plugin version, so inspect the available Figma tools in the current session instead of assuming fixed names. The required capability set is: Read file or page metadata Read selected nodes or node details Read component and style information when available When This Skill Activates Activates when you: Provide a Figma link ( https://www.figma.com/file/... ) Upload a design screenshot and mention "Figma" Say "analyze this design" or "extract design specs" Ask to "create PRD from Figma" Design Analysis Workflow Phase 1: Fetch Design Data Phase 2: Extract Design Tokens Create a comprehensive design token inventory: Phase 3: Analyze Component Hierarchy For each component, extract: Props : Size, variant, state Layout : Flex direction, alignment, gap, padding Styles : Fill, stroke, effects Content : Text content, icons, images Constraints : Responsive behavior Phase 4: Generate Visual Specifications Use this template for each screen: ┌─────────────────────────────────────────┐ │ [Header/Nav] │ ├─────────────────────────────────────────┤ │ │ │ [Main Content] │ │ ┌───────────┐ ┌───────────┐ │ │ │ Card 1 │ │ Card 2 │ │ │ └───────────┘ └───────────┘ │ │ │ ├─────────────────────────────────────────┤ │ [Footer] │ └─────────────────────────────────────────┘ typescript interface PrimaryButtonProps { size?: 'small' 'medium' 'large'; variant?: 'primary' 'secondary' 'tertiary'; disabled?: boolean; } // Sizes size.small = { height: 32px, paddingHorizontal: 12px, fontSize: 15, iconSize: 16, } size.medium = { height: 40px, paddingHorizontal: 16px, fontSize: 15, iconSize: 20, } size.large = { height: 48px, paddingHorizontal: 24px, fontSize: 17, iconSize: 24, } // Variants variant.primary = { backgroundColor: ' 007AFF', color: ' FFFFFF', } variant.secondary = { backgroundColor: ' F5F5F7', color: ' 007AFF', } variant.tertiary = { backgroundColor: 'transparent', color: ' 007AFF', } Output Formats Option 1: Visual Spec Document (Default) Generates a design specification document: Option 2: PRD Evidence Pack Provide screen intent, design tokens, component states, responsive rules, accessibility observations, and open product questions as inputs to prd planner . Do not invent business requirements from visual design alone. Quick Reference: Design Token Categories Always Extract These Category What to Extract Why Colors Hex/RGBA values Theme consistency Typography Font family, size, weight, spacing Text hierarchy Spacing Padding, margin, gap values Layout alignment Borders Radius, width values Shape consistency Shadows Offset, blur, spread, color Depth perception Icons Name, size, color Visual consistency Images URL, dimensions, fit mode Asset management Design Review Checklist Before generating design evidence, verify: [ ] All screens are accounted for [ ] Design tokens are extracted [ ] Component variants are documented [ ] Responsive behavior is specified [ ] Interaction states are defined [ ] Accessibility (WCAG) is considered [ ] Color contrast ratio ≥ 4.5:1 [ ] Touch targets ≥ 44x44px [ ] Focus indicators visible Frame Analysis Template For each frame/screen in the Figma file: Integration with Other Skills Typical Workflow Handoff to Development After generating specifications: Best Practices DO ✅ Extract exact pixel values for critical dimensions ✅ Document component variants and states ✅ Include responsive breakpoints ✅ Note any platform differences (iOS vs Android) ✅ Include accessibility considerations ✅ Export design tokens as constants DON'T ❌ Round spacing values (use exact 4px/8px/12px) ❌ Ignore hover/focus states ❌ Skip constraint behavior ❌ Forget about empty states ❌ Omit loading states ❌ Assume platform defaults without verification Examples and Platform Notes See references/example output.md for a full sample output and platform specific considerations.

figma-designer