How would you structure variables and expressions for a price configurator?
This tests reactive state modeling in Figma. A strong answer uses a string variable for the base model and booleans for add-ons, binding the price text to an expression that maps the base to its cost and sums active extras.
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.
Build a Figma toggle switch that controls element visibility using variables
Tests prototype state management with Figma variables instead of frame duplication. A strong answer names a boolean variable, binds it to layer visibility, and wires an On click Set variable action. Red flag: suggesting frame duplication over variable state.
Monolithic or multiple libraries for cross-platform design system?
This tests cross-platform design system architecture. Pick multiple interconnected libraries, centralize tokens in a shared primitive layer, and branch platform components downstream. Red flag: one monolithic file ignoring native rendering constraints.
How do you merge a Figma branch and resolve component conflicts?
WHAT IT TESTS: Figma branching and component conflict resolution. ANSWER OUTLINE: Review main changes, open conflict picker, compare side-by-side, accept or blend component edits, publish library updates.
How would you structure file covers and naming to communicate design status
Tests self-serve design ops for cross-functional partners. Strong answers cover color-coded covers, prefixed names with status and version, and role-based permissions. Red flag: relying on Slack updates instead of file-based clarity.
How do you update a component in a published Figma team library?
WHAT IT TESTS: Design ops maturity and Figma library governance. ANSWER OUTLINE: Edit main, publish with notes, consumers get update alerts, review or bulk-accept, verify overrides.
How do you structure Figma pages for a new project and handoff?
What it tests: systems thinking and empathy for cross-functional workflows. A strong answer names a Cover page, separate WIP and Handoff pages, and a linked component library with consistent naming.
How do you translate Figma Smart Animate into CSS or JS?
WHAT IT TESTS: Bridging design tools to code with fidelity. OUTLINE: Convert easing to cubic-bezier or library curves, match ms values, animate transform and opacity, escalate layout shifts to JS.
How would you implement a high contrast mode theme in Figma?
Tests token architecture and non-text contrast beyond color swaps. Strong answers use Figma variable modes, cover icon inversion, focus ring specs, define image treatments. Red flag: calling it palette inversion without citing 3:1 contrast or focus specs.
How would you architect Figma components and styles for light and dark themes?
This tests token-based system thinking and Figma variable scoping. A strong answer maps primitives to semantic tokens, binds components to semantic variables, and switches modes at the page level.
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 do you review and accept shared library component updates?
WHAT IT TESTS: Figma library audit workflow and grasp of override and handoff risks. ANSWER OUTLINE: Inspect Updates, accept selectively to preserve overrides, and notify stakeholders. RED FLAG: Blind Update all clicks or mass detaching to dodge conflicts.
How would you prototype a shared currently playing state in Figma?
This tests global state via Figma variables. Use one string variable for the active track; bind list and miniplayer to it via component properties; wire taps to update the variable. Avoid duplicating state per frame or faking persistence with overlays.
Prototype a conditional Submit button with Figma variables
Tests boolean logic in Figma prototyping. Strong answers bind inputs to string variables, conditionally check that email and password are non-empty, then toggle a boolean to enable Submit.
How do Figma Variables and component properties enable theme switching?
Tests binding semantic variable collections to component layers for theme switching. Outline: create Light/Dark modes, apply variables to fills, spacing; override modes on instances. Red flag: separate masters per theme or using colors in component properties.
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
WHAT IT TESTS: Figma properties to limit variants while keeping cards editable. ANSWER OUTLINE: Boolean toggles image; Text properties override title and description; auto layout handles reflow.
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?
WHAT IT TESTS: Graph-versus-list data structures in design tools. ANSWER OUTLINE: Contrast Figma's graph model, where nodes support many edges, with linear paths; give a branching icon example showing shared vertices.