Nested components in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a nested component in Figma.

Figma

const Button = createComponent({ type: 'button', children: [1] });

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

AFrame

BIcon

CRectangle

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a container like Frame instead of a content element.

Using a shape like Rectangle which is not typical inside buttons.

The Text component is commonly nested inside a Button to show the label.

2fill in blank

medium

Complete the code to reference a nested component inside a main component.

Figma

const Card = createComponent({ children: [[1]] });

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

AHeader

BFooter

CIcon

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using Footer which is usually at the bottom, not the main nested part.

Choosing Icon which is a smaller element, not the main nested component.

The Header is often nested inside a Card component to show the title or main info.

3fill in blank

hard

Fix the error in the nested component declaration.

Figma

const Modal = createComponent({ children: [1] });

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

A[Header, Content, Footer]

B{Header, Content, Footer}

CHeader, Content, Footer

D(Header, Content, Footer)

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces which define an object, not an array.

Listing components without brackets which causes syntax errors.

The children property expects an array of components, so square brackets [] are required.

4fill in blank

hard

Fill both blanks to correctly nest components with props.

Figma

const ListItem = createComponent({ type: 'list-item', children: [[1]], props: { text: [2] } });

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

AText

B'Item 1'

C'Button'

DIcon

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Button' as a string instead of 'Item 1' for the text prop.

Nesting Icon instead of Text inside the list item.

The Text component is nested inside the list item, and the text prop is set to 'Item 1'.

5fill in blank

hard

Fill all three blanks to create a nested component with multiple children and props.

Figma

const Toolbar = createComponent({ children: [[1], [2]], props: { size: [3] } });

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

AButton

BIcon

C'large'

D'small'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'small' instead of 'large' for the size prop.

Nesting only one child instead of two.

The Toolbar nests a Button and an Icon as children, and the size prop is set to 'large'.