4

ASK DN: How do you export assets with transparent bounds from Sketch?

over 4 years ago from , UX/UI Designer

How do you export assets (icons etc.) with transparent bounds. This is particularly important in android apps. I never really had a need for this and that's why I hit a roadblock. If you export your assets in Sketch, it will ignore assets with 0% transparency even if they are a part of the same exportable group.

Here is an example.Example Image

5 comments

  • Ketan Anjaria, 4 years ago

    Or just create art boards.

    2 points
  • Alex ChanAlex Chan, 4 years ago

    I'm not sure if this is what you mean (I don't deal with Android assets), but you can use the slice tool to define a custom dimension around you asset. Sketch will automatically define a bounding box that crops transparent layers, but you can resize/reposition it afterwards (or just click and drag to create the slice rather than clicking on the group with the slice tool).

    1 point
  • Roberts Ozolins, 4 years ago

    I found a solution to this answer. Even though it's very time consuming, it seems to do the job for me.

    https://goo.gl/VFmd7D

    0 points
    • Gabe WillGabe Will, 4 years ago (edited 4 years ago )

      It's pretty fast once you get the workflow down. If you're designing for Android, it'd look like this:

      1. Download an SVG from Google's icon library.
      2. Drag the SVG into Sketch. The bounding box should be included with the vector.
      3. Hit S to switch to the slice tool and click on the bounding box; this will create the a new slice with the bounding box's dimensions.
      4. Get rid of the original bounding box and rename the new one (ic-menu-share, or whatever). Export at desired sizes.
      5. Bonus: Use this script to rename your exports.
      1 point