Vector editing mode in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the vector node for editing.

Figma

const vectorNode = figma.currentPage.findOne(node => node.type === [1]);

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

AVECTOR

BRECTANGLE

CTEXT

DFRAME

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing RECTANGLE or FRAME instead of VECTOR.

Using lowercase strings instead of uppercase.

The type VECTOR selects vector nodes in Figma.

2fill in blank

medium

Complete the code to access the vector node's vector network for editing points.

Figma

const vectorNetwork = vectorNode.[1];

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

AvectorPaths

BvectorPoints

CvectorNetwork

DvectorData

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like vectorPaths or vectorPoints.

Trying to access vector data directly without vectorNetwork.

The vectorNetwork property contains the points and segments of a vector node.

3fill in blank

hard

Fix the error in the code to update the first point's x coordinate in the vector network.

Figma

vectorNode.vectorNetwork.vertices[0].[1] = 100;

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

ApositionX

BcoordinateX

CposX

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like positionX or posX.

Trying to assign to a non-existent property.

The x property sets the horizontal position of a vertex.

4fill in blank

hard

Fill both blanks to create a new vertex and add it to the vector network vertices array.

Figma

const newVertex = { x: [1], y: [2] };
vectorNode.vectorNetwork.vertices.push(newVertex);

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

A150

B200

C100

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers.

Swapping x and y values.

The new vertex is created with x=100 and y=200 coordinates before adding to vertices.

5fill in blank

hard

Fill all three blanks to update the vector network with the new vertices and segments.

Figma

vectorNode.vectorNetwork = {
  vertices: [1],
  segments: [2],
  regions: [3]
};

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

AvectorNode.vectorNetwork.vertices

BvectorNode.vectorNetwork.segments

CvectorNode.vectorNetwork.regions

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning empty arrays instead of existing data.

Mixing up segments and regions.

We assign the existing vertices, segments, and regions arrays back to the vectorNetwork to update it.