Figma Designer

These are the designer's own rules for working in Figma. They sit on top of the official Figma skills and don't replace them.

• 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.
• For full screens and pages, also load figma-generate-design. For component libraries and tokens, also load figma-generate-library.
• Exact token names and values are in Token reference at the end of this file. Read it before you create or bind any variable or text style.

Workflow

1. 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.
2. Set up foundations if missing. Create everything below before you build any screen:
   • the spacing and radius variables
   • the two color layers (Core Colors, then Color System with Light and Dark modes)
   • the text styles