UI Design
57 bites tagged UI Design — interview questions with model answers, and 60-second explainers.
Profile card with nested Auto Layout sizing
Outer vertical frame set to fixed width and hug height, an inner horizontal frame for avatar and name, and a bio text set to fill width and auto-height so the card grows down. Auto Layout resizing rules.
Choosing a spacing scale for a design system
A numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them. turning spacing into a consistent system. free-form pixel values with no scale or rationale.
8 Free Personas Spot Accessibility Issues in Design
8 free accessibility personas shift designer burden from memorizing WCAG to recognizing exclusion during work. Applying Nielsen's heuristic #6 to creators means fewer bad websites from good designers. Add them to your design critiques this sprint.
Describe your process for preparing a high-fidelity Figma file for developer handoff
Tests operationalizing the design-engineering boundary. Strong answers cover file structure, auto-layout tokens, responsive annotations, all UI states, and exported assets with naming conventions.
Describe how you would use variables and conditional logic to simulate input validation
Tests dynamic state management in Figma prototypes. Strong answers use a string variable bound to the password field, check length on submit, and conditionally route to error or success. Red flag: hardcoding static frames without variables.
How would you use variables to calculate a real-time cart subtotal?
This tests reactive state in Figma using variables and expressions. Strong answer: store quantity in a number var, wire to a stepper, compute subtotal as qty times 25, and bind that to text. Red flag: static text or manual updates instead of live computation.
How do you implement design tokens in Figma for developer handoff?
This tests design-code token architecture. Strong answer shows three-tier system—primitive, semantic, component—matching developer naming, synced via Tokens Studio or native Variables. Red flag: styles with no developer-facing names or single source of truth.
How would you structure a flexible data table component in Figma?
Tests atomic design and Figma component architecture using slots and booleans. Answer: build a base row with swappable cell slots, booleans for checkboxes, and variant states for hover and selected. Red flag: detached instances or manual overrides per row.
Use Boolean and Text properties to build a flexible card component
Boolean toggles image; Text properties override title and description; auto layout handles reflow. Figma properties to limit variants while keeping cards editable.
Explain the difference between a Main Component and an Instance in Figma
Tests your grasp of Figma's component architecture and update flow. A Main Component is the source of truth; an Instance is a linked copy inheriting its properties. Edits update Instances except overridden values.
How do Figma vector networks differ from traditional vector paths?
Contrast Figma's graph model, where nodes support many edges, with linear paths; give a branching icon example showing shared vertices. Graph-versus-list data structures in design tools.
How would you use Auto Layout for a complex data table?
Tests systems thinking in scalable component architecture. A strong answer nests Auto Layout frames: Hug for row height, Fill for column width, and component properties for variants. Red flag: manual resizing or flat frames without nested rows and cells.
When should you use Frames versus Groups in Figma?
This tests your grasp of Figma's layout primitives and constraint behavior. A strong answer: Frames own constraints, auto layout, and clip content; Groups only pass transforms to children.
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.
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.
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.
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.
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 do you let designers swap a component's icon without detaching?
Tests Figma component properties. Answer: apply an instance swap property to the nested icon, set preferred instances from your icon library, and keep it as a component instance. Red flag: suggesting boolean properties or detaching.
How would you structure a complex reusable Figma table with Auto Layout?
Tests nested Auto Layout and component properties for scalable Figma tables. Build atomic hug/fill cells in horizontal row Auto Layout, then stack rows vertically. Expose cell-type swaps via component properties. Red flag: manual resizing or variant bloat.
Create a crescent moon in Figma using Boolean operations
Tests Figma vector workflow and layer hierarchy. A strong answer picks Subtract selection, places the cutter shape above the base, and notes the bottom layer sets fill and stroke. Confusing Subtract with Exclude or ignoring layer order is a red flag.
Figma Constraints vs Auto Layout: when are Constraints preferable?
This tests resizing logic in Figma. A strong answer states Auto Layout resizes frames to fit content, while Constraints make objects respond to parent frames. It then cites responsive containers, say fluid inputs.
What's the functional difference between wireframes, mockups, and prototypes? Describe a scenario.
This tests whether you distinguish structure, visuals, and interactivity. A strong answer defines each by fidelity and function, then names a lifecycle stage like using wireframes in discovery to align scope before visual design.
How do you change a nested Button's state from a Card instance?
Tests knowledge of nested component properties in Figma. A strong answer adds a variant property to the nested Button inside the Card main component so its state appears in the Card instance panel.
Get UI Design bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.