Pen tool for custom paths in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start drawing a new path with the Pen tool.

Figma

penTool.[1]()

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

AstartPath

BbeginPath

CinitPath

DcreatePath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'startPath' instead of 'beginPath' causes an error.

Confusing initialization methods with path methods.

The beginPath() method starts a new path in Figma's Pen tool.

2fill in blank

medium

Complete the code to add a straight line segment to the current path.

Figma

penTool.lineTo([1], [2])

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

Ay

Bx

Cpoint

Dcoordinate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'y' for both arguments causes incorrect drawing.

Passing a single point object instead of separate x and y.

The lineTo(x, y) method requires x and y coordinates to draw a line.

3fill in blank

hard

Fix the error in the code to close the current path.

Figma

penTool.[1]()

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

AclosePath

BendPath

CfinishPath

DcompletePath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'endPath' which is not a valid method.

Confusing finishing methods with closing methods.

The closePath() method closes the current path by connecting the last point to the first.

4fill in blank

hard

Fill in the blank to create a cubic Bezier curve segment.

Figma

penTool.[1](controlPoint1, controlPoint2, endPoint)

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

AcurveTo

BquadraticCurveTo

CbezierCurveTo

DcubicCurveTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'quadraticCurveTo' which only takes one control point.

Confusing method names that don't exist.

The bezierCurveTo(controlPoint1, controlPoint2, endPoint) method draws a cubic Bezier curve. The first control point is the first argument.

5fill in blank

hard

Fill all three blanks to move the pen to a new starting point without drawing.

Figma

penTool.[1]([2], [3])

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

AmoveTo

Bx

Cy

DstartPoint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'startPoint' which is not a method.

Swapping x and y coordinates.

The moveTo(x, y) method moves the pen to a new position without drawing a line.