Slots pattern for flexible components in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a slot in a Figma component.

Figma

<Component>
  <[1] name="header" />
</Component>

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

ASlot

BFrame

CGroup

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using Frame instead of Slot for flexible placeholders.

Confusing Group with Slot.

The Slot element defines a flexible placeholder inside a Figma component where users can insert custom content.

2fill in blank

medium

Complete the code to insert content into a named slot in a Figma component instance.

Figma

<ComponentInstance>
  <[1] slot="header">
    <Text>Welcome</Text>
  </[1]>
</ComponentInstance>

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

AFragment

BFrame

CGroup

DSlot

Attempts:

3 left

💡 Hint

Common Mistakes

Using Frame or Group instead of Slot to fill slot content.

Omitting the slot attribute.

To insert content into a named slot, you wrap the content inside a Slot element with the matching slot name.

3fill in blank

hard

Fix the error in the slot usage by completing the code correctly.

Figma

<Component>
  <Slot name=[1] />
</Component>

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

A{header}

Bheader

C"header"

D'header'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted slot names causing syntax errors.

Using single quotes instead of double quotes in JSX.

The slot name must be a string literal enclosed in double quotes to be valid JSX syntax.

4fill in blank

hard

Fill both blanks to create a component with two named slots.

Figma

<Component>
  <[1] name=[2] />
  <Slot name="footer" />
</Component>

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

ASlot

B"header"

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using Frame instead of Slot for slot definition.

Not quoting the slot name.

Use the Slot element with the slot name as a string in quotes to define named slots.

5fill in blank

hard

Fill all three blanks to insert content into multiple slots in a component instance.

Figma

<ComponentInstance>
  <[1] slot=[2]>
    <Text>Title</Text>
  </[1]>
  <[3] slot="footer">
    <Text>Contact info</Text>
  </[3]>
</ComponentInstance>

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

ASlot

B"header"

D"footer"

Attempts:

3 left

💡 Hint

Common Mistakes

Using Frame or Group instead of Slot to fill slots.

Not quoting slot attribute values.

Use the Slot element with the correct slot attribute values in quotes to insert content into named slots.