Spacing and measurement tools in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to measure the distance between two objects in Figma.

Figma

distance = frame1.[1](frame2)

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

AdistanceTo

Bmeasure

CgetSpacing

DcalculateDistance

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist like 'measure' or 'getSpacing'.

In Figma, distanceTo is used to measure the distance between two objects.

2fill in blank

medium

Complete the code to show the spacing between selected layers in Figma.

Figma

figma.showSpacingBetween([1])

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

Alayers

Bobjects

Cframes

Dselection

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic terms like 'layers' or 'objects' instead of the specific 'selection'.

The selection object in Figma represents the currently selected layers, which is used to show spacing.

3fill in blank

hard

Fix the error in the code to correctly get horizontal spacing between two nodes.

Figma

horizontalSpacing = node1.[1](node2, 'horizontal')

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

AmeasureSpacing

BgetDistance

CdistanceTo

DcalculateGap

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'getDistance' or 'calculateGap'.

The distanceTo method correctly calculates the distance between two nodes, and can take an optional direction parameter.

4fill in blank

hard

Fill both blanks to create a function that returns vertical spacing between two frames.

Figma

function getVerticalSpacing(frameA, frameB) {
  return frameA.[1](frameB, [2])
}

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

AdistanceTo

B'vertical'

C'horizontal'

Dmeasure

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'horizontal' instead of 'vertical' for vertical spacing.

The distanceTo method with the 'vertical' parameter returns vertical spacing between frames.

5fill in blank

hard

Fill all three blanks to create a function that calculates spacing and logs it with a label.

Figma

function logSpacing(obj1, obj2) {
  const spacing = obj1.[1](obj2, [2])
  console.[3](`Spacing is: ${spacing}px`)
}

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

AdistanceTo

B'horizontal'

Clog

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' instead of 'log' for console output.

The distanceTo method calculates spacing, and console.log outputs the message.