figma-designlisted

# Figma design + build This is a worked example of a skill produced by skill-forge from `examples/WORKLOG.example.md`. It shows how tagged journal entries become a procedure, guardrails, and reference notes. The design tool runs JavaScript against the plugin API and renders server-side; drive it like a headless design tool and verify every step with a screenshot. ## Procedure (ordered, do not reorder) 1. **Establish page structure and a layer-naming convention before creating any frame.** This is step 1, always. Frames-first produces ungrouped, default-named layers (Rectangle, Text) that are unusable for dev handoff and painful to fix after. Decide pages and naming first. 2. Confirm the account and plan. Edits fail silently on a view-only account. 3. **Foundations first.** Create paint, text, and effect styles (guard by name to avoid duplicates) before drawing any UI. This locks the palette and type ramp and makes every later node bindable. 4. **Discover and load fonts up front.** List available fonts filtered to your candidates, record exact style names (they vary: `Semi Bold` vs `SemiBold`), then load every weight before setting any text. 5. **Build named, bound, and grouped as you go.** Name every node on creation, bind to styles from the first draw, build each section inside a named container. Draw backgrounds before text. 6. **Screenshot loop.** Build a small piece, screenshot the real node, read it, fix, repeat. Never author a large design blind. 7. **Componentize.**