Text styles in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a text style named 'Heading' to a text node.

Figma

textNode.textStyleId = [1]

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

Afigma.createTextStyle('Heading')

Bfigma.loadFontAsync('Heading')

Cfigma.getStyleByName('Heading').id

Dfigma.getNodeByName('Heading')

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to create a new style instead of getting an existing one.

Assigning the style object instead of its id.

Using loadFontAsync which is for fonts, not styles.

To apply a text style, you get the style by name and assign its id to the text node's textStyleId.

2fill in blank

medium

Complete the code to load the font 'Roboto' before applying text styles.

Figma

await figma.loadFontAsync({ family: 'Roboto', style: [1] })

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

A'Italic'

B'Regular'

C'Bold'

D'Light'

Attempts:

3 left

💡 Hint

Common Mistakes

Using font weight names that don't exist in the font family.

Forgetting to await the font loading.

Loading the 'Regular' style of 'Roboto' font is common before applying text styles.

3fill in blank

hard

Fix the error in the code to correctly create a new text style named 'Subtitle'.

Figma

const style = figma.[1]();
style.name = 'Subtitle';
style.fontName = { family: 'Arial', style: 'Regular' };

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

AcreateTextStyle

BgetTextStyle

CloadFontAsync

DcreateStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using getTextStyle which retrieves existing styles.

Using loadFontAsync which loads fonts, not styles.

The correct method to create a new text style is createTextStyle().

4fill in blank

hard

Fill both blanks to set the font size and line height of a text style.

Figma

style.fontSize = [1];
style.lineHeight = { value: [2], unit: 'PIXELS' };

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

A16

B24

C20

D18

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up font size and line height values.

Not specifying the unit for line height.

Setting font size to 20 and line height to 24 pixels is a common style for readability.

5fill in blank

hard

Fill all three blanks to create and apply a new text style named 'Caption' with font 'Roboto', size 12, and line height 16.

Figma

await figma.loadFontAsync({ family: [1], style: [2] });
const captionStyle = figma.createTextStyle();
captionStyle.name = [3];
captionStyle.fontName = { family: 'Roboto', style: 'Regular' };
captionStyle.fontSize = 12;
captionStyle.lineHeight = { value: 16, unit: 'PIXELS' };

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

A'Roboto'

B'Regular'

C'Caption'

D'Arial'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong font family or style names.

Not loading the font before creating the style.

You must load the 'Roboto' font with 'Regular' style, then create a text style named 'Caption'.