Text decoration and case in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text bold in Figma.

Figma

textNode.fontName = { family: 'Roboto', style: '[1]' };

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

AItalic

BRegular

CBold

DLight

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Regular' instead of 'Bold' will not make text bold.

Using 'Italic' changes style but not weight.

Setting the style to 'Bold' makes the text bold in Figma.

2fill in blank

medium

Complete the code to underline the text in Figma.

Figma

textNode.textDecoration = '[1]';

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

Aoverline

BNONE

CSTRIKETHROUGH

DUNDERLINE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'NONE' removes any decoration.

Using 'STRIKETHROUGH' adds a strike-through, not underline.

Setting textDecoration to 'UNDERLINE' adds an underline to the text.

3fill in blank

hard

Fix the error in the code to convert text to uppercase in Figma.

Figma

textNode.characters = textNode.characters.[1]();

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

AtoUpperCase

BtoLowerCase

Ccapitalize

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'uppercase' is not a valid JavaScript method.

Using toLowerCase() converts text to lowercase.

The method toUpperCase() converts text to uppercase in JavaScript, which Figma plugin code uses.

4fill in blank

hard

Fill both blanks to make the text italic and strikethrough in Figma.

Figma

textNode.fontName = { family: 'Roboto', style: '[1]' };
textNode.textDecoration = '[2]';

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

AItalic

BBold

CSTRIKETHROUGH

DUNDERLINE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Bold' instead of 'Italic' changes weight, not slant.

Using 'UNDERLINE' instead of 'STRIKETHROUGH' adds underline, not strikethrough.

Setting style to 'Italic' makes text italic. Setting textDecoration to 'STRIKETHROUGH' adds a strikethrough.

5fill in blank

hard

Fill all three blanks to set font to bold, underline text, and convert characters to lowercase in Figma.

Figma

textNode.fontName = { family: 'Roboto', style: '[1]' };
textNode.textDecoration = '[2]';
textNode.characters = textNode.characters.[3]();

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

ABold

BUNDERLINE

CtoLowerCase

DItalic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Italic' instead of 'Bold' changes style but not weight.

Using 'STRIKETHROUGH' instead of 'UNDERLINE' changes decoration.

Using toUpperCase() instead of toLowerCase() changes case incorrectly.

Bold style makes text bold, UNDERLINE adds underline decoration, and toLowerCase() converts text to lowercase.