Figma Design Tokens Sync

Tracking synchronization between Figma design tokens and CSS variables.
Source: Multiple-returns (Figma)
Last sync: 2025-12-25 via Claude Code MCP

17

Synced

0

Mismatch

2

Missing in CSS

1

Missing in Figma
Sync Progress 85% (17/20 tokens)
Status Legend: synced CSS matches Figma missing_in_css Add to CSS missing_in_figma Check with designer

Colors

Preview Figma Token Figma Value CSS Variable CSS Value Status
Black #333333 --xcart-text-primary #333333 synced
Blue #2274A6 --xcart-primary #2274A6 synced
White #FFFFFF --xcart-bg-white #FFFFFF synced
Red #BB1F34 --xcart-danger #BB1F34 synced FIXED
Dark Green #2B7616 --xcart-success #2B7616 synced FIXED
Greys/Light Grey #F5F5F5 --xcart-bg-main #F5F5F5 synced
Greys/Mid Grey #E2E2E2 --xcart-border-light #E2E2E2 synced
Greys/Grey #ABABAB --xcart-text-muted #ABABAB synced
Purple #AE71BF --xcart-purple #AE71BF synced NEW
Light Yellow #F7E9C6 --xcart-warning-bg #F7E9C6 synced NEW
Crisp/link #386EAF --xcart-link-alt #386EAF synced NEW
- - --xcart-text-secondary #757575 missing_in_figma

Typography

Figma Token Size Weight Line Height CSS Class Status
Desktop/H/H1_SB_32_60 32px 600 (SemiBold) 60px .xcart-h1 synced
Desktop/H/H2-SB-24-40 24px 600 (SemiBold) 40px .xcart-h2 synced
Desktop/H/H3-SB-20-30 20px 600 (SemiBold) 30px .xcart-h3 synced
Desktop/H/H4-SB-18-30 18px 600 (SemiBold) 30px .xcart-h4 missing_in_css
Desktop/Body/Body-1-R-16-30 16px 400 (Regular) 30px .xcart-body-1 missing_in_css
Desktop/Body/Body-3-R-12-20 12px 400 (Regular) 20px .xcart-body-3 synced
Button/Standard 16px 600 (SemiBold) 30px .xcart-btn synced

Spacing & Effects

Figma Token Value CSS Variable Status Usage
radius-4px 4px --xcart-border-radius synced NEW Default border radius
Sticky-panel 0 -5px 10px rgba(51,51,51,0.1) --xcart-shadow-sticky synced NEW Bottom action bar shadow

Tools & Commands

Validate mockups against tokens:

/validate-tokens                     # Validate all mockups
/validate-tokens mockups/return-detail.twig   # Validate specific file

Data Files: