Build it in Figma: Create a Design System lV — Testing скачать в хорошем качестве

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