Description
Ensure Figma styles mirror design-system token names to reduce drift.
Requirements and context
Suggested execution
- Fork Disciplr-Org/Disciplr-Frontend and branch:
git checkout -b design/figma-parity-design-system
- Produce frames + specs (spacing, type, color, motion) before deep UI code changes
- Share a short Loom or PR description with before/after for stakeholder review
Design deliverables
- Drift report (Figma vs JSON)
- Proposal for token CI lint if any
Handoff
- Link Figma file + node IDs in the PR (or attach exports if Figma is not used)
- Note any updates needed in
design-system/tokens/*.json
Test and review
- Run a design critique (internal) with eng + design
- Validate keyboard + screen reader on affected flows (smoke level)
- Capture screenshots for light mode; note dark mode gaps if applicable
Example commit message
design: Figma and design-system package parity
Guidelines
| Item |
Target |
| Figma / specs |
Named layers, intent documented |
| Accessibility |
Focus order, contrast, touch targets (min 44×44 px where applicable) |
| Timeframe |
96 hours from assignment |
Description
Ensure Figma styles mirror
design-systemtoken names to reduce drift.Requirements and context
Naming convention doc
Quarterly sync checklist
Deliverables must be reviewable in Figma (or equivalent) and traceable to
Disciplr-Frontend/design-system/Should respect WCAG 2.1 AA targets for default theme unless explicitly scoped otherwise
Suggested execution
git checkout -b design/figma-parity-design-systemDesign deliverables
Handoff
design-system/tokens/*.jsonTest and review
Example commit message
Guidelines