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'.

Practice

1. What is the main benefit of using Text Styles in Figma for a business dashboard?

easy

A. They automatically translate text into multiple languages.

B. They keep text consistent and easy to update across the design.

C. They create animations for text elements.

D. They convert text into images for faster loading.

Solution

1. Step 1: Understand the purpose of text styles

   Text styles are used to keep font, size, color, and spacing consistent across all text elements.

2. Step 2: Identify the benefit for dashboards

   Consistent text makes dashboards look professional and allows easy updates by changing the style once.

3. Final Answer:

   They keep text consistent and easy to update across the design. -> Option B

4. Quick Check:

   Text styles = Consistency and easy updates [OK]

Hint: Text styles = consistent fonts and easy global updates [OK]

Common Mistakes:

• Thinking text styles translate or animate text
• Confusing text styles with images or icons
• Believing text styles affect loading speed

2. Which of the following is the correct way to apply a text style to a text layer in Figma?

easy

A. Select the text layer, then choose the style from the Text Styles dropdown in the right panel.

B. Right-click the text layer and select 'Convert to Vector'.

C. Drag and drop the style file onto the text layer.

D. Double-click the text layer and type the style name manually.

Solution

1. Step 1: Locate how to apply text styles in Figma

   Text styles are applied by selecting the text layer and picking the style from the Text Styles dropdown in the right sidebar.

2. Step 2: Eliminate incorrect options

   Right-click convert to vector changes text to shapes, drag and drop styles is not supported, typing style name manually does not apply styles.

3. Final Answer:

   Select the text layer, then choose the style from the Text Styles dropdown in the right panel. -> Option A

4. Quick Check:

   Apply text style = Select layer + choose style dropdown [OK]

Hint: Apply styles via right panel dropdown after selecting text [OK]

Common Mistakes:

• Trying to convert text to vector to apply styles
• Dragging files instead of using dropdown
• Typing style names instead of selecting

3. Given a text style named Heading Large with font size 24 and color blue, what happens if you update the font size to 28 in the style?

medium

A. The font size change does not affect any text layers.

B. Only new text layers created after the change use font size 28.

C. Existing text layers keep font size 24, new layers use 28.

D. All text layers using Heading Large update their font size to 28 automatically.

Solution

1. Step 1: Understand how text styles propagate changes

   When you update a text style, all text layers linked to that style update automatically to reflect the change.

2. Step 2: Confirm effect on existing layers

   Existing text layers using the style inherit the new font size immediately without manual changes.

3. Final Answer:

   All text layers using Heading Large update their font size to 28 automatically. -> Option D

4. Quick Check:

   Update style = auto update all linked text layers [OK]

Hint: Changing style updates all linked text layers instantly [OK]

Common Mistakes:

• Thinking only new layers update
• Believing existing layers keep old size
• Assuming manual update needed per layer

4. You applied a text style to a label but the font color did not change as expected. What is the most likely reason?

medium

A. The text layer has local overrides that prevent style color from applying.

B. The text style was deleted after applying.

C. Figma does not support color changes in text styles.

D. The text layer is locked and cannot update.

Solution

1. Step 1: Check for local overrides on the text layer

   If a text layer has local formatting changes (overrides), these can block style properties like color from applying.

2. Step 2: Understand why other options are incorrect

   Deleting style after applying breaks link but usually removes style; Figma supports color in styles; locked layers can still show style changes visually.

3. Final Answer:

   The text layer has local overrides that prevent style color from applying. -> Option A

4. Quick Check:

   Local overrides block style color changes [OK]

Hint: Check for local overrides blocking style updates [OK]

Common Mistakes:

• Assuming style deletion causes no color change
• Believing Figma can't style colors
• Ignoring local overrides on text

5. You want to create a dashboard with clear hierarchy: headings, subheadings, body text, and labels. How should you organize your text styles for best BI design practice?

hard

A. Apply random fonts and sizes to make the dashboard colorful.

B. Use one text style for all text and manually adjust sizes per layer.

C. Create separate named text styles for each role (e.g., Heading, Subheading, Body, Label) with distinct fonts and sizes.

D. Create text styles only for headings and leave other text unstyled.

Solution

1. Step 1: Identify the need for clear text hierarchy

   Dashboards need clear visual hierarchy to guide users, so different text roles require distinct styles.

2. Step 2: Organize text styles accordingly

   Creating separate named styles for headings, subheadings, body, and labels ensures consistency and easy updates.

3. Final Answer:

   Create separate named text styles for each role (e.g., Heading, Subheading, Body, Label) with distinct fonts and sizes. -> Option C

4. Quick Check:

   Separate named styles = clear hierarchy and consistency [OK]

Hint: Name styles by role for clear, consistent dashboard text [OK]

Common Mistakes:

• Using one style for all text causing confusion
• Styling only headings leaving others inconsistent
• Random fonts and sizes reduce readability