Why styles ensure brand consistency in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a consistent text color using styles.

Figma

text.fill = [1]

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

Astyle.fill

Bstyle.color

CtextStyle.color

DlocalColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using local colors instead of style colors.

Trying to set color directly without styles.

Using style.fill applies the fill color from the style, ensuring brand consistency.

2fill in blank

medium

Complete the code to apply a text style for consistent font settings.

Figma

text.textStyleId = [1]

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

AlocalFont

BsharedTextStyleId

Cstyle.textStyleId

DtextStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using local font settings instead of shared styles.

Assigning style properties incorrectly.

Assigning sharedTextStyleId links the text to a shared style, keeping fonts consistent.

3fill in blank

hard

Fix the error in applying a color style to a shape fill.

Figma

shape.fills = [[1]]

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

A{ type: 'STYLE', styleId: colorStyleId }

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

C{ type: 'SOLID', color: style.color }

D{ type: 'COLOR', styleId: colorStyleId }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'COLOR' instead of 'STYLE' for fill type.

Setting color directly instead of using styleId.

Using { type: 'STYLE', styleId: colorStyleId } correctly applies the color style to the fill.

4fill in blank

hard

Fill both blanks to apply a consistent text style and color style.

Figma

text.textStyleId = [1]
text.fillStyleId = [2]

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

AsharedTextStyleId

BlocalFillId

CsharedFillStyleId

DlocalTextStyleId

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing local and shared style IDs.

Using fill style ID for text style.

Using sharedTextStyleId and sharedFillStyleId applies consistent font and color styles.

5fill in blank

hard

Fill all three blanks to create a rectangle with consistent fill style, stroke style, and corner radius style.

Figma

const rect = figma.createRectangle()
rect.fills = [[1]]
rect.strokes = [[2]]
rect.cornerRadius = [3]

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

A{ type: 'STYLE', styleId: fillStyleId }

B{ type: 'STYLE', styleId: strokeStyleId }

CradiusStyleValue

D{ type: 'SOLID', color: localColor }

Attempts:

3 left

💡 Hint

Common Mistakes

Using local colors instead of style references.

Setting corner radius directly without style.

Applying fill and stroke styles with type: 'STYLE' and using a style value for corner radius ensures brand consistency.