A suggested order to read these guides in

Start here. The three principles every later guide assumes you already know: how space, contrast, and line length carry meaning before color or type styling enters the picture.

• Whitespace as a UI Component, Not a LeftoverBeginner · 11 min read
• Padding and Margin Are Different Jobs, Not Interchangeable ValuesBeginner · 8 min read
• Line Length Is a Reading Constraint, Not a Layout AfterthoughtBeginner · 9 min read
• Color Contrast Is Math, Not TasteBeginner · 10 min read

Turn one-off choices into systems — a type scale that resizes itself, a color palette built from tokens instead of swatches, and a dark theme that's re-derived rather than inverted.

• Font Size Is a Formula, Not a FeelingIntermediate · 12 min read
• Font Pairing Is a Hierarchy Decision, Not a Personality MatchBeginner · 11 min read
• A Color Palette Is a Token System, Not a Row of SwatchesIntermediate · 14 min read
• Dark Mode Is a Second Palette, Not an Inverted FilterIntermediate · 12 min read

Make an interface hold together everywhere it's used: Figma's constraint model, a responsive layout that's a contract rather than a breakpoint list, and the accessibility tree underneath it all.

• Auto Layout Is a Constraint System, Not a Convenience ToggleIntermediate · 15 min read
• Components and Variants Are a Contract, Not a Copy-Paste ShortcutIntermediate · 16 min read
• Figma-to-Code Handoff Is a Translation, Not a ScreenshotIntermediate · 14 min read
• Grid Systems Are a Rhythm, Not a RulerIntermediate · 14 min read
• Responsive Layout Is a Contract, Not a Breakpoint ListIntermediate · 18 min read
• Mobile Breakpoints Are Device Categories, Not Arbitrary PixelsIntermediate · 13 min read
• Thumb Zones Are a Layout Constraint, Not a Nice-to-HaveBeginner · 10 min read
• iOS and Android Are Different Systems, Not One Design Reused TwiceIntermediate · 17 min read
• Accessibility Is a Structural Decision, Not a Final PassIntermediate · 16 min read

The advanced layer teams reach for once the basics are solid: Figma's own data layer for theming, naming conventions that survive a rebrand, and motion timing with real physics behind it.

• Figma Variables Are a Data Layer, Not Just Color StylesAdvanced · 15 min read
• Design Tokens Are a Naming System, Not a Style GuideAdvanced · 17 min read
• Motion Timing Is a Physics Model, Not a PresetAdvanced · 15 min read