Top 30 Figma Interview Questions and Answers
30 multiple-choice questions on Figma, drawn from 30 bites out of the 208 tagged Figma on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
Which of the following best describes how a design system enforces consistency at scale?
Show the answer
Answer: b · It integrates reusable coded components, design tokens, and documentation across both design tools and code repositories
A design system enforces consistency by uniting coded components, tokens, and documentation across design and engineering, not just through design assets. Calling it merely a shared Figma file is a common misconception because it misses the engineering adoption and version-controlled code that actually standardizes implementation.
Read the full bite: What is a design system's purpose and how does it enforce consistency?
Question 2 of 30
When building a modular type scale for a dense B2B dashboard, which approach best balances mathematical consistency with real-world UI constraints?
Show the answer
Answer: d · Start with a low ratio like 1.125, round to even pixels, and manually add smaller steps for metadata tags if needed
For a dense dashboard, a low ratio like 1.125 prevents extreme jumps, while rounding and manually adding small steps addresses real UI needs that strict modular math often misses. Defaulting to the marketing site's ratio prioritizes brand consistency over content density, which leads to awkwardly large sizes in data-heavy interfaces.
Read the full bite: How would you establish a modular typographic scale for a design system?
Question 3 of 30
Why should icons in a developer-facing Figma system use a single flattened path without hardcoded fills?
Show the answer
Answer: c · It lets the icon inherit color in code via currentColor, supporting theming
A single color-agnostic path lets the icon inherit its color through currentColor, so one icon serves multiple themes. Hardcoded fills can be exported but block recoloring; flattening is not required for publishing.
Read the full bite: Building a scalable icon system in Figma
Question 4 of 30
Which CSS strategy best mirrors a Figma two-tier token system with Light, Dark, and High-Contrast modes?
Show the answer
Answer: d · Semantic custom properties reference primitive variables and are redefined under theme attribute selectors like [data-theme="dark"].
Redefining semantic custom properties under theme selectors preserves the abstraction where components use only semantic tokens, matching Figma's mode behavior. Option A breaks this architecture by letting components bind directly to primitives, creating maintenance debt when brand values change.
Read the full bite: How would you structure a multi-theme color system in Figma and CSS?
Question 5 of 30
What is the primary benefit of applying the Rule of Thirds in visual composition?
Show the answer
Answer: a · To create a more dynamic and engaging composition that guides the viewer's eye.
The Rule of Thirds aims to create dynamic and engaging compositions by guiding the viewer's eye, as stated in the card. Option C is incorrect because the rule intentionally moves away from perfect symmetry to achieve this dynamism.
Read the full bite: Rule of Thirds: Guide the Eye, Don't Just Center
Question 6 of 30
According to the card, what is the fundamental difference between a color scheme and an arbitrary collection of colors?
Show the answer
Answer: a · A color scheme provides a systematic framework for color choices to achieve a specific goal.
The card defines a color scheme as a "logical combination of colors to achieve a goal" and a "framework for making deliberate, effective color choices that serve a specific purpose." While aesthetic harmony can be a goal, the core distinction is the systematic, purpose-driven nature, not just visual appeal.
Read the full bite: Color Schemes: The Logic of Color Harmony
Question 7 of 30
Which workflow best shows a systemic approach to making a Figma component responsive across breakpoints?
Show the answer
Answer: a · Apply auto layout to the parent frame, set children to hug or fill, use variants for breakpoints, and resize to test
The correct approach leverages Figma's native auto layout, hug/fill constraints, and variants to create self-adjusting components, then stress-tests them by resizing. The tempting distractor using only vertical auto layout is wrong because vertical stacks do not automatically reflow into columns without enabling wrap or switching to a horizontal or grid flow.
Read the full bite: How do you build a responsive Figma component across breakpoints?
Question 8 of 30
Which method best operationalizes Gestalt proximity using Figma Auto Layout and spacing variables for a scalable design system?
Show the answer
Answer: d · Bind a shared t-shirt spacing scale to Auto Layout gap and padding variables, giving related elements smaller gaps and unrelated groups larger ones.
This is correct because it maps a shared token scale to Auto Layout gap and padding variables to enforce relational spacing that survives content changes. Option B is tempting because custom values feel tailored to each component, but they prevent systematic consistency and break the ability to propagate token updates across the design system.
Read the full bite: How do you enforce proximity with Figma Auto Layout and spacing variables?
Question 9 of 30
What is the primary advantage of converting standardized icons into Figma Main Components within an icon system?
Show the answer
Answer: a · It allows for consistent, simultaneous updates across all instances of an icon in a design.
The card states that using main components allows you to "update an icon's color or shape in one place and have it propagate everywhere." While other options might be related benefits of a good icon system, the core advantage of a Figma Main Component is enabling global updates to all its instances. Option D, while related to constraints, isn't the primary benefit of the component itself, and perfect scaling without distortion also depends on the icon's original design.
Read the full bite: Icon System Design: Build Once, Use Everywhere
Question 10 of 30
When optimizing a Figma product card with an image, title, price row, and multi-line tags, which approach best reduces nesting depth while preserving responsiveness?
Show the answer
Answer: d · Replace the tag container with horizontal auto layout using Wrap, and remove redundant intermediate grouping frames
The card states that enabling Wrap avoids separate row containers and that removing redundant grouping frames cuts layer depth and constraint recalculation in half. Option A sacrifices responsiveness, option C increases layer count with spacers, and option B bloats the file with duplicate layers.
Read the full bite: How do you optimize nested Auto Layout for performance?
Question 11 of 30
You are building a mobile prototype where a list of cards must scroll vertically and be clipped at the viewport edges. What should wrap the list?
Show the answer
Answer: c · A Frame, because it lets you clip content and enable scroll overflow
A Frame is correct because it has independent bounds that support Clip content and scroll overflow when child layers exceed its edges. Option A is tempting because both Groups and Frames organize layers, but Groups do not provide bounds-based clipping or scroll overflow.
Read the full bite: When would you wrap layers in a Frame versus a Group?
Question 12 of 30
What is the most reliable first step to extract exact CSS typography values from a Figma text element?
Show the answer
Answer: c · Select the text layer, then check the Properties tab or Dev Mode for exact values
You must select the specific text layer because the Properties tab and Dev Mode display exact typography values only for the selected object. Selecting a parent frame is a tempting but wrong first step because it hides the precise font properties and leads to approximations.
Read the full bite: How would you inspect a Figma text element for CSS properties?
Question 13 of 30
You are building a responsive Figma card with Auto Layout that must fill its container width and expand vertically when the description text grows. Which setup achieves this?
Show the answer
Answer: c · Nest the headline and description in a vertical Auto Layout frame with hug height, set the parent card to hug contents vertically and fill container horizontally, and set the image to fill width
Nesting the text in a hug-height frame allows the parent to expand vertically as copy grows, while fill-width on the image and fill-container on the parent handle horizontal responsiveness. Option D is tempting because fixed height seems to help grid alignment, but it prevents the card from growing and will clip content when the text expands.
Read the full bite: How do you build a responsive card with Auto Layout?
Question 14 of 30
In Figma, a 24×24 Close icon must stay pinned 16px from the top and right edges of a modal Frame when resized. Which approach achieves this?
Show the answer
Answer: c · Set horizontal to Right and vertical to Top on the icon inside the modal Frame
Setting the icon to horizontal Right and vertical Top inside the modal Frame pins it to the corner while keeping its size fixed. Option A is tempting because it names the correct constraint values, but constraints do not work inside Groups, so the icon must be a direct child of the Frame.
Read the full bite: How do you pin a Close icon to a modal's top-right corner?
Question 15 of 30
Which feature is a defining characteristic of Figma's Auto Layout Grid, distinguishing it from simple horizontal or vertical Auto Layouts?
Show the answer
Answer: a · It allows individual child items to span across multiple rows or columns.
The card states that the power of Auto Layout Grid is that individual items can be configured to span multiple columns or rows, which is a key differentiator. It explicitly warns that items do not wrap, making option B incorrect.
Question 16 of 30
What is the main purpose of a focal point in design, and what common pitfall should be avoided?
Show the answer
Answer: d · To establish a clear visual hierarchy by emphasizing one dominant element; avoiding multiple competing points of interest.
A focal point's primary goal is to create a clear visual hierarchy by making one element dominant, guiding the user's eye. The most common pitfall is attempting to emphasize everything, which results in competing focal points and visual confusion.
Read the full bite: Focal Point: You Can't Emphasize Everything
Question 17 of 30
When architecting a scalable light/dark theme system in Figma using variables and styles, where should the mode-switching logic primarily reside?
Show the answer
Answer: b · In semantic color variables, by aliasing different primitive values per mode and applying those variables to styles.
Semantic variables act as the raw engine for mode switching by aliasing different primitives per context, while styles should consume those variables rather than own the logic. A is a common misconception because Figma styles cannot directly switch modes, and D mirrors the inefficient practice of manually swapping libraries.
Read the full bite: How would you structure Figma colors for light and dark themes?
Question 18 of 30
Which configuration lets a Figma button with an icon and text automatically resize when the label changes?
Show the answer
Answer: b · Apply horizontal auto layout, set text and frame to hug contents, and use fixed padding
Horizontal auto layout with hug contents on the text and parent frame lets the button expand or shrink dynamically as the label changes, while fixed padding keeps spacing consistent. Grouping layers and manually nudging them is wrong because the layout breaks as soon as the text is edited, defeating the purpose of a responsive component.
Read the full bite: How would you use Auto Layout for a button with optional icon?
Question 19 of 30
How does a 16px fixed spacing behave compared with Space between when an Auto Layout toolbar stretches wider?
Show the answer
Answer: c · Fixed spacing keeps the 16px gap identical and clusters icons, while Space between pushes the first icon to the left edge and the last to the right edge
Fixed spacing is an absolute value that never changes, so icons remain clustered when the frame grows, while Space between dynamically divides leftover space to push the first and last items flush to the edges. The reversed option is wrong because it swaps the two behaviors—fixed spacing does not distribute items evenly, and Space between does not enforce a rigid pixel gap.
Read the full bite: Difference between 'Space between' and fixed spacing in Auto Layout
Question 20 of 30
What is the primary benefit of a modular grid compared to a simple column grid?
Show the answer
Answer: c · It provides a structured system for aligning elements consistently across both rows and columns.
The card explains that a modular grid extends a column grid with horizontal rows, creating a matrix of cells that provides "two-dimensional control" for "perfect alignment in both directions" for repeating elements. Option C accurately describes this core advantage. Options A and D describe scenarios where a modular grid is explicitly stated as not suitable, making them plausible but incorrect distractors.
Read the full bite: Modular Grid: Organizing UI with Cells, Not Just Columns
Question 21 of 30
In which scenario should a designer deliberately break rhythmic repetition rather than maintain it?
Show the answer
Answer: b · A multi-step checkout wizard that demands deliberate, sequential attention
The card states that sequential flows like checkout wizards benefit from intentional asymmetry that forces users to pause and focus. The email inbox option is a tempting distractor because the card explicitly cites Gmail and Outlook as keeping row structure sacred even when adding extras like avatars, precisely to preserve scanning momentum.
Question 22 of 30
Which same-axis parent-child combination creates a layout conflict because the parent cannot determine available space for the child?
Show the answer
Answer: b · Hug parent containing a Fill child
A Hug parent shrink-wraps to its content and has no definite available space, so a Fill child cannot resolve its size, creating a circular dependency. This differs from a Hug parent with a Fixed child, which works because the child declares a concrete dimension that the parent can wrap around.
Read the full bite: How do Hug, Fill, and Fixed resizing behaviors interact?
Question 23 of 30
To make the profile card grow taller with a longer bio while keeping width fixed, how should the outer vertical Auto Layout frame be set?
Show the answer
Answer: d · Fixed width and hug contents height, with the bio set to fill width and auto height
Fixed width locks the card's horizontal size while hug height lets it grow as the auto-height bio wraps. Fixed height clips text, and hug width would let the card widen with content.
Read the full bite: Profile card with nested Auto Layout sizing
Question 24 of 30
In which design scenario would a baseline grid offer the most significant benefit?
Show the answer
Answer: d · A marketing website featuring extensive long-form articles and detailed product descriptions.
A baseline grid is most beneficial for text-heavy layouts where typography is critical and readability is paramount, such as long-form articles. Scenarios like dashboards, artistic layouts, or simple UIs are explicitly mentioned as less suitable for a strict baseline grid.
Read the full bite: Baseline Grid: Aligning Text for Vertical Rhythm
Question 25 of 30
A notification badge must overlap an avatar inside an Auto Layout frame. What is the best approach?
Show the answer
Answer: c · Set the badge to absolute position so it ignores flow but stays inside the frame
Absolute positioning removes the badge from the directional flow, letting it overlap the avatar without pushing sibling elements while the parent still resizes responsively. Moving the badge outside the frame is a tempting but wrong choice because it severs the responsive relationship and makes the component harder to maintain.
Read the full bite: When would you use absolute position in an Auto Layout frame?
Question 26 of 30
You are configuring a filter tag container in Figma that must push overflowing tags to the next line and automatically adjust when individual tag labels change length. Which setup achieves this?
Show the answer
Answer: a · Use horizontal auto layout with wrap on the parent, set container spacing and padding, and configure each tag to hug its contents
Horizontal auto layout with wrap pushes overflowing tags to the next line and adjusts container height automatically, while hugging contents lets each tag resize when its label changes. Grid organizes items into distinct columns and rows rather than wrapping a continuous flow, so it will not produce the desired dynamic wrapping behavior.
Read the full bite: How would you configure a wrapping filter tag container and its properties?
Question 27 of 30
Which method correctly architects a responsive Figma nav bar to preserve component links and handle breakpoint-specific layouts without detaching instances?
Show the answer
Answer: c · Create one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.
A single variant-driven component set with Auto Layout preserves maintainability and link propagation across states, whereas creating separate components breaks those links and creates maintenance debt.
Read the full bite: Structure a responsive nav bar using variants and Auto Layout
Question 28 of 30
When designing a reusable button component in Figma that requires a defined background color and consistent internal spacing (padding), which container type should be used?
Show the answer
Answer: d · A Frame, because it provides explicit boundaries and supports properties like background and clipping.
Frames are essential for UI components like buttons because they allow for explicit dimensions, background colors, and padding, and can clip content. Groups, conversely, are 'shrink-to-fit' and cannot define internal spacing or have their own background, making them unsuitable for components requiring such properties.
Question 29 of 30
When creating a shape in Figma, which keyboard modifier ensures it maintains perfect proportions, like a square or a circle?
Show the answer
Answer: a · Shift
The card explicitly states to "hold Shift while dragging to constrain proportions (making a perfect square or circle)." Option/Alt is used for drawing or resizing from the center point, not for constraining proportions.
Read the full bite: Figma Shape Tools: Your Design Building Blocks
Question 30 of 30
When a viewport shrinks from 1200 px to 375 px in a properly built Figma feature grid, what happens first to initiate reflow?
Show the answer
Answer: a · The outer vertical section frame narrows, causing the inner horizontal Auto Layout row with Wrap enabled to break cards onto new lines
The correct answer reflects the top-down propagation described in the card: the Fill-width section frame narrows, which triggers the horizontal row's Wrap to break cards onto new lines. The most tempting distractor is A because boolean properties are indeed used to manage content differences across breakpoints, but they do not automatically trigger based on viewport width in Figma's standard component model.
Read the full bite: Build a responsive feature grid with nested Auto Layout and component properties
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.