Ever since the launch of Sketch, the screen design space has changed for a lot of designers. But there were a lot of creative folks who have been slightly left out — all Windows and the Linux users. Luckily, Adobe has offered a screen design solution that was not just well crafted and surely competitive to Sketch, but also available on Windows.
When Adobe XD introduced their platform to integrate with 3rd party tools, we were excited to be invited to the table. After we introduced the macOS integration in January 2018, our Apple users were happy, but something was missing…
- To import an XD design to Avocode, you needed to have the Adobe XD app installed on your machine. Since some people only need to preview the design, get specs and assets — this was a major blocker for them.
- And of course, the integration was available only to macOS users.
Soon after the release, we were getting messages like:
“Why everything is for mac? There are several Windows users who are getting started in UX and use Adobe XD. Do pleaase make this possible, it’ll help a lot of users.”
And we had to agree. This was evident even from our stats soon after the release. At the time Avocode supported Sketch, PSD, and XD, and only 3% of all imported designs per day on average were in the XD format.
So we decided to build a new integration, that would enable anyone to import, preview and inspect Adobe XD files also on Windows and Linux and completely independently on the Adobe XD app. It even works on the web, so you can import your files just by using the browser (at best Chrome or Safari).
Only two days after releasing it, the number of imported XD design designs has more than doubled (to 7% of all designs that are imported to Avocode) and continues to grow.
Would you like to try the cross-platform import of XD files?
Log into your Avocode account at app.avocode.com or get one at avocode.com/signup and test it for 14 days for free. Then grab any XD file and drag and drop it to any project in Avocode. Once the file is uploaded, you’ll be able to open it and inspect it. If there are some fonts missing, just upload them.
How we learned to read and render the .xd data format
To import designs independently of the design tool, plugins or the operating system, we had to improve our Monroe rendering. Every time we add a new format (currently we support Photoshop, XD, Sketch, and Figma) we need to:
- Understand how the design is represented how its file data structure works.
- Parse the design, i.e. convert the format data structure into our 🐙 Octopus file format (app-independent design format).
- Render the design in the Octopus format so it’s as close to the original as possible — including layout, all named layers, shapes, and text fields.
This approach allows us to provide platform independent design hand-off, but also to give the developer the freedom to have real access to layers — to export anything without having to ask the designer to prepare it for him.
Now, let’s have a look at how the XD file looks under the hood. The data structure of the .xd format is packaged much like a ZIP file. The first step to translating the file to Octopus (our app-independent design format) is, therefore, unpacking the file.
Once we have all the resources (like bitmap images), we start the actual parsing process. First, we pre-process the source data, and then we assemble our own geometric model of the design. Then we convert layer effects, data about text layers, repeat grids, masks, etc.
With each format, there are some data that are easily readable and some are rather tricky. The most tricky part of the .xd format for us is that there is no explicit representation (i.e., position and dimensions) of the bounding box of objects.
The bounding box of an object is extremely important for us, not just to assemble and render the design correctly, but to give the developer the information about sizes and distances between objects while inspecting.
Some formats, like Sketch, give you a number that represents either an absolute or relative position so calculating the bounding box is quite easy. XD uses a so-called transformation matrix to depict where each point, shape, curve and so on is positioned. The transformation matrix is a consistent way to represent affine transformations. It uses six values (a, b, c, d, tx, ty) to describe a mathematical combination of the object transformation — such as translation, rotation or scaling.
This way when you click on individual layers or select multiple layers in Avocode — you always know the right size of the selected object. The size is shown in our Measure tool as well as in auto-generated code that you can pick from any layer.
While trying to figure out the transformation matrices in XD, we stumbled upon a few curious cases:
For example, when you draw a simple rectangle in Adobe XD, this is how it’s represented in the .xd format.
It looks quite readable, right? OK, let’s rotate this rectangle.
And things start get more complicated, when you rotate each layer, group the whole thing and then rotate a bit more. You might expect that in this case, you’ll have three different representations of the object position: 1) red rectangle, 2) blue rectangle, and 3) the whole group. Well, yes, and no.
There are indeed three different representations of the coordinates, however, also the pivot point (the default center point how the rotation is calculated) is changed.
One more challenge worth mentioning is a gradient fill on a vector shape. You surely know that a gradient is set by sort of a linear curve that represents the direction from point A to a point B — like this:
A gradient is just a property of fill, which is a property of a shape (the layer itself). Regarding the data representation, you can think of a gradient direction as a temporary helping object.
The tricky part is when you change the direction (and angle) of the layer with the gradient, or even when you rotate the whole shape. In both cases the A and B points of the gradient’s direction change. This has forced us to create a new geometric model that would calculate the temporary helping object’s coordinates and keep them with the layer’s data at all times.
How do layered XD files look inside Avocode? The same…
Now that we have parsed the design format, it’s time to represent it visually. To do that, we’re using our custom Monroe rendering engine. It’s a set of sub-systems, each is responsible for a part of the design — design layout, vector shapes, text layers, and layer effects and all of them work side by side thanks to our orchestrator — the core of the rendering engine.
The trickiest part of design rendering is text layers. We’re using an open-source library called Free Type, that is also used by Linux or iOS to render fonts. It’s rather old but works pretty well. The challenge is when the design tool that has created the design (like Adobe XD) is using a different font rendering library. For example, when there is a different method to do type anti-aliasing, there could be little differences in how the rendered result differs from the original 〜 up to 1%.
However, in 99% of all cases, the result of our Monroe rendering looks just like the original.
See for yourself:
We believe that true design to code collaboration should not be blocked by different platforms. Therefore we keep developing the Octopus (our universal design format) along with our Monroe rendering engine to create one platform that gives people access to a wide range of design formats — without having to own the actual design tool. At the moment we can directly import PSD, XD, and Figma designs on any platform, and Sketch designs on macOS.
Releasing the cross-platform Adobe XD integration has verified that our updated Monroe rendering can deliver close to 100% design rendering accuracy. Therefore, we’re excited to announce, that in a matter of weeks, we’ll be releasing a new Sketch integration! It will allow our users do the same as with XD — to import Sketch designs on Windows, Linux, macOS, or the web — without the Sketch application installed on their machine.
Up next, we’re planning to release our all new Avocode 3.0 in a brand new coat. And then? Then we’re also planning to add a feature to play Sketch and Adobe XD prototyping flows in Avocode.
Stay tuned and check out Twitter for updates.