Note: Adobe Illustrator file format support is currently in the experimental phase. Read what effects are currently supported. Rendering precision will be optimized over time.

How to import an .ai file into Avocode?

1. Before your start, please make sure you have saved the AI document as PDF compatible and that all objects that you want to hand-off to the developer are placed on artboards. Also please check that you're using RGB color profile.

2. Click Save or Save as…

3. Once you confirm, you’ll see a window with the document information and properties. Make sure that the option Create a PDF Compatible File is checked (it is by default, whenever you save a file). 

 NOTE: PDF incompatible files can't be opened in Avocode.

4. Open Avocode desktop app or app.avocode.com and drag & drop the AI file into any project or subfolder.

 What's supported in the Experimental version:

  • Shape layers (Boolean operations)
  • Combined shape layers
  • Group layers
  • Text layers
  • Bitmap layers
  • Linear gradients
  • Radial gradients
  • Adjustment layers (Color fill, Color fill opacity)
  • Masks (Layer masks, Group layer masks, Clipping masks)
  • Layer styles (Color overlay, Blend modes, Gradient overlay, Opacity)
  • Layer panel

 

Work 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’ll 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. The only way to find out line height is to measure it.

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

How to sync AI files via a plugin?

While it's possible to directly import Illustrator files to Avocode (drag & drop) you can also use our plugin to sync them.

 

How to add a new AI file version?

Just drag an drop the .AI file on top of the previous version in Avocode.

 

Troubleshooting:

If you have any questions regarding the file format or have found a rendering issue that is not described above, please contact our support and be ready to send them your .AI files so our rendering team can investigate it.

If you would like to inspect Illustrator vector smart objects inside of Photoshop files, please upvote this feature request.

Did this answer your question?