Intermediate interview questions in UI Design & Figma, page 2
Design the keyboard interaction flow for a modal dialog
Your grasp of accessible focus management per WAI-ARIA dialog patterns. Cover initial focus rules, Tab trapping inside the modal, Escape to close, and restoring focus to the trigger on exit.
Designing and documenting focus order in Figma
Focus order is the sequence keyboard and screen-reader users traverse interactive elements; it should follow meaning and reading order, documented in Figma via layer order, numbered annotations…
How do you enforce WCAG touch target minimums in Figma?
Tests WCAG 2.2 SC 2.5.8 and design-system governance. A strong answer cites the 24x24 CSS pixel minimum and spacing exception, then covers Figma component constraints and linting. A red flag is dumping accessibility on developers without design guardrails.
How do you indicate sort state accessibly in a data table?
Use shape-differentiated icons, annotate aria-sort on the active header, and maximize the button click target.
Translate Figma Auto Layout padding, direction, and spacing to Flexbox
Tests your ability to bridge design tools and CSS layout mechanics. Match direction to flex-direction, padding to gap or container padding, space-between to justify-content, and hug/fill to flex-grow or flex-shrink.
How would you map Figma Variables to CSS Custom Properties for tokens?
This tests bridging Figma variable collections and modes into maintainable CSS. A strong answer maps collections to semantic CSS custom properties, supports mode switching via data attributes, and mirrors design system naming.
How do Figma variants influence component code structure?
Tests design-to-code translation and component API modeling. Map variant properties to semantic props like size and type; handle interactive states internally via CSS. Prioritize property names over pixel values.
How do you identify responsive breakpoints in Figma for CSS?
Tests if you derive CSS logic from Figma structure, not pixels. A strong answer checks auto layout direction changes, wrap toggles, and resizing rules to find behavior shifts, then maps those widths to queries.
What conflicts occur when two designers edit shared styles simultaneously?
Tests real-time style propagation. Strong answers note Figma instantly updates every linked object, so uncoordinated color edits surprise the second designer. Best practice: agree on ownership and publish via the team library.
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 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 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.
How do you process usability feedback into concrete Figma iterations?
Turning usability findings into traceable Figma iterations. A strong answer triages by severity and frequency, maps issues to annotated frames, and versions options in branches.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps.
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.
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.
Main components vs instances: how to use Component Properties for multi-state Buttons?
This tests Figma component architecture. A main component is the source; an instance is a linked copy. Use variant properties for state and style, plus booleans for optional layers. Red flags: separate components per state or ignoring property controls.
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.
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.
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.
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