Applying and detaching styles in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a style to a selected node in Figma.

Figma

node.[1] = styleId

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

AeffectStyleId

BstrokeStyleId

CtextStyleId

DfillStyleId

Attempts:

3 left

💡 Hint

Common Mistakes

Using strokeStyleId instead of fillStyleId

Trying to assign style directly to fills array

To apply a fill style to a node, you assign the style ID to the fillStyleId property.

2fill in blank

medium

Complete the code to detach styles from a node in Figma.

Figma

node.[1]()

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

AremoveStyle

BapplyStyle

CdetachStyle

DdetachAllStyles

Attempts:

3 left

💡 Hint

Common Mistakes

Using applyStyle instead of detachStyle

Trying to set style property to null

The detachStyle() method removes the applied style from the node, making it independent.

3fill in blank

hard

Fix the error in the code to properly detach text styles from a node.

Figma

if (node.[1]) {
  node.detachStyle()
}

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

AtextStyleId

BfillStyleId

CstrokeStyleId

DeffectStyleId

Attempts:

3 left

💡 Hint

Common Mistakes

Checking fillStyleId for text styles

Not checking any style property before detaching

To check if a text style is applied, check textStyleId before detaching.

4fill in blank

hard

Fill both blanks to apply a stroke style and then detach it from a node.

Figma

node.[1] = styleId
node.[2]()

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

AstrokeStyleId

BdetachStyle

CfillStyleId

DapplyStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using fillStyleId for stroke style

Calling applyStyle instead of detachStyle

Assign the stroke style ID to strokeStyleId and call detachStyle() to remove it.

5fill in blank

hard

Fill all three blanks to apply a fill style, check if it exists, and detach it from a node.

Figma

node.[1] = styleId
if (node.[2]) {
  node.[3]()
}

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

AfillStyleId

CdetachStyle

DapplyStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using different properties for assignment and check

Calling applyStyle instead of detachStyle

Assign the fill style ID to fillStyleId, check if it exists, then call detachStyle() to remove it.