Intermediate everything in Design & UX, page 15
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.
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 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.
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 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.
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.
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.
How do you handle versioning and breaking changes in a shared library?
This tests bridging design and engineering workflows. A strong answer covers semantic versioning, a protected main file with branching, a visible changelog, and release alignment with code.
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.
Build a reusable checkbox with unchecked, checked, and hover states
Tests Figma interactive components. Answer: create a component set with unchecked, checked, and hover variants; wire them with Change to actions using On click and While hovering triggers.
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.
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.
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.
How do Hug, Fill, and Fixed resizing behaviors interact?
This tests constraint-based size propagation. Define Hug as shrink-wrapping, Fill as stretching to the parent, and Fixed as explicit; note a Hug parent expands for Fixed or Hug children, but Fill needs a defined parent size.
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 do you enforce proximity with Figma Auto Layout and spacing variables?
Tests translating Gestalt proximity into systematic spacing. Strong answers map t-shirt scales to Auto Layout gap and padding, then bind them to Figma spacing variables. Red flag: confusing proximity with alignment or manual nudging.
How do you build a responsive Figma component across breakpoints?
Tests Figma auto layout and constraint logic for responsive components. Strong answers mention nested frames, hug/fill modes, breakpoint variants or variables, and resizing previews. Red flag: copying static frames instead of using constraints.
How would you optimize and implement a full-bleed responsive hero image?
Use srcset with AVIF/WebP, CSS object-fit cover, and width/height to prevent CLS.
Assess WCAG AA contrast for light grey text on off-white
Tests your fluency in WCAG relative luminance and design collaboration. A strong answer extracts sRGB values, computes contrast ratio, checks 4.5:1 or 3:1 by text size, and suggests a darker tint preserving hue.
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