Distribute Gradient Stops

About this plugin

Description

Distribute Gradient Stops is a simple yet powerful Figma plugin that helps designers achieve evenly spaced gradient stops with a single click. Whether you're working with linear, radial, angular, or diamond gradients, this plugin ensures your color transitions are mathematically perfect and visually balanced.

The plugin works on both gradient fills and gradient strokes, and can process multiple selected objects simultaneously, including nested elements within groups and frames.

Features

1. Universal Gradient Support: Works with all gradient types (linear, radial, angular, diamond)
2. Batch Processing: Process multiple objects at once
3. Nested Element Support: Automatically processes children within groups and frames
4. Live Preview: See changes before applying them
5. Non-Destructive: Cancel anytime to revert changes

ㅤ

ㅤ

How to Use

➊ Select Objects

Select one or more objects in your Figma file that contain gradients. The plugin works with:

1. Objects with gradient fills
2. Objects with gradient strokes
3. Groups and frames (it will process all nested elements)

ㅤ

➋ Run the Plugin

1. Go to Plugins → Distribute Gradient Stops
2. Or use the quick search: Press Cmd + / (Mac) or Ctrl + / (Windows), then type "Distribute Gradient Stops"

➌ Preview Changes (Optional)

1. The plugin opens with Preview enabled by default
2. Your gradient stops will be automatically distributed evenly
3. Toggle the Preview checkbox off to see the original state
4. Toggle it back on to see the distributed version

➍ Apply or Cancel

1. Click Apply to permanently apply the changes
2. Click Cancel to revert all changes and close the plugin

This is particularly useful when:

1. Importing gradients from other design tools
2. Cleaning up manually adjusted gradients
3. Creating consistent gradient systems
4. Working with gradients that have been modified multiple times

ㅤ

ㅤ

☻ Tips

1. Multiple Objects: Select multiple objects to process all their gradients at once
2. Groups and Frames: The plugin automatically processes all nested elements
3. Preview Mode: Use preview to compare before and after states
4. No Gradients: If no gradients are found, the plugin will notify you

ㅤ

ㅤ

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