# @figma on YouTube

- **Type:** Video
- **Original URL:** https://youtube.com/watch?v=e1Q2dyZ3cRE
- **Gondola URL:** https://gondola.cc/posts/73339020-figma-youtube
- **Thumbnail:** https://img.gondola.cc/tr:w-,h-,fo-auto/postThumbnails/bcd73da3c4.jpg
- **Posted:** 2020-09-01T14:31:54.000+00:00
- **Account Owner:** Figma (@figma) — https://gondola.cc/figma

## Caption

Diving into complex components, Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms and more.

0:00 Intro
0:30 Using a base "Structure" component
1:45 Using frame names for component categorization
4:00 Swapping component instances
5:30 Goto main component from an instance
8:00 Maintaining text overrides in a component instance swap
9:00 Tip: Cmd/Ctrl + "." to hide Figma UI 
10:30 Naming with "/" to further categorize your components
15:30 Using layout grids with constraints on components
20:00 Saving grids to styles
22:45 Layout grids used only on frames
25:00 Using constraints within frames
27:00 Locking layers in components to make them easier to edit
28:00 Overriding component instance properties 
31:00 Creating dynamic progress bar components 
33:00 Using constraints within Boolean operations
35:00 Preview component behavior by modifying instances
37:30 Mac OS UI Kit (approaches to setting up a UI Kit)
39:00 Component architecture for the Mac OS UI Kit
40:00 Basing a component off of another component
40:30 Complex component swaps and theming
43:00 Demo of creating a Mac OS window
44:00 Testing out component flexibility 
45:00 Tip: Cmd/Ctrl + Y to show outline mode
50:00 Using "slot" instances to swap in dynamic content into component instances
52:00 Autolayout components allow dynamic dimension components
53:00 Autolayout Tooltip components 
55:00 Preserving colors in icon swaps using masks
57:15 Prototyping main navigation components mode for faster prototypes
1:00:30 Using notes in version history to document changes
1:01:30 Using Autolayout vs. Layout grids
1:02:30 Using Autolayout to tidy up your frames
1:04:00 Copy and pasting styles from one object to another
1:05:00 Prototyping hover and tap in a navigation component

#Figma #OfficeHours #Autolayout #Grid #FigmaDesign

## Stats

- **Views:** 156,832
- **Likes:** 1,956
- **Shares:** 0
- **Comments:** 58

## Tags

autolayout, grid, officehours, figma, figmadesign

---
Copyright (c) Gondola