Figma components in sync with code components
summary
Migrates a Sketch UI kit into Figma and aligns Figma components with code by reverse‑engineering the chat component (more than 450+ variants), matching layer names and logical groups to code, using Cosmos as the token and spec source, building four core main components with placeholders and spacers, relying on auto layout, and delivering 46 components instead of the planned 28 so designers can change tokens once and have updates cascade into all variants.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:30Let’s talk about Design Systems
- 2:53Defining our goal
- 7:12The chat component
- 10:42Code
- 12:00Research
- 15:44Let’s use Figma
- 20:23How it ended up
- 22:14Takeaways
related talks
23mCollaborative and real-time design systems in Figma
38mMastering the art of crafting code-aligned UI kits
32mThe journey to interactive components
28mFrom Sketch to Code Designing a Component Kit
45mFiguring it Out: A Figma Migration Story
22mArchitecting Subcomponents
44mIt’s all about components
24mFrom Sketch to Code Designing a Component Kit