UI Design
57 bites tagged UI Design — interview questions with model answers, and 60-second explainers.
Why use button variants instead of separate components per state?
Tests Figma component set organization and scalability. Strong answers cite flexible property mixing, reduced combinatorial bloat, and cleaner dev handoff. Red flag: saying only "it's cleaner" without naming navigability or system integrity.
How do you populate one overlay for three profiles using variables?
Tests Figma variables and advanced prototyping. Use Set variable actions on each profile to update a string variable bound to a single overlay's name, plus instance swap for the avatar, then open that overlay.
How would you conditionally enable Submit after checking a terms checkbox?
Tests Figma advanced prototyping with boolean variables and conditionals. Strong answer: create a boolean for checkbox state, set it on click, then conditionally enable Submit only when true.
How do you restore one component from Figma version history?
Tests whether you know version history is file-level. Answer: open the file name menu, show version history, find the ~1h autosave, duplicate it to a new file, copy the component, paste back. Red flag: restoring the entire old version and losing later work.
Minimum WCAG AA contrast for normal vs large text and Figma checks
This tests WCAG AA contrast thresholds and Figma operationalization. A strong answer states 4.5:1 for normal text and 3:1 for large text, then describes using Figma's native contrast panel or Stark to audit color pairs.
What is the accessibility problem with color-only status and two fixes?
This tests WCAG 1.4.1 Use of Color: red-green status is invisible to many colorblind users. A strong answer names two non-color cues like icons or text labels. A red flag is claiming high contrast alone fixes the problem without a secondary visual indicator.
Steps to publish color and text styles to a Figma shared library
Open Publish in the right panel, select color and text styles, add a version note, publish; teammates enable the library. Figma shared-library mechanics. Manual copy-paste instead of publish-subscribe.
How would you prototype fixed header, footer, and scrollable content?
Make content taller than frame, enable Clip content and vertical overflow, then fix header and footer. Figma overflow controls for fixed header and footer. Multiple frames or manual drag instead of native overflow.
Explain Figma Smart Animate's core principle and layer matching requirements
Tests Figma's layer-matching logic for prototyping. Great answers cover: name-based matching between frames, compatible layer types, and interpolated properties like position and size.
Make a Figma button navigate from Frame A to Frame B
Tests hands-on Figma prototype workflow. Good answer: enter Prototype mode, select the Login button, drag the interaction noodle to Frame B, set trigger to On Click and action to Navigate To.
What is the most efficient way to update a brand color globally?
This tests Figma variables versus styles for design system maintenance. Store the brand color as a variable, apply it across components, and edit the value once for global propagation. Red flag: manual updates or using a color style for a single raw value.
How would you configure a wrapping filter tag container and its properties?
This tests horizontal wrap vs grid and tuning container and child resizing. Set the container to horizontal auto layout with wrap, adjust spacing and padding, and set tags to hug contents. Red flag: confusing wrap with grid or suggesting manual breaks.
When would you use absolute position in an Auto Layout frame?
Absolute position lets badges float without pushing siblings; standard flow stacks sequentially and prevents overlap. When to escape Auto Layout flow for overlaps. Using spacer hacks instead of the absolute toggle.
How do you pin a Close icon to a modal's top-right corner?
This tests Figma constraint knowledge for responsive resizing. A strong answer sets horizontal to Right and vertical to Top so the icon pins to the corner as the modal resizes.
How do you build a responsive card with Auto Layout?
Tests nested Auto Layout and resizing logic. Answer: vertical hug frame, nested vertical text stack with hug height, image set to fill width, plus padding. Red flag: fixed-height text or absolute positioning breaks responsiveness.
How does affordance guide choosing a native button over a styled div?
This tests if you see affordance as built-in behavior, not only looks. A strong answer picks the native button for free keyboard, focus, and reader support, noting a div needs tabindex, role, and keydown logic. A red flag is treating it as purely visual.
Section-Scoped Variable Modes in Figma
A Figma section acts as a local variable mode override, letting you park dark-mode beside light-mode on the same page. Watch out for nested sections: conflicting mode overrides stack silently, and the deepest scope always wins without warning.
Generative AI Plugins in Figma
Figma AI plugins are a junior designer on demand: prompt for UI, copy, or images and get editable layers. Use them to unblock frames. Never ship raw output; generated layers break auto-layout and ignore accessibility, so treat them as scratchpads, not specs.
Multi-Edit: Type Once, Update Everywhere
Multi-edit lets you type into several text layers at once, like a keyboard wired to multiple screens. Use it to rename buttons across a flow or update labels before componentizing. It is a one-off bulk edit, not a persistent link, so missed layers stay stale.
Figma Command Palette: A Universal Remote
Figma's Command Palette is a searchable speed dial: press Cmd/Ctrl + P to jump pages, run plugins, or tweak layers without the mouse. It rescues you from nested submenus mid-flow. The footgun is memorizing shortcuts you could simply type to find.
Dynamic Counter: State in Figma
A dynamic counter wires a number variable to a text layer, letting taps change the value. Use it for quantity steppers or pagination in prototypes. The footgun is skipping the text-to-variable binding, so clicks fire but the on-screen number never updates.
Figma Branch Reviews: Merge Gates for Design
A Figma branch review is a merge gate: reviewers diff changes against main and approve before merge. Use it when designers share a system or a lead must sign off. The footgun is rubber-stamping and missing broken component links that corrupt the main file.
Figma File Covers as Status Billboards
A Figma cover page turns your file thumbnail into a status billboard, showing if a design is draft or ready for dev without opening it. Teams with many files use covers as scannable dashboards. Outdated badges send developers hunting for nonexistent specs.
Handoff Plugins Bridge Figma to Code
Handoff plugins are automated translators between Figma and code, turning visual specs into tokens or components. They speed up design systems where manual inspection is a bottleneck. The footgun is treating generated output as production-ready without review.
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.