Advanced concepts in UI Design & Figma
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.
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.
"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.
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.
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).
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.
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).
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.
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.
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'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.
Figma Expressions: Dynamic Prototypes with Logic and Math
Figma expressions are like mini-formulas in your prototype, letting you manipulate variables with math and logic. Use them to build shopping carts that calculate totals or progress bars that fill up.
Figma Video: It's a Fill, Not a Layer
Treat video in Figma as just another fill, not a special layer. Apply it to any shape to prototype video players or motion backgrounds. The footgun is forgetting it requires a paid plan to upload and won't play in the Figma mobile app.
Figma: Stacking Multiple Interactions on One Object
Stack multiple interactions on a single Figma object by treating each as a separate event listener, like onClick and onHover. This is essential for components with hover states that also need to navigate.
Measuring Design System ROI: From Cost to Investment
Frame a design system not as a cost but as a force multiplier for your team's time. Calculate its ROI to show management how much money reusable components and clear standards will save.
Screen Readers: Designing for a Non-Visual UI
A screen reader navigates your UI's invisible DOM structure, not its visual layout. Think of it as a text adventure where headings are rooms and links are doors. This is essential for all web UIs, checked via alt text and keyboard focus.
Designing for Reduced Motion
Treat UI animations as an enhancement some users must disable for comfort. The prefers-reduced-motion media query lets you respect system-level accessibility settings, preventing vestibular triggers.
Figma Accessibility Annotations: Spec for Developers
Accessibility annotations embed a11y specs directly into your Figma file, translating visual design into build instructions. They're used during handoff to specify screen reader order and roles. The footgun is inconsistency; use a plugin or a system.
Figma Versioning for Clean Developer Handoff
Treat Figma's version history like a Git commit log, not just an undo. Create named versions to give developers a stable, immutable design target for handoff, preventing them from building against a file that's still in flux.
Figma Dev Mode: Visually Diff Your UI
Treat UI changes like a code diff. Figma's Dev Mode lets you visually compare component versions side-by-side or as an overlay. This helps you see exactly what changed between handoffs, preventing drift. The footgun is ignoring the code and property diffs.
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