Distribution

Distribution actions automatically space shapes with perfect, equal gaps—turning messy layouts into professional, balanced designs in one click.

How Distribution Works

Distribution calculates the gaps between shapes and adjusts them so all gaps are equal:

1. Offgen identifies the outermost shapes (the anchors)
2. Calculates available space between them
3. Positions all middle shapes with equal gaps

Distribution Actions

Distribute Horizontal

Creates equal horizontal spacing between shapes.

Use Case:

• Creating evenly-spaced rows
• Button groups
• Icon rows
• Navigation menus
• Timeline events

How to Use:

1. Select all shapes to distribute (minimum 3 shapes)
2. Click "Distribute Horizontal"
3. Shapes space evenly between leftmost and rightmost

Example:

Before:         After:
▢   ▢    ▢      ▢    ▢    ▢
(uneven gaps)   (equal gaps)

Best Practices:

• Align shapes first (Align Top, Middle, or Bottom) for neat rows
• Works best with 3 or more shapes
• Leftmost and rightmost shapes don't move

Distribute Vertical

Creates equal vertical spacing between shapes.

Use Case:

• Creating evenly-spaced columns
• Vertical menus
• Timeline items
• List layouts
• Step-by-step processes

How to Use:

1. Select all shapes to distribute (minimum 3 shapes)
2. Click "Distribute Vertical"
3. Shapes space evenly between topmost and bottommost

Example:

Before:    After:
▢          ▢
▢
           ▢
▢
           ▢

Best Practices:

• Align shapes first (Align Left, Center, or Right) for neat columns
• Great for creating vertical navigation
• Topmost and bottommost shapes don't move

Distribute in Circle

Arranges shapes in a perfect circular pattern.

Requirements: Minimum 3 shapes

Use Case:

• Creating circular diagrams
• Radial menus
• Process flows
• Decorative elements
• 360° visualizations

How to Use:

1. Select shapes to arrange (minimum 3)
2. Click "Distribute in Circle"
3. Shapes arrange in a circle around their center point

Example:

Before:         After:
▢ ▢ ▢               ▢
                ▢       ▢
                    ▢

Advanced Options:

• Shapes rotate to face outward from center
• Works with any number of shapes (3+)
• Circle size depends on your original selection area

Common Workflows

Creating Perfect Rows

The most common distribution use case:

1. Select all shapes in the row
2. Align Top (or Middle or Bottom)
3. Distribute Horizontal

Result: A perfectly aligned row with even spacing

Example:

• Button groups
• Navigation tabs
• Icon rows
• Feature lists

Creating Perfect Columns

For vertical layouts:

1. Select all shapes in the column
2. Align Left (or Center or Right)
3. Distribute Vertical

Result: A perfectly aligned column with even spacing

Example:

• Vertical menus
• Step lists
• Timeline items
• Sidebar content

Building Grids

For grid layouts:

1. Create first row, Distribute Horizontal
2. Select all items in first column, Distribute Vertical
3. Copy the grid pattern to other cells

Result: Perfect grid with equal row and column spacing

Example:

• Image galleries
• Product showcases
• Icon matrices
• Calendar layouts

Circular Process Diagrams

For radial layouts:

1. Select 4-8 shapes
2. Distribute in Circle
3. Add arrows between shapes
4. Add center element

Result: Professional circular process diagram

Example:

• Lifecycle diagrams
• Iterative processes
• 360° feedback models
• Radial timelines

Advanced Techniques

Distribution with Variable Sizes

Distribution works with shapes of different sizes:

▢  ▢▢  ▢     →     ▢    ▢▢    ▢
(different sizes)   (equal gaps)

The gaps between shapes are equal, but shapes maintain their individual sizes.

Distributing Groups

You can distribute grouped shapes:

1. Group related shapes
2. Select all groups
3. Distribute Horizontal or Vertical

Each group maintains its internal structure while distributing evenly.

Nested Distribution

For complex layouts:

1. Distribute shapes within each section (horizontal)
2. Select the sections themselves
3. Distribute the sections (vertical)

Result: Grid-like layout with perfectly even spacing.

Custom Spacing After Distribution

If you need different spacing after distributing:

1. Distribute to create even spacing
2. Select individual shapes
3. Manually adjust specific gaps
4. Or use AI: "Add 20px between these two shapes"

Combining with Other Actions

Distribute + Align

The power combo for professional layouts:

Align Top + Distribute Horizontal = Perfect row
Align Left + Distribute Vertical = Perfect column
Align Center + Distribute Vertical = Centered stack

Distribute + Get/Set

Create consistent layouts:

1. Distribute shapes on first slide
2. Get Position of each shape
3. Go to next slide
4. Set Position to match

Result: Consistent spacing across slides.

Distribute + Multiply

Create grids quickly:

1. Create and distribute first row
2. Select the row
3. Use Multiply to create grid

Learn more about Multiply →

Tips & Best Practices

1. Always Align First

Best practice order:

1. Align (Top, Bottom, Left, Right, Center, Middle)
2. Then Distribute (Horizontal or Vertical)

This ensures shapes are both aligned AND evenly spaced.

2. Lock Anchor Shapes

The outermost shapes don't move during distribution:

• Position these first where you want them
• They become the boundaries for distribution

3. Check Your Selection

Distribution needs:

• Minimum 3 shapes for linear distribution
• Minimum 3 shapes for circular distribution

If you only have 2 shapes, use Align Middle (for vertical centering) or Align Center (for horizontal).

4. Use Distribution for Consistency

Distribution is perfect for:

• Repeated elements (buttons, icons)
• Navigation items
• Lists and menus
• Any layout requiring visual balance

5. Combine with Smart Suggestions

After selecting shapes, Offgen's smart suggestions will recommend the most relevant distribution action.

Common Mistakes

Mistake 1: Not Aligning First

Problem: Shapes are evenly spaced but not aligned

Before Distribution:     After:
▢                        ▢
  ▢            →           ▢
    ▢                        ▢

Solution: Align first (e.g., Align Top), then distribute

Mistake 2: Selecting Only 2 Shapes

Problem: Distribution doesn't work with 2 shapes

Solution: Use Align Center or Align Middle for 2 shapes, or add a third shape

Mistake 3: Forgetting Anchor Shapes

Problem: Outermost shapes are not where you want them

Solution: Position anchor shapes first, then distribute

Mistake 4: Hidden Shapes in Selection

Problem: Distribution seems wrong because there's a hidden shape

Solution: Check for transparent or off-slide shapes in your selection

Distribution vs. Alignment

Use Distribution When:

• You need equal spacing between shapes
• Creating balanced layouts
• Working with 3+ shapes

Use Alignment When:

• You need shapes on the same line
• Working with any number of shapes
• Positioning relative to each other

FAQ

Q: Why does Distribute Horizontal need 3 shapes?

A: Distribution creates equal gaps between shapes. With only 2 shapes, there's just one gap—nothing to distribute.

Q: Can I control the spacing amount?

A: Distribution uses the space between your outermost shapes. To control spacing, position the anchor shapes where you want them first.

Q: What if my shapes overlap after distribution?

A: Move your anchor shapes (outermost) further apart to create more space, then distribute again.

Q: Does Distribute in Circle work with odd numbers of shapes?

A: Yes! It works with any number from 3 upward.

Q: Can I distribute text within a shape?

A: No—distribution works on shapes. For text alignment, see Text Alignment actions.

Video Tutorial

See distribution in action:

Watch Distribution Tutorial →

What's Next?