How to open Adobe Illustrator design files online?

How to open Adobe Illustrator design files online?

Matous RoskovecMatous Roskovec

Is there any alternative to Adobe Illustrator that opens AI files?

Yes there is and this tutorial will show you how.

As promised, you don't have to buy the AI app. Just make sure you have:

  • A PDF Compatible AI design file (saved in Adobe Illustrator CC 2015 or higher)
This window appears when you're saving your AI file.
  • Document Color Mode set as RGB Color.
  • Avocode account (comes with a 14 day free trial) to open the AI file ? online or via a desktop app (works on macOS, Windows, and Linux)

Then you simply take the Adobe Illustrator file and drag & drop it to Avocode.

Once the file import is finished you can double click to open it.

Then you can view each artboard of the file and slice it for export.

Just click around to select layers and export them in any resolution or format (PNG, JPEG, SVG, WebP).

Looking for a quick way to turn AI files to websites and mobile apps?

You're not alone.

We found out that many companies still use Illustrator due to leadership preference, legacy design files that are still used or simply because the modern lightweight design tools cannot match Illustrator's vector graphics feature set. In fact, over 1000 people have asked us to do something about this.

If you too are tired of red-lining AI files for developers or exporting all assets one by one for different resolutions or measuring objects with the selection tool in Illustrator, you might want to keep reading.

With Avocode you can also measure sizes and distances and auto-generate CSS, Swift, Android and React Native code just by clicking on layers. You can also pick color codes in HEX, HEX8, RGBa, HSLA, or UIColor.

Or you can simply share the file via a link with developers and they can do the same thing open the file without Adobe Illustrator.

This is how the whole thing works:

To explain your design thinking or to leave feedback, just switch to the Comment mode, click or drag on the canvas and start typing. You can mention other team members and change the color of the comment based on priority or status.

If you have agreed on a design iteration and you would like to add a new design version, just drag & drop the new version of an Illustrator file onto an existing one. You can also sync the AI file via our plugin - just make sure it's named just like the one before to create a new version. All versions are sorted chronologically and you can switch between the design file states any way you like.

Join 30K+ designers & developers by subscribing
to our monthly newsletter

Why your developer will love you for using Avocode to share AI design files?

Before we have started building the AI hand-off feature, we asked around what people would like use it for:

We could save a lot of time on having to semi-manually export Illustrator to PSD. Also, it would be nice to make developers? lives easier.

  • Now you can save time on pouring illustrations to Photoshop and maintain vectors instead of having everything rasterized. Plus you can save money (and developers patience) on buying Illustrator licenses and keep everything in vectors.

Currently, I have to paste AI designs into XD, fix up errors, then push XD to Avocode.

  • Good news is that you can import AI files to Avocode directly now.

It would be super cool to have a live library that was automatically updated on web/in an app, managed in Avocode, and designed in Illustrator/Sketch.

It would be nice to connect some of our older AI design files to Avocode since they continue to be used by developers.

  • Yes, we have heard many times that even after migrating to Sketch, many companies still have a lot of legacy design files in Illustrator.

I would like to be able to generate AI assets and specs for my icons, SVG files and UI designs for Web, Android, iOS, macOS and Windows.

  • Well, with Avocode you can.

To find out more about what layer effects are supported and how to work with Illustrator layers, make sure to check out this more detailed page.

Feel free to try this method of opening and inspecting AI files and let us know how it works for your in the comments. ?

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.