Office hours: Building style guides

Rogie and Anthony share how to approach setting up a style guide for your brand and share Figma files from the community to get you started.
Thumbtack's Design System in Figma: figma.zoom.us/recording/share...
0:00 Intro
0:45 Styler plugin to extract selections and generate styles
2:45 Design System Organizer plugin
5:30 Typescales plugin: Generate type scales based on a base font size
10:15 Importing Sketch styles
13:00 Setting type styles independently of color styles in Figma
15:30 Creating Grid styles
16:30 Creating style sub groups
19:00 Organizing components
23:00 Automatic Style guide plugin
26:00 Visualizing Grid styles using the Layout Grid Visualizer plugin
27:00 Tip: Control + G to toggle grids
29:50 Constraining object widths to fluid grids with fixed gutters
31:45 Community files: Github's Primer Design System
32:30 Splitting out your Design Systems into multiple team libraries
33:40 Github's Primer Primitives: Colors, Typography, Grids, Styles, etc.
34:15 Tip: Right-click, Set as Thumbnail to set any frame as a cover image
40:30 Documenting how to use your system within Figma
41:45 Microsoft's Fluent Web Design System
43:30 Using components and links to help with documentation
44:30 Semantic color names
45:00 Material theming Style Guide
46:00 Documenting how to use components in your style guide
48:00 Migrating components to other files
50:00 Dealing with breaking/non-breaking changes to components
55:30 Component updates and instance overrides
#Figma #OfficeHours #Branding #StyleGuide #DesignSystem

[@abhinavrv0092]

Amazing Content and great presentation❤

[@funkymag]

Very usefull!

[@crimeandpunishment1130]

I love office Hours videos. Please keep it up for sharing excellent tips to use Figma beautifully.

[@emmapotter2333]

amazing tricks and plugin!

[@neuecoldworld7255]

Amazing content as always. Even for someone who runs figma 8h a day, there's always a new trick to learn.
Also, that account switcher got me going, when can lowly plebs get that?

[@anukrititripathi152]

Thankyou!

[@tq6725]

Hey guys, thanks for another awesome video! Can we please get a refresh of the thumbtack zoom link, it doesn't work anymore. Thank you

[@ytrpaz]

Rogie and Anthony is there a styleguide for corners in figma?

[@heyitsblissful1158]

How do i add styles to local library though?

[@pragyajha1856]

Is there any free alternative for the design system organizer plugin