Recommended
Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete the code to create a new component in Figma.
Figma
const button = figma.create[1](); Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using Text instead of Rectangle for button shape.
Trying to create a Frame instead of a basic shape.
✗ Incorrect
In Figma, a button is often created as a Rectangle component.
2fill in blank
mediumComplete the code to add a component to the library.
Figma
const component = button.[1](); Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using import instead of createComponent.
Trying to publish instead of createComponent.
✗ Incorrect
To add a component to the library, you create it with createComponent.
3fill in blank
hardFix the error in the code to rename a component in the library.
Figma
component.[1] = 'Primary Button';
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'title' or 'label' which do not rename the component.
Trying to change 'id' which is unique and not editable.
✗ Incorrect
The property to rename a component is 'name'.
4fill in blank
hardFill both blanks to create a variant set with two variants.
Figma
const variantSet = figma.create[1](); variantSet.[2] = ['Primary', 'Secondary'];
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'Component' instead of 'ComponentSet' for variant sets.
Using 'variantNames' which is not a valid property.
✗ Incorrect
You create a variant set with createComponentSet and assign variant names using the 'variants' property.
5fill in blank
hardFill all three blanks to detach an instance and change its color.
Figma
const instance = figma.currentPage.findOne(node => node.type === 'INSTANCE'); const detached = instance.[1](); detached.fills = [{ type: '[2]', color: { r: 1, g: 0, b: 0 } }]; figma.currentPage.[3](detached);
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'removeChild' instead of 'appendChild' to add the detached node.
Using wrong fill type like 'GRADIENT' instead of 'SOLID'.
✗ Incorrect
To modify an instance, you detach it first, then set its fill color with type 'SOLID', and finally add it to the page with appendChild.