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
16 июн 2024
