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.
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.
- Hide layers that you don’t need at the moment to see what is below them.
- 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.
- Hit Export.
- If you want to batch-export layer separately, just uncheck “Merge layers”.
- Adjust the format (PNG, JPEG, SVG, WebP) and edit scale.
- Rename each image asset to your liking.
- 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.
What is Avocode?
It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.
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.
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:
- automatic image export optimization,
- creating slices,
- getting measurements and dimensions,
- picking colors,
- Visual Studio Code integration,
- or the Atom integration.
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.
Just a quick reminder, all you need to share and inspect XD documents via Avocode is: