Build it in Figma: Create a Design System lV - Testing

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: 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
#Figma #DesignSystem #DesignSystems #UXDesign

[@AnshMehraa]

That image swapping thing just absolutely blew my mind. This is such high level quality content! Please continue these. I feel so grateful that I came across these videos just in time.

[@kanosmom]

totally agree with ''blowing the mind'' part )))

[@deepakkadian6661]

I am in sync and love with your style of demonstrating things. A stream method maybe more time taking as compared to short videos explaining different features, but it is so good, the little extra notes you give in between are very great incites, at least for those at beginner levels (like me :) )

[@fajleyrabbe2930]

9:30 Testing out the Tooltip component
22:00 Swapping nested components with autolayout content

[@jahniittel9472]

Where can I find the links?

[@modupeikimot2049]

I really do not understand the image swapping part, can I get a clearer explanation on this, please 🙏

[@XiaodanGuo]

Great content, how do you create 0 height frame ?

[@Figma]

Hi Xiaodan, you can change dimension properties at the top of the right sidebar. 1) Select a frame; 2) change the H value to 0̸.

[@odanabunaga2505]

@@Figma 2023 here =) it seems that the smallest H == 1px now, still works though for the slot purposes

[@MayaBlevins]

Is that lil popup actually called a Toast?

[@BobbyBrixx]

Yes

[@tadswiech3043]

voices from the basement he ehehe heheh eheh eh