Text alignment and vertical alignment in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the horizontal text alignment to center in Figma.

Figma

textNode.textAlign = [1]

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

A"center"

B"left"

C"right"

D"justify"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'right' instead of 'center' for centering text.

Setting textAlign to "center" aligns the text horizontally to the center.

2fill in blank

medium

Complete the code to set the vertical text alignment to middle in Figma.

Figma

textNode.verticalAlign = [1]

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

A"baseline"

B"middle"

C"bottom"

D"top"

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'middle' with 'top' or 'bottom'.

Setting verticalAlign to "middle" aligns the text vertically in the middle.

3fill in blank

hard

Fix the error in the code to correctly set horizontal alignment to right.

Figma

textNode.textAlign = [1]

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

A"right"

Bright

CRight

D'right'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted words or single quotes instead of double quotes.

The alignment value must be a string with double quotes, like "right".

4fill in blank

hard

Fill both blanks to set horizontal alignment to left and vertical alignment to bottom.

Figma

textNode.textAlign = [1]
textNode.verticalAlign = [2]

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

A"left"

B"top"

C"bottom"

D"center"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up vertical and horizontal alignment values.

Use "left" for horizontal left alignment and "bottom" for vertical bottom alignment.

5fill in blank

hard

Fill all three blanks to set horizontal alignment to justify, vertical alignment to top, and assign the text content.

Figma

textNode.textAlign = [1]
textNode.verticalAlign = [2]
textNode.characters = [3]

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

A"justify"

B"top"

C"Hello, world!"

D"middle"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect quotes or wrong alignment values.

Set textAlign to "justify" for justified text, verticalAlign to "top" for top vertical alignment, and assign the string "Hello, world!" to characters to set the text content.