Advanced everything in UI Design & Figma, page 3
Figma's Slot Pattern: Flexible Components Without Detaching
Think of a slot as a 'bring your own content' area within a Figma component. It lets you customize instances with unique layouts, like in a card or modal, without detaching them from the main component and breaking your design system.
Auto Layout's `border-box`: strokesIncludedInLayout
Figma's strokesIncludedInLayout is the equivalent of CSS box-sizing: border-box. It makes an Auto Layout frame's total dimensions include its stroke, preventing size changes.
Figma REST API: Access Design Files as Structured Data
The Figma REST API treats your design files as structured JSON data, not just images. Use it to automate workflows like exporting assets, syncing design tokens, or posting comments. The main footgun is using the wrong base URL for Government vs.
Baseline Grid: Aligning Text for Vertical Rhythm
A baseline grid is like ruled notebook paper for your UI, forcing all text to sit on common horizontal lines for clean vertical rhythm. Use it in text-heavy layouts to improve readability.
The Golden Ratio in UI Design
The Golden Ratio (1.618) is a proportion from art and nature used to create visually harmonious UI. Apply it to set layout dimensions or create a typographic scale (e.g., a 26px header for 16px body text).
Semantic Naming for Design Tokens
Don't name a token by its value (blue-500); name it by its job (color.action.primary). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
Kerning, Tracking, and Leading: Spacing in Typography
Kerning adjusts space between two letters, tracking adjusts space across a whole word, and leading controls vertical line spacing. These are used in UI and branding to improve readability. The footgun is confusing kerning (pairs) with tracking (groups).
Cognitive Load: Don't Make Users Think (Too Hard)
Think of a user's brain like a computer with limited RAM; cognitive load is the processing power your UI demands. High load from cluttered interfaces slows users down, causing them to miss details or abandon tasks.
"Miller's Law" is Ambiguous and Often Misused
"Miller's Law" isn't one rule, but a name for four distinct, unrelated principles. This ambiguity causes confusion in fields like psychology and computer science.
Hick's Law: More Choices, Slower Decisions
Hick's Law states that decision time increases logarithmically with the number of choices. It's why complex menus slow users down, forcing them into analysis paralysis.
Fitts's Law: Bigger, Closer Targets Are Faster to Hit
Fitts's Law predicts that the time to hit a target depends on its distance and size. This is why mobile buttons are large and context menus appear at your cursor. The footgun is making everything huge, which sacrifices information density and visual hierarchy.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles