More in UI Design & Figma — page 5
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 export and optimize a Figma SVG for web?
This tests your design-to-code workflow. A strong answer covers: selecting the vector layer, adding an SVG export in the right sidebar, and running the output through SVGO to strip metadata and flatten transforms.
Walk me through inspecting a component's styling in Figma Dev Mode
WHAT IT TESTS: Dev Mode handoff workflow vs Design Mode. ANSWER OUTLINE: Press Shift+D; find the ready-for-dev frame in the left sidebar; click to center it; inspect colors, typography, and spacing. RED FLAG: Staying in Design Mode or editing the file.
How do you indicate sort state accessibly in a data table?
WHAT IT TESTS: Communicating sort state without relying on color alone. ANSWER OUTLINE: 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.
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.
How do you migrate a breaking change in a mature design system?
This tests organizational change management at scale, not just code changes. A strong answer covers SemVer major versioning, beta testing with key consumers, phased deprecation timelines, and automated file audits.
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.
Steps to publish color and text styles to a Figma shared library
WHAT IT TESTS: Figma shared-library mechanics. ANSWER OUTLINE: Open Publish in the right panel, select color and text styles, add a version note, publish; teammates enable the library. RED FLAG: Manual copy-paste instead of publish-subscribe.
How would you prototype fixed header, footer, and scrollable content?
WHAT IT TESTS: Figma overflow controls for fixed header and footer. ANSWER OUTLINE: Make content taller than frame, enable Clip content and vertical overflow, then fix header and footer. RED FLAG: Multiple frames or manual drag instead of native overflow.
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.
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.
Super button versus composition: discuss trade-offs and scalability
Tests combinatorial explosion and API trade-offs in design systems. Contrast the super button's exponential growth with composition's explicit APIs and linear scalability, noting governance needs. Red flag: absolutism or ignoring type safety and tree-shaking.
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.
Create a button component with default, hover, and disabled variants
This tests Figma component variants and prototyping. A good answer: create a component set with a State property, build default, hover, and disabled variants, wire Change to with While hovering. Red flag: separate components instead of one variant set.
Build a responsive feature grid with nested Auto Layout and component properties
This tests nested Auto Layout fluency for responsive grids. Strong answer: vertical section frame with wrapping horizontal row, cards with 280 px min widths, and component properties to swap content. Red flag: duplicating static artboards per breakpoint.