Figma interview questions
Figma questions a UX / UI designer can be asked, from first job to senior. Open one to see the strongest answer and why it works.
What is Figma for, and what is it not?
The strongest answer: A place to try and share decisions — it is not the research, the a11y, or the shipped UI by itself
Why it works: Exactly. A tool. Done-in-Figma, missing states, and version folklore are how you fail the handoff.
- Figma shares decisions.
- It is not the research or the ship.
- Do not leave states to engineering.
- Do not hide unofficial versions.
In Figma, what does Auto Layout do, and what do hug and fill mean?
The strongest answer: It arranges children in a row or column with padding and a gap, so the frame resizes with its content — hug shrinks a frame to its children, fill lets a child take the space
Why it works: Right — it is a layout rule rather than a tidying helper, and hug versus fill is what makes components resize properly.
- Auto Layout is a resizing rule.
- Set direction, padding and gap.
- Hug: the frame follows children.
- Fill: the child takes the space.
You need three button states. How do you build them in Figma?
The strongest answer: As variants of one component — I do not draw three snowflakes that will drift
Why it works: Exactly. Variants. Snowflakes, hidden pages, and eng-invents-hover are how the system dies.
- Use component variants.
- Do not draw snowflakes.
- Do not hide states in a junk page.
- Do not leave hover to engineering.
A card looks right at the width you drew it, but dragging the frame wider leaves the button stranded in the middle.
What did you forget?
The strongest answer: Constraints — or Auto Layout. A child pinned to the left will not follow the right edge; pin it right, or let a layout with fill handle the resize
Why it works: Exactly — resize behaviour is something you specify in the file, and it is half of what handoff reads.
- Resize behaviour is designed, not assumed.
- Set constraints on every child.
- Prefer Auto Layout for lists and bars.
- Drag the frame before you hand over.
You need a card with a different icon and one extra line of text; a colleague says “just detach it”.
What do you do?
The strongest answer: Override the instance — swap the icon, edit the text, hide a layer — because a detached copy stops receiving library updates and quietly becomes a fork nobody maintains
Why it works: Right — overrides keep the link, and a change the component genuinely cannot make is a proposal to the system, not a detach.
- Override; do not detach.
- Swap, hide and edit inside the instance.
- Detaching ends library updates.
- Cannot do it? Propose a change.
The file has 40 pages named final. What do you change?
The strongest answer: One source of truth, named variants, and archive the rest — I do not add a 41st final
Why it works: Exactly. One truth. 41st, weekly files, and museum-40 are how eng picks the wrong grey.
- One source of truth + variants.
- Archive the rest.
- Do not add another final.
- Do not keep 40 as a museum.
Your button component has grown to forty variants: size, state, icon left, icon right, icon only, loading.
How do you simplify it in Figma?
The strongest answer: Separate what is truly a variant from what is a property: keep size and state as variants, and make the icons boolean and instance-swap properties with a text property for the label
Why it works: Exactly — properties collapse the combinatorial explosion that variants alone create, and the picker stays usable.
- Variants for states, properties for options.
- Keep size and state as variants.
- Booleans and swaps for the icons.
- Expose the label as text.
A second brand is coming, and the product already ships light and dark.
How do you set the files up so this does not become four libraries?
The strongest answer: Colour variables in collections with modes — one for brand, one for theme — and components that only ever reference the semantic variable, so switching a mode reskins a screen with no duplicate frames
Why it works: Right — the discipline is that no component holds a raw value; the modes then carry the whole difference.
- One library; modes carry the difference.
- Components reference semantic variables only.
- Collections with brand and theme modes.
- Never hardcode a raw value.
What is the staff bar for Figma as infrastructure?
The strongest answer: Versioned libraries, a deprecate path, and owners — I do not run the company on a desktop file called final
Why it works: Exactly. Version, deprecate, owners. Desktop-final, unpublished snowflakes, and bans fail the join to eng.
- Versioned libraries + deprecate + owners.
- Not a desktop final.
- Not unpublished snowflakes.
- Do not ban the tool to force talk.