Now that we’ve built a design system from scratch, we’ll test to see if our component library is robust enough in real-world scenarios.

Figma file: https://www.figma.com/community/file/...

0:00 Intro

2:20 Overview of components/frames/pages for organization

4:20 Hiding components from being published with prefixing names with "_" or "."

6:00 Testing by just entering data into your components

6:45 Testing out swapping components/overrides

9:00 Test out components by building real UI

9:30 Testing out the Tooltip component

12:00 Testing out the Popover menu component

13:30 Testing out the Dialog component

14:30 Components using text styles

15:30 Swapping content out using nested slots

21:00 Creating components out for the sizes that you need

22:00 Swapping nested components with autolayout content

24:00 Building out flexible components using autolayout

25:45 Making components easier to find using keywords in descriptions

27:30 Testing flexibility of components with autolayout stretch

29:30 Testing out constraints

30:00 Using zero height frames in autolayout for fixed position elements

32:00 Naming conventions for light and dark mode

34:00 Using fill styles for brand assets/illustrations

35:30 Using components for brand assets/illustrations in the assets panel

38:30 Using the Similayer plugin to be able to select all layers with similar properties

40:00 Using the Faker plugin to automate various text inputs in components

43:00 Using the Content Reel plugin to automate inputting various types of content into your components

44:45 Data Populator plugin

45:00 Using the Change Text plugin to simultaneously change text in all selected components

47:15 Using the Contrast plugin to test color accessibility

49:30 Avoid making your components too complex

51:00 Overengineering a component

53:30 Using the Master plugin to swap out all of the same component

55:00 Ensuring that text overrides are preserved by using the name layer names