Figma Figma Components and Variants 1 — Questions and Answers
Question 1: What is the keyboard shortcut to create a component from a selected frame or object in Figma?
- Ctrl+K
- Ctrl+Alt+K (Correct answer)
- Ctrl+Shift+K
- Alt+K
Correct answer: Ctrl+Alt+K
Press Ctrl+Alt+K (Cmd+Option+K on Mac) to instantly create a component from a selected element.
Question 2: What must all variants in a Figma component set share?
- The same layer count
- The same size
- The same base component name prefix (Correct answer)
- The same fill color
Correct answer: The same base component name prefix
All variants in a component set must share the same component name prefix, separated by a slash or comma convention.
Question 3: Which panel in Figma allows you to define variant properties like State or Size?
- Layers panel
- Design panel under Component (Correct answer)
- Assets panel
- Prototype panel
Correct answer: Design panel under Component
Variant properties such as State and Size are defined in the Design panel when a component set is selected.
Question 4: What is the purpose of a 'main component' in Figma?
- It is the largest component on the canvas
- It defines the source design that all instances inherit from (Correct answer)
- It is a component pinned to the toolbar
- It is a component exported to code
Correct answer: It defines the source design that all instances inherit from
The main component is the master definition; all instances automatically reflect any changes made to it.
Question 5: How do you detach an instance from its main component in Figma?
- Right-click → Detach Instance (Correct answer)
- Double-click the component
- Select and press Delete
- Drag it out of the Assets panel
Correct answer: Right-click → Detach Instance
Right-clicking an instance and choosing 'Detach Instance' breaks the link to the main component, turning it into a plain group.
Question 6: What happens to overrides on an instance when its main component is updated in Figma?
- All overrides are deleted
- Overrides are preserved while non-overridden properties update (Correct answer)
- The instance is automatically detached
- Overrides are reverted to main component values
Correct answer: Overrides are preserved while non-overridden properties update
Figma intelligently preserves local overrides on an instance while propagating changes to non-overridden properties from the main component.
Figma Figma Components and Variants 1
What is the keyboard shortcut to create a component from a selected frame or object in Figma?