Move by Distance
Figma 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
- Real-time Preview: See changes live on your canvas before applying them
- Dual Input Methods: Use sliders for quick adjustments or number inputs for exact values
- Flexible Step Control: Define custom step increments for arrow buttons
- Arrow Button Controls: Quick movement buttons with hold-to-repeat functionality
- Reset Options: Quick reset buttons for each axis and double-click/right-click to reset sliders
ㅤ
Using the Plugin
ㅤ
➊ Select Objects
- Select one or more objects on your Figma canvas that you want to move
- Launch the plugin via Menu → Plugins → Move by Distance
➋ Open the Plugin
- Go to Menu → Plugins → Browse plugins in Community
- Search for "Move by Distance"
- Click Run
- The plugin window will appear with multiple options:
➌ Set Your Movement Values
Horizontal Movement:
- Positive values = Move right
- Negative values = Move left
- Range: -1000 to 1000 pixels (can enter larger values in the number input)
ㅤ
Vertical Movement:
- Positive values = Move down
- Negative values = Move up
- Range: -1000 to 1000 pixels (can enter larger values in the number input)
ㅤ
➍ Use the Controls
Number Inputs:
- Click the number field and type your desired value
- Use keyboard arrow keys: Up/Down to increment/decrement
- Hold Shift + Arrow keys for 10× step increment
ㅤ
Sliders:
- Drag the slider thumb for visual adjustment
- Double-click or right-click the slider to reset to 0
ㅤ
Arrow Buttons:
- Click once to move by the step value
- Hold down to continuously move in that direction
- Direction buttons: ← Left, → Right, ↑ Up, ↓ Down
ㅤ
Reset Buttons (✕):
- Click to instantly reset that axis to 0
- Disabled when value is already 0
➎ Adjust Step Value (Optional)
The Step field controls how much the arrow buttons move objects with each click:
- Default: 1 pixel
- Set to 10 for larger movements
- Set to 0.5 for sub-pixel precision (if needed)
➏ Toggle Preview
The eye icon button controls real-time preview:
- Blue (active): Preview shows movement on canvas as you adjust values
- 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 (Blue):
- Applies the movement to selected objects
- Shows a confirmation message with movement details
- Closes the plugin
ㅤ
Cancel Button:
- Reverts any preview changes
- Closes the plugin without applying changes
ㅤ
Pro Tips
- Quick Reset: Double-click any slider to reset it to 0
- Bulk Movement: Select multiple objects to move them all together
- Preview Toggle: Disable preview if working with many objects for better performance
- Combine Axes: Move diagonally by setting both horizontal and vertical values
- Hold Arrows: Hold arrow buttons for continuous movement (starts after 300ms)
☻ Wrap-up
Move by Distance streamlines your Figma workflow by providing precise, pixel-perfect object positioning with an intuitive interface and real-time preview.
Whether you're making micro-adjustments or bulk movements, this plugin gives you the control you need to position elements exactly where you want them. Try it today and experience effortless precision in your designs.
ㅤ
ㅤ
