Deep dive into design systems in Figma and Framer

This livestream is a deep dive into design systems in Figma and Framer. Watch video

Intro:

0:00 - Intro, Meng moved to Singapore

1:24 - Why create a Design System?

Variables:

9:00 - Explaining variables and design tokens

13:43 - Primitives and contextual values in variables

Spacing:

15:31 - Importance of spacing

16:17 - Using 8-point grid system

Semantics:

21:22 - Semantic naming for contextual values

Components mapping:

37:52 - Mapping components to light/dark modes

39:48 - Mapping components to breakpoints

Framer implementation:

50:51 - Demo of implementation in Framer

52:56 - Tips for transitioning from Figma to Framer

1:06:35 - Figma plugins

1:11:20 - Pricing for DesignCode UI