offgen.ai Documentation
Stretch

Stretch to Shape

Resize shapes to align edges with other shapes

Stretch to Shape

Stretch to Shape actions resize selected shapes to align their edges with the extreme shapes in your selection—creating perfect edge alignment instantly.

How It Works

When you select multiple shapes and use a Stretch action:

  1. Offgen identifies the extreme shape in the stretch direction
  2. Other shapes resize to align their edge with that extreme
  3. The opposite edge of each shape stays in place

The shape at the extreme (leftmost, rightmost, etc.) doesn't change—other shapes stretch to match it.

Stretch Actions

Stretch Left

Resizes shapes to align left edges with the leftmost shape.

How to Use:

  1. Select shapes to stretch (minimum 2)
  2. Click "Stretch Left"
  3. All left edges align to leftmost shape

What Happens:

  • Right edge stays fixed
  • Left edge moves to match leftmost shape
  • Width changes

Visual Example:

Before:              After:
┌──┐                 ┌────┐
│  │                 │    │
└──┘                 └────┘
  ┌────┐             ┌────┐
  │    │             │    │
  └────┘             └────┘

Use Case:

  • Aligning left edges of cards
  • Creating consistent left margins
  • Aligning sidebar elements

Stretch Right

Resizes shapes to align right edges with the rightmost shape.

How to Use:

  1. Select shapes to stretch (minimum 2)
  2. Click "Stretch Right"
  3. All right edges align to rightmost shape

What Happens:

  • Left edge stays fixed
  • Right edge moves to match rightmost shape
  • Width changes

Visual Example:

Before:              After:
    ┌──┐             ┌────┐
    │  │             │    │
    └──┘             └────┘
┌────┐               ┌────┐
│    │               │    │
└────┘               └────┘

Use Case:

  • Aligning right edges of columns
  • Creating consistent right margins
  • Right-aligning containers

Stretch Top

Resizes shapes to align top edges with the topmost shape.

How to Use:

  1. Select shapes to stretch (minimum 2)
  2. Click "Stretch Top"
  3. All top edges align to topmost shape

What Happens:

  • Bottom edge stays fixed
  • Top edge moves to match topmost shape
  • Height changes

Visual Example:

Before:        After:
               ┌──┐
┌──┐           │  │
│  │           │  │
│  │           │  │
└──┘           └──┘
  ┌──┐         ┌──┐
  │  │         │  │
  │  │         │  │
  └──┘         └──┘

Use Case:

  • Aligning top edges of rows
  • Creating consistent headers
  • Top-aligning boxes

Stretch Bottom

Resizes shapes to align bottom edges with the bottommost shape.

How to Use:

  1. Select shapes to stretch (minimum 2)
  2. Click "Stretch Bottom"
  3. All bottom edges align to bottommost shape

What Happens:

  • Top edge stays fixed
  • Bottom edge moves to match bottommost shape
  • Height changes

Visual Example:

Before:        After:
┌──┐           ┌──┐
│  │           │  │
└──┘           │  │
  ┌──┐         └──┘
  │  │         ┌──┐
  │  │         │  │
  │  │         │  │
  └──┘         └──┘

Use Case:

  • Aligning bottom edges of footers
  • Creating consistent baselines
  • Bottom-aligning columns

Common Workflows

Creating Equal-Width Columns

1. Create 3 shapes of different widths
2. Position them as columns
3. Select all
4. Stretch Right

Result: All columns have same width (aligned right edges)

Or:

1. Select all columns
2. Stretch Left + Stretch Right

Result: All columns same width AND aligned on both sides

Making Full-Width Elements

1. Create narrow shape
2. Select shape + full-width reference
3. Stretch Left + Stretch Right

Result: Shape expands to full width

Aligning Cards

1. Create 3 cards of different sizes
2. Select all cards
3. Stretch Right (align right edges)
4. Stretch Bottom (align bottom edges)

Result: Cards aligned on two edges

Creating Matching Heights

1. Create shapes of different heights
2. Select all
3. Stretch Top (all tops align)
4. Stretch Bottom (all bottoms align)

Result: All shapes same height

Advanced Techniques

Stretching to Slide Edges

To stretch to slide boundaries:

1. Create tiny reference shape at edge
2. Position at target edge (e.g., right edge of slide)
3. Select shapes to stretch + reference
4. Stretch Right
5. Delete reference

