Practice Figma vocabulary: components, variants, auto-layout, constraints, prototyping, dev mode, and design linting terms.
0 / 5 completed
1 / 5
In Figma, 'auto-layout' is best described as:
Auto-layout turns a frame into a flex-like container — children stack horizontally or vertically, spacing is controlled by gap and padding, and the frame grows or shrinks as content changes. Essential for responsive components.
2 / 5
What are 'constraints' in Figma?
Constraints tell Figma how a layer should behave when its parent frame changes size — options include Left, Right, Center, Left & Right (scale), Top, Bottom, Top & Bottom, and Scale. Critical for responsive designs.
3 / 5
A designer says: 'I exposed a colour and text property on this component so consumers can change them without detaching.' What Figma feature are they describing?
Component properties (introduced 2022) let component authors expose specific values — fill colour, text content, visibility, nested instance swaps — directly in the properties panel, so users customise instances without breaking the link to the main component.
4 / 5
In Figma prototyping, what is an 'interaction trigger'?
Interaction triggers define what user action starts a prototype transition. Common triggers: On Click, On Drag, While Hovering, While Pressing, Key/Gamepad, After Delay, Mouse Enter/Leave. Paired with an action (Navigate to, Open overlay, Scroll to) and an animation type.
5 / 5
What is the purpose of Figma's 'Dev Mode'?
Dev Mode (launched 2023) gives developers a dedicated, read-only-by-default view with code snippets, spacing values, asset exports, and links to connected Storybook stories — streamlining design-to-code handoff without polluting the design canvas.