Slices define rectangular export regions independent of element bounds. Use them to export specific areas, add padding around elements, or create consistent export dimensions.
Creating Slices
Slice Tool
- Select the Slice Tool from toolbar
- Click and drag to draw a slice area
- Slice appears with export handles
From Selection
- Select elements to export
- Right-click and choose "Create Slice"
- Slice matches selection bounds
Slice Properties
Dimensions
- X, Y - Position on canvas
- Width, Height - Slice dimensions
- Enter exact values in Properties panel
Export Settings
- Name - Export filename
- Format - PNG, JPG, SVG, PDF
- Scale - 1x, 2x, 3x, etc.
- Suffix - Add to filename (@2x, -large)
Slice vs Export Settings
| Slices | Element Export |
|---|---|
| Custom rectangular region | Element bounds |
| Independent of elements | Follows element |
| Fixed position | Moves with element |
| Can include multiple elements | Single element tree |
Managing Slices
Slices Panel
- View all slices in document
- Toggle visibility
- Rename and organize
- Batch export
Selecting Slices
- Click slice outline on canvas
- Or select in Slices panel
- Or select in Layers panel
Resizing
- Drag slice handles to resize
- Hold Shift for proportional
- Enter values in Properties
Content Modes
Include Content
- All Layers - Everything visible in slice area
- Linked Layers - Only linked elements
- Background Only - Just the slice fill
Background
- Transparent - No background
- White - White fill
- Custom Color - Any color
Multiple Scales
Export same slice at multiple sizes:
- Select slice
- In Export settings, click "+"
- Add 2x, 3x versions
- Each exports with suffix
Example outputs: icon.png, icon@2x.png, icon@3x.png
Exporting Slices
Single Slice
- Select the slice
- Click "Export" in Properties panel
- Choose location
- Slice exports with settings
All Slices
- File menu > Export All Slices
- Choose destination folder
- All slices export with their settings
Common Use Cases
- App Icons - Precise dimensions with padding
- Banner Ads - Fixed ad unit sizes
- Social Images - Platform-specific dimensions
- Sprites - Consistent spacing
- Screenshots - Exact capture regions
Tips
- Name slices descriptively for bulk exports
- Use consistent naming conventions
- Set up scales once, reuse across project
- Lock slices to prevent accidental moves
- Group related slices in folders