Or use Dock + Stretch:

1. Dock shape to one edge
2. Stretch to opposite edge

Stretching One Dimension

Keep width/height while stretching the other:

For height only:
- Stretch Top or Stretch Bottom (don't stretch horizontally)

For width only:
- Stretch Left or Stretch Right (don't stretch vertically)

Progressive Stretching

Stretch in stages:

1. Stretch Right (align right edges)
2. Check result
3. Stretch Left (align left edges)
4. Now all shapes same width

Selective Stretching

Stretch only some shapes:

1. Select only shapes you want to resize
2. Include reference shape (the one to stretch to)
3. Apply stretch
4. Other shapes remain unaffected

Combining with Other Actions

Stretch + Align

Create perfectly positioned layouts:

1. Align Top (position shapes)
2. Stretch Right (match widths)
3. Distribute Horizontal (even spacing)

Result: Perfect aligned row with uniform sizes

Stretch + Dock

Create full-slide elements:

1. Dock Top (anchor to top)
2. Stretch Left (reach left edge)
3. Stretch Right (reach right edge)

Result: Full-width header

Stretch + Get/Set

Apply consistent sizes:

1. Stretch shapes to align
2. Get Size from stretched shape
3. Apply to other shapes elsewhere

Result: Consistent sizing across presentation

Tips & Best Practices

1. Include Reference Shape

Always select the target shape:

1. Select shapes to resize
2. Ctrl+Click reference shape
3. Apply stretch

2. Check Aspect Ratios

Stretching can distort shapes:

- Circles become ovals
- Square images become rectangular
- Keep aspect ratio in mind

3. Use Both Directions

For complete alignment:

Stretch Left + Stretch Right = Same width, aligned
Stretch Top + Stretch Bottom = Same height, aligned

4. Preview Before Committing

1. Stretch one shape first
2. If good, stretch others
3. Can always undo (Ctrl+Z)

5. Group After Stretching

Maintain relationships:

1. Stretch shapes to align
2. Group them (Ctrl+G)
3. Move as one unit

Common Patterns

Three-Column Layout

1. Create 3 shapes
2. Distribute Horizontal (even spacing)
3. Stretch Bottom (same height)

Result: Perfect 3-column grid

Card Grid

1. Create cards in grid
2. Stretch Right on each row
3. Stretch Bottom on each column

Result: Uniform card grid

1. Create sidebar and content area
2. Stretch Top + Stretch Bottom on both

Result: Both elements fill full height

Full-Slide Background

1. Create shape
2. Select shape + slide-width reference
3. Stretch Left + Stretch Right + Stretch Bottom

Result: Background fills slide

Stretch Behavior

Multiple Shapes

When stretching multiple shapes:

  • Each shape stretches independently
  • All reach the same target edge
  • Relative positions on opposite edge maintained

Grouped Shapes

Stretching grouped shapes:

  • Entire group stretches as one unit
  • Internal structure maintained
  • Useful for complex elements

Shapes with Text

Text boxes and shapes with text:

  • Shape stretches
  • Text reflows to fit
  • May need to adjust text after stretching

Images

Images can be stretched:

  • Image will distort if aspect ratio changes
  • Consider using crop instead
  • Or stretch in one dimension only

Troubleshooting

Problem: Wrong Shape Is Reference

Cause: Selected shape isn't at the extreme position

Solution:

  • Check which shape is at the extreme
  • Ensure it's included in selection
  • Or reposition reference shape first

Problem: Shapes Distorted

Cause: Stretched too much, aspect ratio changed

Solution:

  • Undo and stretch in smaller amounts
  • Or use Extend instead of Stretch
  • Consider keeping aspect ratio

Problem: Text Doesn't Fit

Cause: Shape stretched but text box didn't adjust

Solution:

  • Enable text auto-resize
  • Or manually adjust text size
  • Or expand text box margins

Problem: All Shapes Stretch

Cause: Reference shape included in stretch

Solution:

  • The extreme shape won't change
  • Others stretch to match it
  • This is expected behavior

Quick Reference

StretchFixed EdgeMoving EdgeChanges
LeftRightLeftWidth
RightLeftRightWidth
TopBottomTopHeight
BottomTopBottomHeight

What's Next?