Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
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?
Inspect Updates, accept selectively to preserve overrides, and notify stakeholders. Figma library audit workflow and grasp of override and handoff risks. 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
Boolean toggles image; Text properties override title and description; auto layout handles reflow. Figma properties to limit variants while keeping cards editable.
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?
Contrast Figma's graph model, where nodes support many edges, with linear paths; give a branching icon example showing shared vertices. Graph-versus-list data structures in design tools.
How would you structure grids, spacing tokens, and components in Figma?
Tests balancing governance with autonomy via tokens. Propose base-8 semantic spacing tokens, responsive grid variants per breakpoint, and slot-based components with locked auto-layout. Red flag: rigid grids or hardcoded values that block platform needs.
How would you use Auto Layout for a complex data table?
Tests systems thinking in scalable component architecture. A strong answer nests Auto Layout frames: Hug for row height, Fill for column width, and component properties for variants. Red flag: manual resizing or flat frames without nested rows and cells.
When should you use Frames versus Groups in Figma?
This tests your grasp of Figma's layout primitives and constraint behavior. A strong answer: Frames own constraints, auto layout, and clip content; Groups only pass transforms to children.
Explain an 8-point grid and Figma spacing tokens setup
Tests your ability to systemize visual rhythm and encode it in Figma variables. Strong answers cite an 8pt base, define a 4/8/16/24/32/48/64 scale, and publish semantic tokens. Red flag: arbitrary values or manual nudging without variables.
How would you architect a Figma-to-code icon system?
Tests design-to-code systems thinking. Strong answers cover Figma variables as source of truth, automated API exports into transformed versioned packages, and strict naming taxonomy. Red flag: manual SVG exports and developers editing assets by hand.
How would you generate a functional palette from one brand color?
Tests systematic color scaling and accessibility. Strong answers use HSL/LCH lightness stops, enforce 4.5:1 text contrast, build 50-900 surface weights, and derive semantic hues independently. Red flag: manual hex tweaks without contrast checks.
How do you structure and maintain a Figma component library for scale?
This tests scalable Figma architecture bridging design and engineering. Strong answers cover atomic structure, variant booleans, auto-layout, and Dev Mode docs. Red flag: treating Figma as static mockups without properties or naming conventions.
How do you use boolean properties for optional icon and chevron?
This tests Figma boolean properties for avoiding variant explosion. A strong answer toggles icon and chevron visibility on one component for all four states. A red flag is creating variants for every permutation or manually hiding layers on instances.
Which Figma plugin populates tables with realistic user data?
Tests Figma content automation. Name a plugin like Content Reel, select layers to apply text strings and image collections for names, emails, and avatars at once, and cite grouped content to keep rows aligned. Red flag: manual entry or mismatched placeholders.
How would you implement a light and dark mode theme switcher?
Tests scalable theming via Figma variable modes, not manual duplication. Create a color collection with Light and Dark modes, bind variables to component fills, then switch modes to toggle themes.
Difference between duplicating a page and branching in Figma
This tests version control hygiene in design files. A strong answer contrasts file-bloating duplication with isolated, reviewable branches, and names branching as superior for active projects where main must stay stable and changes need review before merge.
Difference between detaching and pushing overrides to main?
Tests component governance: detaching severs the link for local one-offs, while pushing overrides sends instance changes back to the main component globally. Strong answers contrast local versus library-wide scope and name specific scenarios.
How would you structure Figma files for a new design system?
Tests Figma memory limits and library publishing. Strong answers split files by type—tokens, icons, components—and publish each as shared libraries to limit memory and enable parallel ownership.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.