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/...

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)