Text tool basics in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a text layer with the text 'Hello World'.

Figma

const text = figma.createText();
text.characters = [1];

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

A"Hello World"

BHello World

C'Hello World'

D'hello world'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the text string

Using unquoted text

You need to assign the text characters as a string with quotes. Option C uses single quotes correctly.

2fill in blank

medium

Complete the code to set the font size of a text node to 24.

Figma

await figma.loadFontAsync({ family: 'Roboto', style: 'Regular' });
text.fontSize = [1];

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

A'24'

B24

C"24"

Dsize24

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the number

Using undefined variables

The fontSize property expects a number, so 24 without quotes is correct.

3fill in blank

hard

Fix the error in the code to change the text color to red.

Figma

text.fills = [[1]];

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

A{ type: 'COLOR', color: { r: 1, g: 0, b: 0 } }

B{ type: 'SOLID', color: 'red' }

C{ color: { r: 1, g: 0, b: 0 } }

D{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'red' instead of RGB object

Missing type property

Wrong type value

The fills property expects an array of paint objects with type 'SOLID' and color as RGB values between 0 and 1.

4fill in blank

hard

Fill both blanks to create a text node and add it to the current page.

Figma

const text = [1];
figma.currentPage.[2](text);

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

Afigma.createText()

BappendChild

CaddChild

DcreateTextNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names

Confusing addChild with appendChild

Use figma.createText() to create a text node and appendChild() to add it to the page.

5fill in blank

hard

Fill all three blanks to create a text node, set its text, and set its font size.

Figma

const text = [1];
text.characters = [2];
text.fontSize = [3];

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

Afigma.createText()

B'Welcome!'

C18

DcreateTextNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong creation method

Forgetting quotes around text

Using string for font size

Create the text node with figma.createText(), set characters as a string, and fontSize as a number.