Component instances in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a component instance from a main component named 'Button'.

Figma

const buttonInstance = figma.currentPage.create[1]();
buttonInstance.mainComponent = figma.root.findOne(n => n.name === 'Button');

Drag options to blanks, or click blank then click option'

AComponentNode

BInstance

CComponentSet

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createComponentNode instead of createInstance

Confusing ComponentNode with Instance

Trying to create a Frame instead of an Instance

In Figma, to create an instance of a component, you use createInstance(). The instance is of type Instance.

2fill in blank

medium

Complete the code to set the position of a component instance to x=100 and y=200.

Figma

buttonInstance.x = [1];
buttonInstance.y = 200;

Drag options to blanks, or click blank then click option'

A100

B200

C0

D150

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping x and y values

Using string values instead of numbers

Setting x to 200 instead of 100

The x property sets the horizontal position. To place it at 100, assign buttonInstance.x = 100;.

3fill in blank

hard

Fix the error in the code to properly detach a component instance from its main component.

Figma

buttonInstance.[1]();

Drag options to blanks, or click blank then click option'

AremoveInstance

BdeleteInstance

CdetachInstance

DdetachComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using removeInstance instead of detachInstance

Trying to delete the instance instead of detaching

Using detachComponent which does not exist

To detach an instance from its main component in Figma, use the detachInstance() method.

4fill in blank

hard

Fill both blanks to change the text content of a text node inside a component instance.

Figma

const textNode = buttonInstance.findOne(n => n.type === [1]);
textNode.characters = [2];

Drag options to blanks, or click blank then click option'

ATEXT

B'Click me'

C'Submit'

DFRAME

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'FRAME' instead of 'TEXT' for the node type

Assigning a non-string value to characters

Not finding the text node correctly

The type of a text node is TEXT. To change its content, assign a string like 'Click me' to characters.

5fill in blank

hard

Fill all three blanks to create a new instance, set its position, and add it to the current page.

Figma

const newInstance = figma.currentPage.[1]();
newInstance.mainComponent = figma.root.findOne(n => n.name === [2]);
newInstance.[3] = 50;

Drag options to blanks, or click blank then click option'

AappendChild

B'Icon'

CcreateInstance

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Using appendChild instead of createInstance

Forgetting quotes around component name

Setting y instead of x for position

Use createInstance() to make a new instance. Set its main component by name, e.g., 'Icon'. Then set its x position to 50.

Practice

1. What is the main benefit of using component instances in Figma?

easy

A. They create completely independent copies that do not update.

B. They allow you to reuse and customize design elements easily.

C. They automatically generate code for your design.

D. They replace the need for any design system.

Solution

1. Step 1: Understand what component instances do

   Component instances let you reuse design elements while allowing customization.

2. Step 2: Compare options to the definition

   The option 'They allow you to reuse and customize design elements easily.' correctly describes this benefit; others are incorrect or unrelated.

3. Final Answer:

   They allow you to reuse and customize design elements easily. -> Option B

4. Quick Check:

   Component instances = reuse + customize [OK]

Hint: Remember: instances = reusable + customizable elements [OK]

Common Mistakes:

• Thinking instances are independent copies
• Confusing instances with code generation
• Assuming instances replace design systems

2. Which of the following is the correct way to create an instance of a component in Figma?

easy

A. Use the 'Duplicate' option on the component.

B. Drag the component while holding the Option key.

C. Right-click the component and select 'Create Instance'.

D. Convert the component to a frame.

Solution

1. Step 1: Identify how to create an instance

   In Figma, you create an instance by right-clicking the component and choosing 'Create Instance'.

2. Step 2: Evaluate other options

   Dragging with Option key or duplicate creates independent copies, not instances; converting to frame is unrelated.

3. Final Answer:

   Right-click the component and select 'Create Instance'. -> Option C

4. Quick Check:

   Create instance = right-click + 'Create Instance' [OK]

Hint: Right-click component > Create Instance to reuse [OK]

Common Mistakes:

• Dragging with Option key instead of creating instance
• Using duplicate which breaks link to main component
• Confusing frames with components

3. Given a main component with a blue button, what happens if you change the button color in the main component?

medium

A. Instances change color only if manually updated.

B. Only the main component changes; instances keep the old color.

C. Instances are deleted automatically.

D. All instances of the button update to the new color automatically.

Solution

1. Step 1: Understand instance behavior on main component update

   Instances reflect changes made to their main component automatically.

2. Step 2: Analyze options

   All instances of the button update to the new color automatically. correctly states that all instances update color; others contradict Figma's behavior.

3. Final Answer:

   All instances of the button update to the new color automatically. -> Option D

4. Quick Check:

   Main component update = instance update [OK]

Hint: Change main component, all instances update automatically [OK]

Common Mistakes:

• Thinking instances stay unchanged after main update
• Believing manual update is needed for instances
• Assuming instances get deleted on main change

4. You created an instance but changes to the main component are not reflecting in the instance. What is the most likely cause?

medium

A. The instance was detached from the main component.

B. The main component was deleted.

C. The instance is locked on the canvas.

D. The instance is inside a hidden frame.

Solution

1. Step 1: Identify why instance doesn't update

   If an instance is detached, it loses connection to the main component and won't update.

2. Step 2: Evaluate other options

   Deleting main component removes it entirely; locking or hiding doesn't stop updates.

3. Final Answer:

   The instance was detached from the main component. -> Option A

4. Quick Check:

   Detached instance = no updates [OK]

Hint: Check if instance is detached to fix update issues [OK]

Common Mistakes:

• Assuming locking prevents updates
• Thinking hidden frames block updates
• Confusing deletion with update failure

5. You have a main component for a card with text and image. You want to create instances that have different text but keep the same image and style. How should you do this?

hard

A. Create instances and override the text content in each instance while keeping the image unchanged.

B. Duplicate the main component and edit text in each duplicate separately.

C. Detach instances and edit text and image freely.

D. Create separate components for each text variation.

Solution

1. Step 1: Understand instance overrides

   Instances allow overriding text while keeping other elements like images linked to the main component.

2. Step 2: Compare options

   Create instances and override the text content in each instance while keeping the image unchanged. uses overrides correctly; duplicating or detaching breaks consistency; separate components increase maintenance.

3. Final Answer:

   Create instances and override the text content in each instance while keeping the image unchanged. -> Option A

4. Quick Check:

   Instance overrides = customize text, keep style [OK]

Hint: Override text in instances, keep images linked [OK]

Common Mistakes:

• Duplicating instead of using instances
• Detaching instances losing updates
• Creating many components for small text changes