Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens. token-driven theming in Figma. duplicating screens per theme or hardcoding hex values.
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.
Limitations of Figma Dev Mode generated code
Dev Mode output is static, absolute-positioned, non-semantic, and ignores responsiveness, state, and your component system; use it for values and structure, then refactor to semantic, tokenized… Realistic handoff expectations.
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… Accessibility of keyboard navigation.
Profile card with nested Auto Layout sizing
Outer vertical frame set to fixed width and hug height, an inner horizontal frame for avatar and name, and a bio text set to fill width and auto-height so the card grows down. Auto Layout resizing rules.
Building a scalable icon system in Figma
Standardize a grid, size, and stroke; make each icon a component with consistent naming, use currentColor-friendly single-color paths, and export optimized SVGs. Systematic, dev-friendly icon design.
Syncing design tokens from Figma to code
Export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI. a tokens pipeline with a single source of truth. manually copying hex values by hand.
Measuring designer efficiency from Figma data
Library component usage and detach rates from Figma, time-to-mockup, override frequency via the API. quantifying design-side ROI with real instrumentation. measuring only code adoption and ignoring the design tool entirely.
How would you architect Figma for multi-platform, multi-team products?
This tests design-ops systems thinking at scale. A strong answer outlines a tiered library model: platform-agnostic primitives, platform-specific components, and team files consuming shared libraries, plus governance for breaking changes.
How would you structure design and Figma for phased rollout?
This tests whether you can architect Figma for parallel flag rollouts. A strong answer covers branch pages, versioned components tied to code flags, and a cleanup timeline. A red flag is a single-file replacement or big-bang launch with no coexistence plan.
Describe your process for preparing a high-fidelity Figma file for developer handoff
Tests operationalizing the design-engineering boundary. Strong answers cover file structure, auto-layout tokens, responsive annotations, all UI states, and exported assets with naming conventions.
How do you handle a technically complex interaction and propose Figma alternatives?
Cross-functional negotiation and rapid prototyping under constraint. Defer judgment, quantify delay, co-define success, then use Figma variants and low-fi prototypes to test trade-offs. Never sacrifice UX before grasping engineering effort or business impact.
First Figma steps to turn a brief into low-fi concepts
This tests whether you structure IA before pixels. Strong answers audit the brief, map flows with simple frames, block out grayscale wireframes at target breakpoints, and annotate for async review. Red flag: jumping straight to components or color.
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 do you merge a Figma branch and resolve component conflicts?
Review main changes, open conflict picker, compare side-by-side, accept or blend component edits, publish library updates. Figma branching and component conflict resolution.
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?
Edit main, publish with notes, consumers get update alerts, review or bulk-accept, verify overrides. Design ops maturity and Figma library governance.
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?
Convert easing to cubic-bezier or library curves, match ms values, animate transform and opacity, escalate layout shifts to JS. Bridging design tools to code with fidelity.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.