Sketch & InVision workflow for developers

Lan Belic
Lan Belic
Mar 17, 2018 · 4 min read

I’ve been using Sketch for all aspects of design work for quite some time now but when creating an iOS and Android project within the same file, I’ve had problems with exporting assets.

At MOBGEN Accenture Interactive, we’ve recently been using InVision suite for the design handoff to developers and in order to keep projects clean we use a single project featuring both iOS and Android designs.

When it comes to the measurements, InVision works pretty well for us; everybody can switch projects and measurement types easily. However when it comes to exported assets we’ve stumbled upon few problems. 😫

In order to make assets exportable and downloadable in InVision, designers have to mark each of those elements as exportable or use slices, defining the size and type to export at.

By doing a bit of research on sizes needed for iOS and Android, we can see there are some shared sizes.

💎Setup Sketch file

Start by navigating to Sketch ‘Preferences’ and create a new preset for export options. I’ve named mine ‘All assets’ — this includes all export options for Android and iOS combined (we’ll sort and rename assets later with a script).

Before uploading any screens to InVision, make sure you’ve marked all assets you need as exportable (or used slices). Same goes for if you’re not using InVision, mark all assets needed as exportable, then click ‘Export all’ on the far right of the toolbar.

Invision

Navigate to your project within InVision. Click on one of the screens and enter ‘Inspect mode’ (you can also use ‘i’ on keyboard). Now select the ‘Assets’ tab and ‘Download all’ assets.

After downloading, move all assets to your desired folder — I suggest creating a temporary folder on desktop while you go through the next steps of ‘magic’ and then copying and pasting the assets into your project.

🎩✨Where the magic happens

It’s going to require a bit of #hackerSkills 👨‍💻using the shell command — but don’t worry — it’s mostly just copy and paste 😉.

I’ve written two shell command scripts that’ll go through your assets folder and rearrange all the assets into a proper format.

And it goes a little something like this…

Open your Terminal and copy and paste the code you need. Before pasting, change the ‘yourDestination’ to your actual folder destination (for example to /Desktop/temp).

For Android assets

cd yourDestination
mkdir xxxhdpi; mkdir xxhdpi; mkdir xhdpi; mkdir hdpi; mkdir mdpi; mkdir ldpi
done
for file in $(find . -type f -name '*@4x*'); do
mv "$file" "xxxhdpi/${file/@4x/}"
done
for file in $(find . -type f -name '*@3x*'); do
mv "$file" "xxhdpi/${file/@3x/}"
done
for file in $(find . -type f -name '*@2x*'); do
mv "$file" "xhdpi/${file/@2x/}"
done
for file in $(find . -type f -name '*@1,5x*'); do
mv "$file" "hdpi/${file/@1,5x/}"
done
for file in $(find . -type f -name '*@0,75x*'); do
mv "$file" "ldpi/${file/@0,75x/}"
done
for file in $(find . -type f -name '*.png'); do
mv "$file" "mdpi/"
done

After running the script you should end up with something that looks like this. All asset files will be renamed and put in the according folder.

For iOS assets

cd yourDestination
for file in $(find . -type f -name '*@1x*'); do
mv "$file" "${file/@1x/}"
done
rm -f *@4x*
done
rm -f *@1,5x*
done
rm -f *@0,75x*
done

After running script you should end up with something like this. The script will remove files for sizes x4, x1.5, x0.75 and rename x1.

🎁Bonus

If you’re not already using a Sketch plugin to compress all your images, I suggest trying ImageOptim or TinyPNG.

🏆Fast & easy

We’ve found this workflow to be very useful. We can create all assets for iOS and Android in one single project — meaning developers end up with optimised and organised assets.

I’m Lan Belic, a Designer living in Amsterdam. I created this not only to make our own lives at MOBGEN easier, but to also hopefully do the same for you. Got any thoughts or maybe a feedback? ➡️ Give me a shout on Twitter!

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store