AI-Native Design Workflow : Edition 03Typography Variable System
Written: April 16, 2026
Summary:
While building Atomic Components, I identified and resolved inconsistencies within the typography system. After defining new CSS variables and refactoring the codebase, I evolved the Figma plugin from a simple automation tool into a "Style Inheritance" architecture. This ensures that the design system is not just a static kit but a living reflection of the production environment, capable of intelligent self-healing and automated binding.
Key Technical Breakthroughs
1: Full Codebase Refactoring with CSS Variables
Task: All hard-coded font sizes and weights were replaced with structured variables in globals.css (e.g., --text-body-sm).
Result: The entire UI is now controlled by a centralized system, making global updates possible with a single change in CSS.
Identifying Hidden Design Debt: AI-Driven Typography Audit
Claude analyzing the codebase to find inconsistent font sizes and weights before refactoring.
2: Fixing tailwind-merge Conflicts
Problem: Custom typography utilities were being overwritten by tailwind-merge.
Fix: Updated lib/utils.ts using extendTailwindMerge to register the custom typography group.
Resolving Utility Collisions: Failed Token Rendering
The Progress Ring label reverting to default browser sizing due to tailwind-merge overwriting custom typography tokens before the configuration fix.
3: Precision Scoping: Designer-Centric Variable UI
Problem: Variable overload in Figma property panels caused confusion during the design process.
Fix: Strict scoping logic was applied to each attribute (Size, Weight, LH, LS) to ensure variables appear only in their corresponding Figma panels. This prevents typography tokens from cluttering unrelated layout settings.
Precision Attribute Scoping: Property Isolation
Font Weight and Size variables mapped exclusively to their relevant panels. By isolating each attribute through the Figma API, the system ensures that typography tokens only appear in contextually appropriate fields, preventing variable clutter across the design workspace.
4: Integrated Token Generation & Auto-Binding
Innovation: A scanning engine was built to detect raw text layers and automatically bind them to the newly generated typography tokens and styles. This turned manual design maintenance into a seamless, one-click synchronization process.
5: Strategic Bridge: Handling API Limitations
Constraint: The Figma API cannot programmatically bind variables to "Font Family" or map numerical values (700) to "Font Styles" (Bold) within a Text Style.
Solution: A hybrid workflow was established where numerical CSS values are mapped to String variables (e.g., "Bold") for visual perfection. While numerical values are synced automatically, font family and weight variables are linked manually to bypass technical blockers.
6: Automation of Visual Semantics (TextCase: UPPER)
Problem: Styles requiring all-caps (e.g., label-xs-caps) had to be toggled manually in Figma.
Fix: Logic was integrated to detect caps-specific tokens and automatically force the UPPER text case at the style level. This guarantees 100% visual parity between the code and Figma.
Full-Stack Binding: Linking Code Tokens to Figma Layers
The final result showing Figma text layers perfectly synchronized with the newly defined CSS typography variables.
Critical Reflection: Bridging the Gap Between AI and Production
The Reality of AI Collaboration
This process showed that while AI is a powerful tool, it often misses the small but critical details of a Code-to-Canvas workflow. Even though the AI claimed the task was "done," it failed to include basic attributes like Font Weight and Letter Spacing, and it couldn't solve the tailwind-merge conflicts on its own.
Architectural Integrity through Persistence
I realized that building a solid system requires more than just simple automation. It took a lot of trial and error to find the gaps the AI left behind. I had to manually fix the mapping for missing attributes and create a custom bridge to work around Figma API limits. In the end, the system is reliable because of this manual oversight—making sure the codebase is perfectly mirrored on the Figma canvas.
Next Step:
With Typography and Color ready, I am moving to Atomic Component Automation.