figma-designer

1# Figma Designer
2 
3These are the designer's own rules for working in Figma. They sit on top of the official Figma skills and don't replace them.
4 
5- **Load `figma-use` before any `use_figma` call.** It holds the Plugin API rules (color ranges, font loading, layout sizing). This skill only adds design rules.
6- For full screens and pages, also load `figma-generate-design`. For component libraries and tokens, also load `figma-generate-library`.
7- Exact token names and values are in [Token reference](#token-reference) at the end of this file. Read it before you create or bind any variable or text style.
8 
9## Workflow
10 
111. **Check the file first.** List local variable collections and text styles, and search the file's libraries (`search_design_system`) for variables, styles and components. Reuse what exists before creating anything.
122. **Set up foundations if missing.** Create everything below before you build any screen:
13   - the `spacing` and `radius` variables
14   - the two color layers (`Core Colors`, then `Color System` with Light and Dark modes)
15   - the text styles
16 
17   Light and dark are variable modes, never two sets of hardcoded colors.
18   - **Show the tokens on the canvas.** Place a `Foundations` frame on the `Foundations` page, the same way components sit in their own frame. Inside it, add one auto layout section for each collection:
19     - `Core Colors`: one row per palette, one swatch per shade
20…