Slices Panel - Azyrom Help

The Slices Panel helps you create and manage export regions (slices) on your canvas. Slices allow you to define specific rectangular areas to export independently, perfect for exporting icons, assets, or specific portions of your design.

Opening the Slices Panel

Go to View → Panels → Slices in the menu
The panel appears in the right sidebar
Shows all slices in your design with export counts

Creating Slices

Using the Slice Tool

Select the Slice tool from the Frame/Section/Slice dropdown in the toolbar
Click and drag on the canvas to define the export region
Release to create the slice
The slice appears in the Slices Panel
Configure export settings in the Properties Panel

Slice Properties

When a slice is selected, you can configure these properties:

Name - Used as the base filename when exporting
Position - X and Y coordinates on the canvas
Size - Width and height of the export region
Visibility - Show or hide the slice overlay
Color - Slice border color for identification

Export Settings

Each slice can have multiple export settings for different formats and scales:

Export Formats

PNG - Lossless raster format with transparency support
JPG - Lossy raster format for photos (smaller file size)
SVG - Vector format for scalable graphics
WebP - Modern web format with excellent compression
PDF - Portable document format

Export Scales

Export at different resolutions for various device densities:

0.5x - Half resolution (adds @0.5x suffix)
1x - Base resolution (no suffix)
1.5x - 1.5× resolution (adds @1.5x suffix)
2x - Double resolution for Retina displays (adds @2x suffix)
3x - Triple resolution for high-DPI displays (adds @3x suffix)
4x - Quadruple resolution (adds @4x suffix)

Export Options

Quality - Compression quality for lossy formats (0-100)
Suffix - Custom suffix added to filename (e.g., "-dark", "-ios")
Include Background - Whether to include background in export

Managing Slices

In the Slices Panel

Select - Click a slice to select it on canvas
Visibility Toggle - Click eye icon to show/hide individual slice
Show All - Click visibility icon in header to show all slices
Hide All - Click visibility-off icon in header to hide all slices
Duplicate - Right-click slice → Duplicate
Delete - Right-click slice → Delete or select and press Delete key

Export Summary

The panel footer shows:

Slice Count - Total number of slices in design
Export Count - Total number of exports (slices × export settings)

Exporting Slices

Export Individual Slice

Select a slice in the Slices Panel
Go to File → Export Selected Slice
Choose destination folder
All configured export variants are saved

Export All Slices

Go to File → Export All Slices
Choose destination folder
All slices with all their export settings are saved
Files are named using slice name + scale suffix + format extension

Filename Convention

Exported files follow this naming pattern:

[slice-name][custom-suffix][scale-suffix].[extension]

Examples:

icon-home.png - 1x PNG
icon-home@2x.png - 2x PNG
icon-home-dark@2x.png - 2x PNG with "-dark" custom suffix
logo@3x.webp - 3x WebP

Common Use Cases

Exporting Icon Set

Create slices around each icon (select Slice tool, drag around icon)
Name each slice descriptively (e.g., "icon-home", "icon-settings")
Add export settings: PNG @ 1x, 2x, and 3x
Export all slices to get full icon set

Responsive Images for Web

Create slice around image area
Name it descriptively (e.g., "hero-image")
Add export settings:
- WebP @ 1x for desktop
- WebP @ 2x for Retina displays
- JPG @ 1x as fallback
Set quality to 85 for good compression
Export to get all variants

Mobile App Assets

Create slices for app icons, buttons, and graphics
For iOS: Add PNG @ 1x, 2x, and 3x
For Android: Add PNG @ 1x (mdpi), 1.5x (hdpi), 2x (xhdpi), 3x (xxhdpi), 4x (xxxhdpi)
Use custom suffixes like "-ios" and "-android" if needed
Export all for complete asset package

Exporting Design Sections

Create slices around specific sections (header, footer, card, etc.)
Name slices to match design system (e.g., "nav-bar", "footer")
Add PNG export @ 2x for presentations
Add PDF export for print-quality versions

Tips and Best Practices

Descriptive Names - Use clear, lowercase, hyphenated names (e.g., "icon-search", not "Icon 1")
Consistent Sizing - Align slices to pixel boundaries for crisp exports
Include Padding - Add breathing room around assets for easier integration
Multiple Scales - Export at multiple scales for different device densities
Organize by Type - Use naming conventions to group related assets
Transparent Backgrounds - Disable "Include Background" for icons and logos
Quality Settings - Use 100 for icons/UI, 80-90 for photos
Format Selection - PNG for transparency, JPG for photos, SVG for vectors, WebP for web
Hide When Not Needed - Hide slice overlays when they interfere with design work
Batch Export - Export all slices at once instead of one-by-one

Slice Visibility

Slices are displayed as colored rectangular overlays on the canvas:

Each slice has a colored border for identification
Slice name appears in the corner when selected
Toggle visibility to reduce visual clutter while designing
Hidden slices still export normally
Use "Show All" / "Hide All" for quick visibility control

Keyboard Shortcuts

C - Activate Slice tool
Delete - Delete selected slice
Cmd+D - Duplicate selected slice
Cmd+Shift+E - Export all slices

Slices vs Frame Export

Feature	Slices	Frame Export
Purpose	Export specific regions	Export entire frames
Positioning	Anywhere on canvas	Based on frame bounds
Multiple Exports	Multiple formats/scales per slice	Single export per frame
Use Case	Icons, assets, partial exports	Screens, mockups, complete views
Management	Slices Panel	Layers Panel + Export Dialog