Mastering the art of crafting code-aligned UI kits
summary
Argues that concrete API choices and tooling decide a UI kit’s success not vague promises: aligns Figma variants with React props, bakes token names into styles (e.g. [token]) and uses Automator plugin for batch edits, Figma Tokens / Design Tokens pipelines to sync tokens, plus visual regression via blend-mode Difference. Notes a 1 : 18 maintainer to consumer ratio and aims to save ~10 seconds per use. Recommends splitting visually distinct variants, deprecating with emoji and descriptions, and avoiding base components once teams exceed 10 designers.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:08What Will We Learn
- 3:43Optimize Component Api
- 9:27When To Consider Splitting Variants into More Components
- 10:52Setting the Most Frequent Variant as Default
- 11:45Common Process for Complex Components
- 13:28Resetting Overrides
- 15:25Testing Changes and Preventing Preventing Braking Changes
- 19:06Visual Regression Testing
- 19:38Deprecate Large Components
- 22:36Why Not Use Base Component
- 25:03Variant Switching
- 26:31Canvas Organization
- 27:39Examples from Our Product Ui Kit
- 35:03When Not To Align Api and Figma with Code
related talks
25mDesign systems for agencies
45mBridge the Gap between Design and Development
14mRethinking Designer-Developer Collaboration
51mDesign system and tokens
18mMaking the Things That Help Others Do Their Thing
40mBest practices for building a consistent design system from design to app implementation
23mHow to create Figma design loved by developers
35mHabits for building a scalable UI