The Slice Tool in Figma is a powerful but often underused feature that helps designers export specific portions of their designs. Whether you’re preparing assets for development, exporting individual UI elements, or slicing complex layouts into manageable pieces, this tool gives you precision and control.
What Is the Slice Tool?
The Slice Tool allows you to define custom export areas in your design. Think of it as a way to create a “snapshot” of part of your canvas. Unlike frames or groups, slices are not design elements themselves—they’re purely for export purposes.
How to Use the Slice Tool
1. Select the Slice Tool
- You can activate the Slice Tool in two ways:
- Click the slice icon in the top toolbar (it looks like a square with a scissor icon).
- Press the keyboard shortcut “S”.
2. Draw a Slice Area
- Click and drag anywhere on the canvas to draw your slice.
- You’ll see a bounding box labeled “Slice”, with its dimensions shown in the properties panel.
3. Adjust the Slice
- After drawing, you can resize or move the slice like any other object.
- Use the right sidebar to set export formats like PNG, JPG, SVG, or PDF.
- You can also rename the slice for better organization in the export panel.
4. Export the Slice
- Go to the Export section in the right panel.
- Choose your desired format and resolution.
- Click Export [Slice Name] to download the image.
Best Practices
- Use Slices for Export-Only Elements: Don’t use slices for layout—they don’t affect your design. They’re invisible in the design view unless selected.
- Combine With Grids or Guides: For pixel-perfect exports, align slices with your layout guides or grid system.
- Group Slices Strategically: You can create multiple slices across your project and export them all at once using File > Export > Slices.
Common Use Cases
- Exporting individual icons or assets for development
- Creating thumbnails or preview images from complex designs
- Exporting overlapping UI elements that don’t belong to the same group
- Preparing image assets at multiple resolutions (e.g., 1x, 2x, 3x)
Keyboard Shortcuts Recap
| Action | Shortcut |
|---|---|
| Activate Slice Tool | S |
| Export | Cmd/Ctrl + Shift + E |
Final Thoughts
The Slice Tool in Figma is perfect when you need clean, precise asset exports without restructuring your layout. By mastering slices, you’ll streamline your handoff process, eliminate unnecessary layers, and gain better control over what gets exported and how.
Designilo 