Prototyping
49 bites tagged Prototyping — interview questions with model answers, and 60-second explainers.
Diagnose a slow, laggy Figma prototype
Heavy raster images and effects, layer and node count, and excessive prototype interactions. ability to debug Figma performance systematically. blaming the device or vaguely saying delete things without a method.
Prototype a draggable carousel with On Drag
Lay frames side by side, use On Drag with Smart Animate, and clamp ends. practical mastery of Figma interactive prototyping. reaching for On Click taps instead of drag, or forgetting boundary states.
How would you mitigate latency in a low-bandwidth remote usability study?
Tests planning for 2-5Mbps rural 3G research constraints. Strong answers cover: lightweight prototypes with compressed assets; 3G-throttled environments plus backup comms; data-cost compensation. Red flag: heavy screen-share tools without offline fallbacks.
What trade-offs matter between moderated usability tests and surveys?
Whether you align research method to product risk and insight type. Great answers contrast surveys for scalable opinions against moderated tests for behavioral observation, weighing fidelity and speed.
How would you architect interdependent filter variables in a complex dashboard?
Tests reactive variable graphs, not interaction tangles. Strong answers centralize Figma variables, bind component properties to them, and chain conditional actions to derive downstream state. Red flag: duplicating frames instead of using variables and logic.
Describe how you would use variables and conditional logic to simulate input validation
Tests dynamic state management in Figma prototypes. Strong answers use a string variable bound to the password field, check length on submit, and conditionally route to error or success. Red flag: hardcoding static frames without variables.
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.
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 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.
Create a counter where clicking '+' increases the number by one
Tests Figma number variables and Set variable action. Use a number variable on the text, then add an On click trigger on the plus button with Set variable and an expression to add one. Red flag: using duplicate frames instead of a single dynamic variable.
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.
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.
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.
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.
Gamified Prototypes: Test Loops Before Code
A gamified prototype tests motivation loops without code. In Figma, you simulate points and badges with variants and Smart Animate to validate reward timing before engineers build scoring logic.
Simulate Form Validation in Figma
A form prototype is an interactive script, not a picture. You pre-build every state — empty, typing, error, success — and link them so stakeholders feel validation timing before engineers code it. The trap is logic you cannot maintain across design changes.
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.
Conditional Logic in Figma Prototypes
Conditional logic turns static click-throughs into state-aware flows. Use it to unlock a button only after form fields are valid, or to branch checkout based on payment method. The footgun is building a brittle fake app instead of a focused testable flow.
Get Prototyping bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.