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.

Practice

1. What is the main purpose of spacing tools in Figma?
Spacing tools help designers to:

easy

A. Export files in different formats

B. Change colors of elements

C. Place elements evenly and neatly

D. Add animations to designs

Solution

1. Step 1: Understand spacing tools function

   Spacing tools are used to arrange elements with equal gaps and alignment.

2. Step 2: Identify correct purpose

   Changing colors, adding animations, or exporting are unrelated to spacing tools.

3. Final Answer:

   Place elements evenly and neatly -> Option C

4. Quick Check:

   Spacing tools = Place elements evenly and neatly [OK]

Hint: Spacing tools arrange gaps evenly between elements [OK]

Common Mistakes:

• Confusing spacing tools with color or animation tools
• Thinking spacing tools export files
• Assuming spacing tools create new elements

2. Which of the following is the correct way to measure the distance between two objects in Figma?

easy

A. Select both objects and press Alt (Option) key

B. Use the paint bucket tool

C. Click the text tool and type distance

D. Drag objects without holding any key

Solution

1. Step 1: Recall measurement shortcut

   Holding Alt (Option) while selecting objects shows distance between them.

2. Step 2: Eliminate incorrect options

   Paint bucket changes color, text tool types text, dragging alone doesn't measure.

3. Final Answer:

   Select both objects and press Alt (Option) key -> Option A

4. Quick Check:

   Measure distance = Alt key + select [OK]

Hint: Hold Alt and select objects to see spacing [OK]

Common Mistakes:

• Using paint bucket tool to measure
• Typing 'distance' in text tool
• Dragging objects without modifier keys

3. In Figma, if you select three objects aligned horizontally and use the 'Tidy Up' button, what happens?

medium

A. Objects are stacked vertically with no gaps

B. Objects are grouped without changing spacing

C. Objects change color randomly

D. Objects are spaced evenly with equal gaps horizontally

Solution

1. Step 1: Understand 'Tidy Up' function

   'Tidy Up' arranges selected objects evenly with equal spacing in their current alignment direction.

2. Step 2: Analyze options

   Stacking vertically or changing colors are unrelated; grouping does not adjust spacing.

3. Final Answer:

   Objects are spaced evenly with equal gaps horizontally -> Option D

4. Quick Check:

   Tidy Up = Even horizontal spacing [OK]

Hint: 'Tidy Up' evens out gaps between selected items [OK]

Common Mistakes:

• Thinking 'Tidy Up' stacks vertically
• Expecting color changes
• Assuming grouping without spacing change

4. You try to measure the distance between two objects in Figma but no measurement lines appear. What is the most likely reason?

medium

A. You forgot to hold the Alt (Option) key while selecting

B. The objects are locked

C. You used the text tool instead of selection tool

D. The objects are on different pages

Solution

1. Step 1: Recall measurement method

   Distance lines appear only when holding Alt (Option) key while selecting objects.

2. Step 2: Evaluate other reasons

   Locked objects or different pages don't prevent measurement lines if Alt is held; text tool usage is unrelated.

3. Final Answer:

   You forgot to hold the Alt (Option) key while selecting -> Option A

4. Quick Check:

   Measure lines need Alt key held [OK]

Hint: Hold Alt key to see measurement lines between objects [OK]

Common Mistakes:

• Not holding Alt key
• Assuming locked objects block measurement lines
• Confusing tool usage

5. You have a complex design with multiple elements. You want to ensure all buttons have exactly 20px spacing between them horizontally and are aligned perfectly. Which combination of Figma tools and steps will best achieve this?

hard

A. Select buttons and change their fill color to blue

B. Use rulers to create guides, select buttons, hold Alt to check spacing, then use 'Tidy Up' to fix gaps

C. Group buttons and drag them randomly to adjust spacing

D. Use the text tool to label each button with spacing values

Solution

1. Step 1: Use rulers and guides for alignment

   Rulers help place guides at exact positions to align buttons perfectly.

2. Step 2: Measure spacing with Alt key

   Holding Alt while selecting buttons shows current spacing between them.

3. Step 3: Use 'Tidy Up' to fix spacing

   'Tidy Up' arranges buttons evenly with equal gaps, ensuring 20px spacing horizontally.

4. Final Answer:

   Use rulers to create guides, select buttons, hold Alt to check spacing, then use 'Tidy Up' to fix gaps -> Option B

5. Quick Check:

   Rulers + Alt + Tidy Up = Perfect spacing [OK]

Hint: Combine rulers, Alt key, and Tidy Up for precise spacing [OK]

Common Mistakes:

• Changing colors instead of spacing
• Dragging without guides or measurement
• Using text tool for spacing values