Sketch & InVision workflow for developers

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

💎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).

Sketch Preferences
Sketch 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.

InVision project
Your are gonna end up with a folder similar to this

🎩✨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 😉.

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

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

🎁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.


Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Lan Belic

Written by

Lan Belic

Product Designer // www.lanbelic.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond