How it works
Design with tokens
Use AP Composition's Figma variable collections for color, spacing, and typography. Every value maps to a code token.
Sync automatically
The Figma plugin syncs your token changes to the codebase. No copy-paste. No manual CSS updates.
Build with confidence
Components use the same tokens in code as in Figma. Design-code parity is enforced, not hoped for.
What's included
Token sync
3 variable collections (color, spacing, typography) with light/dark/brand modes. Changes propagate to CSS custom properties automatically.
Component mapping
Every Figma component maps to a code component via code_ref metadata. Props, variants, and slots are tracked bidirectionally.
Parity tracking
The parity_status field tracks whether each component is in sync between Figma and code. Drift is visible, not hidden.
Quality gates
Automated checks verify token compliance, naming conventions, and accessibility before designs are shipped to development.