Build it in Figma - Build it in Figma: Create a Design System — Components continued

Part 3/5. Introduce more complex components like cards, media objects, dialogs, navigations, and forms to your design system. Figma file: https://www.figma.com/community/file/867135839870202854 Figma is free to use. Sign up here: https://bit.ly/3l69lVU Timestamps: 0:00 Intro 1:30 Overview of Typescale & Colors 2:40 Overview of Components 3:20 Constraints 3:40 Autolayout 5:00 Creating understandable systems 6:40 Using nested "structure" components 8:00 Autolayout Buttons 9:00 Auto vs. Fixed width with Autolayout 11:00 Instance swapping 12:20 Autolayout for Text with an expanding underline 14:15 Groups vs. Frames 15:00 Constraints within Frames 17:30 Creating a Card Component 24:30 Creating a Media Component 26:00 Split components out into logical groups when the design system matures 26:45 Pasting images into fills 30:00 Adding a tint/gradient/border overlay to your media components 35:00 Holding Alt to reveal spacing between objects 35:45 Spacer components 38:00 Creating a Tooltip Component 38:45 Drawing an iOS style Tooltip "beak" 39:25 Tip: Swap fills & strokes with Shift + X 41:00 Creating Effect Styles for consistent patterns for depth 42:00 The power of using shared Effect Styles 43:00 Completing the Autolayout Tooltip 44:00 Using selection colors 44:45 Extending the Tooltip component to have a top/bottom beak 47:10 Using nested Autolayout for a button that can be fixed width 48:00 Swapping instances of buttons and using slash naming to group for easy swaps 50:45 Tip: Changing images in components by copy/pasting image fills 51:45 Placing multiple images in components with Place Image (Shift + Cmd/Ctrl + K) #Figma #DesignSystem #DesignSystems #UXDesign