medium bookmark / Raindrop.io |

We strongly believe that design hand-off should be smooth — no matter the design tool you’re using. Therefore we couldn’t be more excited to tell you that Adobe XD CC now integrates with Avocode. After months of a fruitful cooperation, we’re ready to release the first version of Avocode which supports the .xd file format.

It’s time to add your Adobe XD documents to Avocode

We wanted to bring you this integration as soon as possible. It’s packed with functionality that will help you turn designs to code faster and more features will follow soon. Let’s have a look.

• At this moment, the integration only works on macOS and requires you to have Adobe XD CC (version 4.0 or newer) installed on your machine.

3 ways to import a .xd file into Avocode

Before you do so, please make sure you have saved the XD document.

1. Open Avocode and drag & drop it into a project

Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the .xd file.

2. Open Avocode and press +ADD DESIGN in any project

Browse to select the design file you wish to upload. Avocode will automatically detect if Adobe XD app is installed, and if yes, it will launch it, and import the .xd file.

3. Open the design in Adobe XD app and go to File/Export/Avocode

Avocode app will be launched and import the .xd file into your project.

Tip: You can also use a shortcut CMD + ALT + E.

Avocode imports the Adobe XD document by default. If you’d like to select artboards that should not be synced, place a dash “-” or an underscore “_” in front of the name of the artboard.

Learn more about how the Adobe XD integration works.

How to inspect designs created within Adobe XD in Avocode?

As mentioned above, this is the first version of the Avocode with support for the Adobe XD file format, and some features are still under development. Nevertheless, there are many things that will ease your design hand-off, coding, collaboration, versioning and more.

Measure sizes and distances

Select a layer to find out its precise size and hover over other layers to see distances. You can also select multiple layers at once.

Pick colors

Switch to the Color picker tool and then click on any layer to automatically copy the color code. Web projects have colors pre-set as HEX, Android projects as HEX8, and iOS projects as UIColor. You can change the color code at any time between these codes and also to RGBa or HSLA. If you press and hold your mouse you’ll get a looking glass to select precise pixels to pick colors from.

Export code from layer styles

Avocode currently generates 10 different code languages from layer styles: CSS, Less, Sass, SCSS, Styled Components, CSS in JS, React Native, Android, and Swift. Once you click on a layer, it’s styles will be translated into code which will be displayed in the left sidebar. You can change the code language at any time. There are also multiple ways how to customize the code output and you can even create variables from certain properties.

Slice the design and export bitmaps

You can use the Slice tool to cut out any part of the design and export it either as a JPG, PNG, or WebP image. You can move the selected area of the slice anywhere and also create multiple slices at once, select them by holding the SHIFT key and export them at once. To get rid of a selected slice area, just select it and hit DELETE.

Share designs with a public link

You can get a public sharing link to any design that has been uploaded to Avocode and share it with anyone.

Comment on designs

Everyone in your Avocode team with access to the design as well as people with the public link to the design are able to open the design in the Comment mode. There you can start a discussion either about the whole design (via General comments), or on a specific point (via pinpoint Annotations), or on a specific area (via area Annotations).

Keep design versions from Adobe XD in sync

If you drag and drop an updated document from Adobe XD above an existing design from Adobe XD in Avocode, it will be uploaded as a new version. Then you can switch between the versions chronologically — in both Inspect and Comment mode.

Download original files

Avocode also works as a cloud service. All Adobe XD documents that are synced to Avocode can be later downloaded.

These features are now disabled for performance reasons and will be added soon:

• Layer visibility toggle (hide/show layer)
• Single or multiple layer export to PNG, JPG, SVG, WebP, and Base64
• Scaling vectors for layer export

Please note that all of these features already work with other supported formats (PSD and Sketch).

What’s coming soon?

We want to give you a fully-featured Avocode experience for the .xd file format as soon as possible. In the next version we’re planning to a fully-featured Inspect mode. We’ll be enabling the above-mentioned features that are connected to layers.

Thanks to our new Monroe rendering engine, you’ll be able to export all layers (even without marking them for export inside Adobe XD), scale vector shapes, hide layers, and export multiple layers at once.

How to try the new Avocode integration with Adobe XD CC?

All you need to do is to update your Avocode macOS desktop app and get the latest version of Adobe XD.

If you’re new to Avocode, just sign up for a free trial and see for yourself if you find Avocode helpful.

Since this is a first version of Avocode with the support for Adobe XD CC, please let us know at [email protected] if you’re experiencing any troubles or got ideas for improvements.