--- name: implement-figma-design description: Use when user provides a Figma design URL to implement - extracts design specs via MCP tools, implements Angular component, adds Storybook stories, and VERIFIES implementation visually by comparing screenshots (project) --- # Implement Figma Design ## Critical Rules - **EXACT values only** - Use 1.512% not 2%, use 45 not 40. Never round Figma values. - **Never save to src\/assets** - Do not download or save any files to `src\/assets\/`. - **Screenshots go to screenshots\/** - All PNGs go to `screenshots\/` directory only. - **No showcase\/demo wrapper components** - If Figma shows multiple examples of a component, implement the **base component** only. Use **Storybook stories** to show variations, not wrapper components. - **Use MCP for comparison screenshots** - Always use `figma-mcp-screenshot.sh` for Figma screenshots used in pixel comparison. This uses local font rendering to match browser fonts. - **NEVER rationalize failure as success** - If diff shows >0.5% major difference, you FAILED. "Close enough", "antialiasing", "icon shapes" are NOT acceptable excuses for layout bugs. See Step 10 for forbidden rationalizations. - **NO styles on components in stories** - Stories must NEVER apply inline styles to components (e.g., ``). Only container\/wrapper styles are allowed. If comparison fails without inline styles, the **component has a bug** - fix the component, not the story. ## Checklist ``` - [ ] 1. Get Figma metadata (structure overview) - [ ] 2. Get Figma design context (exact specs) - [ ] 3. Get Figma screenshot (visual reference via MCP tool) - [ ] 4. Capture Figma frame via MCP (for pixel comparison) - [ ] 5. Map Figma values to design system variables - [ ] 6. Implement Angular component - [ ] 7. Add interactive Storybook story with EXACT values - [ ] 8. Capture Storybook screenshot (matching viewport) - [ ] 9. Run pixel comparison - [ ] 10. Iterate until comparison passes ``` ## Step 1: Get Figma Metadata Extract nodeId from URL: `?node-id=513-2807` → `513:2807` ``` mcp__figma-desktop__get_metadata(nodeId: "513:2807") ``` This gives structure overview - layer hierarchy, node IDs, positions, sizes. ## Step 2: Get Figma Design Context ``` mcp__figma-desktop__get_design_context(nodeId: "513:2807") ``` This returns code suggestions and design tokens. **Record ALL CSS properties exactly as Figma returns them:** **Dimensions:** - `width`, `height` (e.g., 320px × 80px) **Typography (all properties - mismatches are common):** - `font-family` (e.g., Inter) - `font-size` (e.g., 14px) - `font-weight` (e.g., 400, 500, 600) - `line-height` (e.g., 1.5 or 20px) - `letter-spacing` (e.g., -0.02em) - `text-align`, `text-transform`, `text-decoration` **Colors:** - Exact hex values (e.g., #3B82F6) - Opacity\/alpha if specified **Spacing:** - `padding` (all sides) - `margin` (all sides) - `gap` for flex\/grid **Borders & Rounding:** - `border-radius` (e.g., 8px or per-corner values) - `border-width`, `border-color`, `border-style` **Effects:** - `box-shadow` (offset, blur, spread, color) - `opacity` - `backdrop-filter` if specified **Layout:** - `display` (flex, grid, block) - `flex-direction`, `justify-content`, `align-items` - `position`, `top`, `left`, `right`, `bottom` - Position offsets (e.g., left: 1.512%) **Copy ALL values exactly. Never round or approximate.** **Do NOT fetch localhost asset URLs** - they are internal to MCP and will fail. ## Step 3: Get Figma Screenshot (Visual Reference) ``` mcp__figma-desktop__get_screenshot(nodeId: "513:2807") ``` Use as visual reference when code output is ambiguous about appearance. This is inline and NOT saved to disk - it's for quick visual inspection only. ## Step 4: Capture Figma Frame via MCP (For Pixel Comparison) **IMPORTANT:** This step captures a screenshot from Figma Desktop using local font rendering. This ensures fonts match between Figma and browser for accurate pixel comparison. **Requirements:** - Figma Desktop app must be running - The file containing the node must be open in Figma - MCP server enabled in Figma Desktop settings ```bash .claude\/skills\/implement-figma-design\/scripts\/figma-mcp-screenshot.sh \ "" \ screenshots\/figma-.png ``` **Examples:** ```bash .claude\/skills\/implement-figma-design\/scripts\/figma-mcp-screenshot.sh \ "528:304" \ screenshots\/figma-input-group.png ``` Or with full URL: ```bash .claude\/skills\/implement-figma-design\/scripts\/figma-mcp-screenshot.sh \ "https:\/\/www.figma.com\/design\/xxx?node-id=528-304" \ screenshots\/figma-input-group.png ``` **Why MCP instead of REST API?** - REST API uses Figma's cloud rendering with bundled Inter 3.x font - MCP uses local Figma Desktop with your system's Inter 4.x font - This eliminates font version mismatch that causes cumulative text drift **If MCP fails:** 1. Ensure Figma Desktop is running with the file open 2. Check that MCP server is enabled (Figma → Settings → Enable Local Server) 3. As last resort, manually export: Select frame → Right-click → Export → PNG (1x) **STOP if no Figma screenshot.** Do not proceed without it. ## Step 5: Map Figma Values to Design System Variables **Before writing CSS, check your global styles** (e.g., `styles.scss`, `variables.scss`, CSS-in-JS theme, or framework config) for existing design tokens. **Why:** Figma returns raw hex values like `#066fd1`, but your design system may have `--color-blue` defined. Using variables ensures consistency and maintainability. **Mapping process:** 1. List all colors, font weights, sizes from Figma design context 2. Search global styles for matching values 3. Create a mapping table: | Figma Value | Design Token | |-------------|--------------| | `#066fd1` | `var(--color-blue)` | | `#374151` | `var(--color-gray-700)` | | `font-weight: 500` | `var(--font-weight-medium)` | | `14px \/ 20px` | `var(--body-14-medium-size)` \/ `var(--body-14-medium-line-height)` | **When to use raw values:** - Color not in design system (new color from Figma) - Value doesn't match any existing token - One-off spacing\/sizing specific to this component ## Step 6: Implement Angular Component - Standalone component with `ChangeDetectionStrategy.OnPush` - Signal-based inputs: `input()` not `@Input()` - Make inputs configurable (exact Figma values go in Storybook story, not hardcoded) - Use CSS variables from Step 5 mapping where available ### Semantic HTML & Component Decomposition (CRITICAL) **Figma shows visual layout, NOT semantic structure.** Before implementing, decompose the design into proper HTML semantics following atomic design and W3C\/ARIA patterns. #### Atomic Design Hierarchy | Level | Examples | Purpose | |-------|----------|---------| | **Atoms** | ``, ``, `