Hand-off Adobe Illustrator designs the modern way

Automatically generate accurate specs, image assets, and code from AI design files.

1000+ upvotes on our UserVoice

After huge pressure from community, we’ve decided to support the Adobe Illustrator file format.

Please!!! This would be great. Will migrate from Zeplin for this one.

@Anonymous

+1. Please do it as soon as possible!

@Anonymous

Importing Illustrator files into Avocode would be just awesome!

@Matthias

Please support Illustrator, my company would use Avocode without question.

@Peter Gill

YES! That would be so great to have Photoshop AND Illustrator supported.

@Aurélie R.

Please!!! This would be great. Will migrate from Zeplin for this one.

@Anonymous

+1. Please do it as soon as possible!

@Anonymous

Importing Illustrator files into Avocode would be just awesome!

@Matthias

Please support Illustrator, my company would use Avocode without question.

@Peter Gill

YES! That would be so great to have Photoshop AND Illustrator supported.

@Aurélie R.

Instantly turn AI designs to code, specs, and assets.

1. Save your AI design

Just make sure it’s a PDF compatible file.

2. Import your design

Upload your design directly or use our Illustrator plugin.

3. Job done

Your design is ready for developers to inspect.

Let developers open and inspect AI files online or on any OS.

macOS

Windows

Linux

Web

Developers first

No need to buy design tools or ping the designer all the time.

Pixel-perfect code

Instantly turn layer styles and effects into CSS, Swift, and Android code.

Accurate measurements

Precisely measure sizes and distances between layers in px, pt, and dp.

Easily pick colors

Get HEX, HEX8, HSLA, RGBa and UIColor code in one click.

Export any image assets

Export single or multiple layers in any format or resolution.

Be always up-to-date

Keep design versions in sync to always know which version is final.

What is supported in the AI file format?

The Adobe Illustrator support feature is still under the development. Take a look at known issues and supported effects below. Found a bug? Help us by reporting it.

Supported effects:

Shape layers
- Boolean operations
Group layers
Text layers
Bitmap layers
Linear gradients
Radial gradients
Adjustment layers
- Color fill
- Color fill opacity
Masks
- Color fill
- Color fill opacity
Layer styles
- Color overlay
- Blend modes
- Gradient overlay
- Opacity

Current limitations:

Working with layers

You can toggle layers, multi-select, and export them.

Since the structure of nested group layers is flattened we can only show one level of grouping. Only parent layers are named exactly as in Illustrator and Text layers are named based on the beginning of their text content. Currently we cannot represent nested layer names, so we’re using generic names: Path or Bitmap.

Working with layer effects

Shadows are shown as bitmaps, and strokes are represented as a separate path so you need to select the stroke base layer and the fill layer together and export them merged together. This also means that the layer property will be represented in code export separately for each layer.

In some cases, dashed stroke is displayed as a compound path in the shape of the particular dash style.

Working with text layers

You can inspect the text layer font-family, size, width, and copy the text contents. In some cases, each text line of a paragraph is shown as a separate layer therefore line-height is not included in the code export.

Workaround: Use the measure tool to get text line-height.

Strikethrough and underline are represented as path positioned over the text, therefore the layer effect is not in the code export.

Join thousands of teams working smarter with Avocode