majiayu000 Figma MCP → Layout Builder
allowed-tools:
- extract_design_tokens
Use this to fetch Figma design data via MCP, clean it up (even when designers skipped Auto Layout), and produce a code layout that matches the design.
Quick Start
- Confirm Figma MCP is configured; gather file key, page name/ID, frame IDs, target widths (desktop/mobile), and desired output stack (HTML/CSS vs. Liquid/section/snippet).
- Fetch data: pull JSON for target frame (geometry, fills, text styles) and an image export for visual reference.
- Normalize spacing/structure, map to flex/grid, and emit code plus a short QA checklist.
Fetching Figma Data with MCP
- Request: file key, page, frame IDs. If missing, ask for a shared link and which frame(s) to target.
- Pull both structure (nodes with bounding boxes, text styles, fills, strokes, effects) and preview (PNG/JPEG) to cross-check.
- If the design changes, re-fetch the affected frames before coding.
Heuristics When Auto Layout Is Missing
- Group detection: Cluster nodes whose edges align within 4–8px tolerance to identify rows/columns/cards.
- Stack direction: For a cluster, sort by Y (potential column) vs. X (potential row); pick the axis with smaller gap variance.
- Gap inference: Compute deltas between sorted positions; use the mode/median as the intended gap. Snap to 4/8px steps when plausible.
- Padding: Use the distance from child bounds to parent frame edges; if asymmetric, pick the common side value as base padding.
- Alignment cleanup: Round positions/sizes to nearest 2/4px to remove jitter; unify repeated widths/heights across siblings.
- Grid guess: If cards repeat, derive columns from min horizontal gap and card width; set
grid-template-columns: repeat(n, minmax(0, 1fr)). - Typography/colors: Collect distinct font families/weights/line-heights and hex colors; map recurring values to tokens.
- Overlaps: Preserve intentional overlays; otherwise prefer stacking with z-index only where overlap is clearly intended.
Layout Synthesis
- Choose layout model per cluster: flex (single row/column) or grid (cards, galleries). Use absolute positioning only as a last resort.
- Derive spacing tokens (e.g., 4/8/12/16/24) from inferred gaps; reuse them consistently.
- Set breakpoints: start with desktop frame; add mobile by stacking columns to rows and reducing gaps/padding by one token step.
- Images: export asset URLs (or placeholders) and set aspect-ratio from node bounds.
- Text: apply Figma styles (font, size, weight, line-height, letter-spacing); preserve casing and truncation.
- Shopify notes: keep structure inside existing sections/snippets, avoid new folders, and prefer existing CSS variables if present.
Output Plan
- List sections/snippets/files to touch and where to place CSS/JS.
- Define tokens (spacing, colors, font sizes).
- Emit markup with meaningful data-* hooks for future JS.
- Add CSS (flex/grid) with the inferred gaps/padding and breakpoints.
QA Checklist
- Counts match design (cards, buttons, list items).
- Typography and colors align with extracted tokens.
- Spacing matches inferred gaps/padding (spot-check a few pairs).
- Responsive: columns collapse as intended; no overflow on mobile width.
- Accessible: semantic tags, alt text, focusable controls.
If Data Is Thin or Messy
- Ask for: specific frame export (PNG), list of target widths, and any must-keep tokens.
- If positions conflict, prefer consistent 4/8px rhythm over pixel-perfect noise and note any deliberate deviations.