Line and arrow tools in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to draw a straight line using the line tool.

Figma

line = figma.create[1]()

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

ALine

BRectangle

CEllipse

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createLine()

Using createEllipse() which creates a circle or oval

Using createText() which creates text objects

Use createLine() to create a straight line in Figma.

2fill in blank

medium

Complete the code to set the stroke color of the line to red.

Figma

line.strokes = [{ type: 'SOLID', color: { r: 1, g: [1], b: 0 } }]

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

A0.5

B0

C1

D0.25

Attempts:

3 left

💡 Hint

Common Mistakes

Setting green to 1 or 0.5 which adds green tint

Setting blue to non-zero values

To get pure red, green and blue values should be 0.

3fill in blank

hard

Fix the error in the code to add an arrowhead at the end of the line.

Figma

line.strokeCaps = ['NONE', '[1]']

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

AROUND

BSQUARE

CARROW_EQUILATERAL

DNONE

Attempts:

3 left

💡 Hint

Common Mistakes

Using ROUND or SQUARE which do not add arrowheads

Using NONE which removes stroke caps

Use line.strokeCaps = ['NONE', 'ARROW_EQUILATERAL'] to add an arrowhead at the end of a line.

4fill in blank

hard

Fill both blanks to create a dashed arrow line with stroke weight 3.

Figma

line.strokeWeight = [1]
line.dashPattern = [[2]]

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

A3

B5

C2

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using strokeWeight less than 3 for visibility

Using dashPattern values too small or zero

Stroke weight 3 makes the line thicker. Dash pattern [5] creates dashes of length 5.

5fill in blank

hard

Fill all three blanks to create a blue arrow line from (10, 20) to (100, 200).

Figma

line.strokeWeight = [1]
line.strokes = [{ type: 'SOLID', color: { r: 0, g: [2], b: [3] } }]
line.vectorPaths = [{ windingRule: 'NONZERO', data: 'M10 20 L100 200' }]
line.strokeCaps = ['NONE', 'ARROW_EQUILATERAL']

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

A2

B0

C1

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Setting green or red to non-zero for blue color

Using strokeWeight too thick or too thin

Stroke weight 2 is a good thickness. Blue color means red=0, green=0, blue=1.