Sketch & InVision workflow for developers
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/"
doneAfter 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*
doneAfter 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.
