All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 32
What is component nesting? Build a profile header from nested components.
Tests atomic design and system scalability. Answer: define nesting as instances inside a parent; describe a profile header using Avatar, Text, and Button instances; note base edits propagate globally. Red flag: one-off layers instead of reusable instances.
How would you create a dismissible modal dialog over the current screen?
This tests modal architecture beyond visuals. A strong answer covers: dimming the inert background, trapping focus, returning focus on close, and supporting Escape plus a visible close button.
Prototype a draggable carousel with On Drag
Lay frames side by side, use On Drag with Smart Animate, and clamp ends.
Diagnose a slow, laggy Figma prototype
Heavy raster images and effects, layer and node count, and excessive prototype interactions.
How would you use variants, booleans, and instance swap for a Button?
This tests fluency in Figma component properties for scalable design systems. Map variant properties to states, booleans to toggle the icon layer, and instance swap to change the icon type. Never suggest detached overrides or separate components per state.
How would you structure Figma files for a new design system?
Tests Figma memory limits and library publishing. Strong answers split files by type—tokens, icons, components—and publish each as shared libraries to limit memory and enable parallel ownership.
Difference between detaching and pushing overrides to main?
Tests component governance: detaching severs the link for local one-offs, while pushing overrides sends instance changes back to the main component globally. Strong answers contrast local versus library-wide scope and name specific scenarios.
Make a complex component accessible by design
Define keyboard model and focus order, map to ARIA roles and states, and document interactions for engineers.
Difference between duplicating a page and branching in Figma
This tests version control hygiene in design files. A strong answer contrasts file-bloating duplication with isolated, reviewable branches, and names branching as superior for active projects where main must stay stable and changes need review before merge.
How would you implement a light and dark mode theme switcher?
Tests scalable theming via Figma variable modes, not manual duplication. Create a color collection with Light and Dark modes, bind variables to component fills, then switch modes to toggle themes.
Which Figma plugin populates tables with realistic user data?
Tests Figma content automation. Name a plugin like Content Reel, select layers to apply text strings and image collections for names, emails, and avatars at once, and cite grouped content to keep rows aligned. Red flag: manual entry or mismatched placeholders.
How do you use boolean properties for optional icon and chevron?
This tests Figma boolean properties for avoiding variant explosion. A strong answer toggles icon and chevron visibility on one component for all four states. A red flag is creating variants for every permutation or manually hiding layers on instances.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens.
How do you structure and maintain a Figma component library for scale?
This tests scalable Figma architecture bridging design and engineering. Strong answers cover atomic structure, variant booleans, auto-layout, and Dev Mode docs. Red flag: treating Figma as static mockups without properties or naming conventions.
Refactor a legacy UI for accessible DOM flow
Align DOM order with reading order, use semantic landmarks and headings, and ensure a sensible tab order with managed focus.
How would you generate a functional palette from one brand color?
Tests systematic color scaling and accessibility. Strong answers use HSL/LCH lightness stops, enforce 4.5:1 text contrast, build 50-900 surface weights, and derive semantic hues independently. Red flag: manual hex tweaks without contrast checks.
Discuss custom web font performance and loading strategies
Critical rendering path tradeoffs between speed and design fidelity. Strong answers match font-display to UX goals, combine preloading with subsetting, and quantify byte savings. Red flag: calling swap a free win while ignoring layout shift from reflow.
How would you architect a Figma-to-code icon system?
Tests design-to-code systems thinking. Strong answers cover Figma variables as source of truth, automated API exports into transformed versioned packages, and strict naming taxonomy. Red flag: manual SVG exports and developers editing assets by hand.
Explain an 8-point grid and Figma spacing tokens setup
Tests your ability to systemize visual rhythm and encode it in Figma variables. Strong answers cite an 8pt base, define a 4/8/16/24/32/48/64 scale, and publish semantic tokens. Red flag: arbitrary values or manual nudging without variables.
What is the difference between a column grid and a modular grid?
This tests layout hierarchy. Column grids divide space vertically for responsive marketing pages. Modular grids add horizontal rows to form rigid two-dimensional cells for dense dashboards. A red flag is calling grids purely decorative.