There’s a wave of designers entering the industry who learned the trade using non-Adobe products. I am one of those designers. While it’s great being considered a Sketch maestro at the agency I work for, I finally hit the Adobe wall helping a client catch up on some visual design work that required .ai files as the final deliverable.
After opening Illustrator and having a mild panic attack, I can appreciate and respect the journey of many-a-designer before me who spent years designing UI’s in Photoshop and/or Illustrator (as a side note: I find it comical that these tools that are used so prevalently to create wonderful user experiences are some of the most difficult, non-user friendly programs to learn).
After realizing I’d bitten off more than I could chew I started searching for a Sketch to Illustrator workflow and quickly realized that no such thing existed. So I started experimenting, and found a way to export a design from Sketch, open it in Illustrator and save it as an .ai file.
I suppose this is a great time to disclaim that this workflow is not perfect, tweaks will need to be made on the Illustrator end, some elements (shadows for example) will show up as different layers in illustrator, masking will need to be done in Illustrator (for some reason, SVG’s exported out of Sketch with any kind of mask are un-openable in Illustrator) etc etc. But by and large, following these steps will help you accomplish the aforementioned.
1) Create your design in Sketch.
2) Export the art board (group or slice) your design lives in as an SVG file.
3) Find the exported SVG file, right click on it, hover over ‘Open With’ and select Adobe Illustrator.
Wait for Illustrator to take a lifetime loading
4) Use the Selection tool (v) to select all the layers that have been imported to Illustrator.
5) Once everything is selected, press command + shift + g five to ten times.
If you’re watching the layers panel, you’ll begin to see the layers ungroup themselves.
Join 30K+ designers & developers by subscribing
to our monthly newsletter
6) Save the file as an .ai extension by going to File > Save As… > (Format) Adobe Illustrator (ai)
7) That’s it!
You now have a perfectly operational .ai file!
What do you think about this method? Please let me know if you have any tweaks, ideas or advancements.
What is Avocode?
It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.