Move by Distance

About this plugin

Description

Move by Distance is a Figma plugin designed to give designers pixel-perfect control over object positioning. Whether you need to nudge elements by a few pixels or move them across your canvas, this plugin provides an elegant interface with sliders, number inputs, and arrow controls for precise horizontal and vertical movement.

Key Features

1. Real-time Preview: See changes live on your canvas before applying them
2. Dual Input Methods: Use sliders for quick adjustments or number inputs for exact values
3. Flexible Step Control: Define custom step increments for arrow buttons
4. Arrow Button Controls: Quick movement buttons with hold-to-repeat functionality
5. Reset Options: Quick reset buttons for each axis and double-click/right-click to reset sliders

Installation

1. Open Figma
2. Go to Menu → Plugins → Browse plugins in Community
3. Search for "Move by Distance"
4. Click Run

Using the Plugin

ㅤ

ㅤ

➊ Select Objects

1. Select one or more objects on your Figma canvas that you want to move
2. Launch the plugin via Menu → Plugins → Move by Distance

ㅤ

ㅤ

➋ Set Your Movement Values

Horizontal Movement:

1. Positive values = Move right
2. Negative values = Move left
3. Range: -1000 to 1000 pixels (can enter larger values in the number input)

Vertical Movement:

1. Positive values = Move down
2. Negative values = Move up
3. Range: -1000 to 1000 pixels (can enter larger values in the number input)

ㅤ

ㅤ

➌ Use the Controls

Number Inputs:

1. Click the number field and type your desired value
2. Use keyboard arrow keys: Up/Down to increment/decrement
3. Hold Shift + Arrow keys for 10× step increment

Sliders:

1. Drag the slider thumb for visual adjustment
2. Double-click or right-click the slider to reset to 0

Arrow Buttons:

1. Click once to move by the step value
2. Hold down to continuously move in that direction
3. Direction buttons: ← Left, → Right, ↑ Up, ↓ Down

Reset Buttons:

1. Click to instantly reset that axis to 0
2. Disabled when value is already 0

ㅤ

ㅤ

➍ Adjust Step Value (Optional)

The Step field controls how much the arrow buttons move objects with each click:

1. Default: 1 pixel
2. Set to 10 for larger movements
3. Set to 0.5 for sub-pixel precision (if needed)

ㅤ

ㅤ

➎ Toggle Preview

The eye icon button controls real-time preview:

1. Blue (active): Preview shows movement on canvas as you adjust values
2. Gray (inactive): No preview; changes only apply when you click "Apply"

Note: Preview mode stores original positions, so you can adjust values and see instant feedback.

ㅤ

ㅤ

➏ Apply or Cancel

Apply Button:

1. Applies the movement to selected objects
2. Shows a confirmation message with movement details
3. Closes the plugin

Cancel Button:

1. Reverts any preview changes
2. Closes the plugin without applying changes

ㅤ

ㅤ

☻ Pro Tips

1. Quick Reset: Double-click any slider to reset it to 0
2. Bulk Movement: Select multiple objects to move them all together
3. Preview Toggle: Disable preview if working with many objects for better performance
4. Combine Axes: Move diagonally by setting both horizontal and vertical values
5. Hold Arrows: Hold arrow buttons for continuous movement (starts after 300ms)

ㅤ

ㅤ

Need more design tools? Visit Samolevsky.com to discover more plugins and resources.