Figma

The library

Enable the Flint Design System library in your file. Variables live in three collections: Primitives, Semantic (with Light and Dark modes) and Sizing (with Comfortable and Compact).

Rules for designing

• Tokens only. Bind every fill, stroke, text color, radius, spacing and size to a Semantic or Sizing variable. No raw hex, no Primitives.
• Library components first. Use an instance before drawing anything. If nothing fits, file an ASDS ticket.
• Don't detach instances. If an instance can't do what you need, that's a ticket too.
• Every state. Default, hover, focus, disabled, and selected or error where they apply.
• Check both modes. Set the mode on the top frame and look at every screen in Light and Dark before handoff.
• Annotate for accessibility. Landmarks, names for icon-only controls, states, live regions and focus order. See Accessibility.
• Demo data uses the Sam Carter persona and example.com. Never real personal data or another company's brand.

Figma Make

Point Figma Make at dist/tokens.css for the full set of variables in light and dark, or at dist/tokens.json for structured values. For Tokens Studio, use dist/tokens.dtcg.json.

Publishing changes

1. Change the variable or component in place. Never make a second variable with the same name.
2. Publish from the Assets panel with a note of what changed and the version.
3. Accept the update in every consuming file.
4. Spot-check contrast in a consuming file in Light and Dark.