Good news for all Adobe XD Windows users: New Avocode integration here
Product Update

Good news for all Adobe XD Windows users: New Avocode integration here

Matous RoskovecMatous Roskovec

With every new update, Adobe XD strives to make the work of designers a bit easier and smarter. The latest release is no different, however, the benefit for designers is not as visible as usual. So, what’s the big news? This time, Adobe XD opened up their integration for 3rd party tools also on Windows.

While Avocode remains the only design hand-off tool that can import XD files directly by drag & drop — without design tools and on any operating system — we understand that sometimes you don’t want to leave your favorite design tool environment to hand-off designs. Starting today, you can sync XD artboards to your team in Avocode just by pressing CTRL + ALT + E and selecting a project.

All you need is the latest Adobe XD app (btw, it’s free) and the latest Avocode desktop app.

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

5 reasons to share your XD files to developers via Avocode

1. Designers save time on preparing asset and describing specs

If you’re new to Avocode — it's a tool for turning designs to code faster.

Unlike other design hand-off tools, Avocode doesn’t force designers to mark layers for export before syncing the design. We’re using a custom rendering technology that displays the whole layered design inside our app. This approach gives the developer complete access to layers, layer groups and of course — image export.

2. Developers can toggle layers and batch-export bitmap images (even from the repeat grid)

With Avocode layer panel you can hide layers, for example, to reveal what is beneath overlays.

  1. Hide layers that you don’t need at the moment to see what is below them.
  2. Select multiple layers (in this case from the repeat grid), either from the layer panel or by clicking on the canvas and holding the SHIFT key.
  3. Hit Export.
  4. If you want to batch-export layer separately, just uncheck “Merge layers”.
  5. Adjust the format (PNG, JPEG, SVG, WebP) and edit scale.
  6. Rename each image asset to your liking.
  7. Hit Export.

3. Developers can edit export path and change image format for each asset

Avocode gives you an option to set (and always change) platform (Web, iOS, Android) and export path on the level of projects or subfolders. While all children designs automatically inherit these default settings, you can always change it on the level of the design or for each and every asset.

For example, while your default Web Project settings predefines CSS code, units in px, and colors in HEX, and for example an export path to folder in Users/matt/Desktop/testing, on the level of the design, you can change the code to Sass, units to pt, colors to RGBa, and during image export edit the export path to Users/matt/Desktop/testing/img/icons and change the image format from PNG to SVG.

Tip: If some object like a logo consists of multiple shapes, you can select them by dragging over the canvas and exporting them together (Merged), still as SVG.

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

4. Developers can change code language and adjust the code output to fit their dev stack syntax conventions

Avocode currently auto-generates code from layer styles to CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android and React Native. Just like with color format and units, default code export is pre-set by the Project settings, however, you can always change it on the level of the design.

Each code language can be adjusted to your conventions and also with variables.

Below, you can see an example of a developer inspecting a shape with a gradient hiding comments in the Android code.

There are many other features, that can speed up the process of bringing a design to code, such as:

5. Both developers who need to inspect and stakeholders who need to comment can quickly navigate between screens and versions

No matter what XD artboard you’re currently inspecting you can quickly switch to other artboards from the name breadcrumbs or to previous versions from the version number drop-down.

When you’re commenting on a design, you can do the same, plus you can change versions with the version slider. Each comment is design-version specific and will keep showing on all versions until you solve it.

Learn more:

About Avocode version control system About the technology that makes it possible to import designs directly and access layers in Avocode

Just a quick reminder, all you need to share and inspect XD documents via Avocode is:

the latest Adobe XD app (btw, it’s free), and the latest Avocode desktop app. If you don’t have an Avocode account yet, you can create one for free here.

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.