How I managed to convert a design library with all its symbols/components between XD, Sketch, and Figma

Design systems libraries are about flexibility and should always aim to empower efficiency. Unfortunately, with tool competition brewing big, design teams and individual freelancers are left in a long battle to convert long and complex design libraries. Let us understand how to design libraries in XD, Sketch, and Figma and how we can move our design libraries between these tools.

Tool Basics

• Adobe XD is a vector design tool used for wireframing, mockups, and simple click-through prototyping. It is available on Mac, Windows, and Android platforms.
• Sketch-app is a similar vector graphics tool for UI/UX designers but only for Mac. It is known to extend its functionality through an extensive library of plugins.
• Figma is a cloud-based design tool similar to Sketch and UX but made better for team collaboration.

Now, let’s dive into the world of symbols!

Basics of symbols and how are they used

Symbols can be a powerful addition to your designs. Symbols are UI elements that can be reused across your design files. They supercharge your designs to make them more consistent and allow changes to be made quickly. You can create symbols out of layers, groups, or even other symbols.

In XD, Figma, and Sketch — the master symbol is created first, and then an instance of the master symbol is placed throughout different screen designs with the same styling. The most important reasons for using a symbol is time saving and consistency. When the master symbol is updated, then instantaneously, all of its instances gets updated. This also keeps the designs across screens consistent. A user can choose to have multiple master symbols in a single file.

Symbols icon variants from the Figma blog

Difference between symbols in XD, Sketch, and Figma

Symbols or components (in Figma) are a great way to reuse elements throughout your design files. Though symbols are the same concept everywhere, it is implemented with slight differences across tools. In Sketch, master symbols and instances can’t live on the same page as in Figma/XD. This means that editing and creating of symbols cannot be done on the same page in Sketch.

Symbol Overrides

XD symbols are a bit different from Sketch and Figma, though. Symbol overrides have way less flexibility in Sketch/Figma than they have in XD. In XD, you can override text, image/bitmap, size & layout, style-appearance, and structural changes in a symbol/component. Symbols/components can also be responsively resized. The thing that remains the same is that individual instances remain specific to that element, and master changes are propagated across all the instances where the property hasn't been customized.

Check out this useful resource about working with Components in XD 👈.

Snapshot from Adobe XD user guide

In Figma, though, you can override many properties in an instance like color, type-alignment, strokes modification, styles, opacity, blend mode, fills, effects (drop shadows, blurs), text, visibility (show/hide).

Override example from Figma’s blog

While in Sketch, a user can only over-ride text, image, prototyping hotspots, text/layer styles.

Override example from Sketch blog

Libraries

In XD there is no provision for separate library files. At the same time, both Sketch and Figma have libraries for easy consumption of symbols. In Sketch, libraries are files that you can specify as a library within the preferences panel and access all of its symbols in Sketch another file. While in Figma, you can select which components you want to publish as part of the team library. A user has to add a period at the beginning of the component name to let Figma know that the component shouldn’t get published.

Moving libraries from XD to Sketch/Figma

Even though Adobe XD is free for starters, it lacks serious version control capabilities and is one of the significant reasons why teams are choosing to move away from XD to either Sketch (+Abstract) or Figma.

It’s easier to transition from Sketch to XD then the other way around, as XD can open Sketch files with excellent fidelity. If you’re moving from XD to Sketch, you should factor in the cost involved in switching tools on top of the 99$ you will be paying for a Sketch subscription.

As far as XD and Figma comparison is concerned, there are more than 100 reasons why designers are migrating to Figma. The biggest one is that local files must be synced to Creative Cloud (CC) to share and struggle with 2GB 😟 of file storage on the starter plan. A one-person team can quickly move projects, but it’s not that easy for a small or medium-sized team.

Here is where a library converter comes into place. Converters are not a popular choice when it comes to library migration. The usual advice that most experienced designers will give you is to discard all your symbols and start all over again or to convert your XD libraries to SVG and then open those SVGs in Figma, but that shouldn’t be the case.

How to convert your files?

I have tried using other converters, but nothing ever came close to XD2Sketch. There is currently only one converter that solved my problem of converting design files impeccably from XD ↔ Sketch ↔ Figma and vice-versa.

The name XD2Sketch might suggest that it can only move files between XD and Sketch, but I can assure you that’s not the case. I have used this tool for transferring files between Illustrator, Figma, Sketch, XD, and PSD. Check out this case study where I struggle to convert an Illustrator file to Figma and finally found XD2Sketch as the final solution.

XD2Sketch Benchmarking

For the benchmarking demonstration, I will be converting the Hofmann UI Kit across all three platforms and inspect the finer details. It has around 297 artboards (including symbols and UI screens), and it’s a design system UI kit that can fair well for creating a professional-looking website design.

• ➡️ XD to Sketch — 1 min 5.85 seconds ⏱
• ➡️ XD to Figma — 58.14 seconds ⏱ ⚡
• ➡️ Figma to XD— 1 min 58.84 seconds ⏱

Bonus 🍪: 👉 XD2Sketch also converts Figma to XD design libraries and symbols just in case you and your team decide to move back to XD anytime in the future.

As you can see, it was lightning fast ⚡ to get a full-fledged web-UI kit converted to a different format altogether in sub-2 minutes. It’s unreal and shows how effective of a tool XD2Sketch really is. As a designer, I was quite impressed by the conversion speed and accuracy (which we will inspect further below).

A snapshot of a converted file from XD to Sketch

🔎 Side-note: XD2Sketch is a premium service provider and costs around 49$ per file for 50 artboards. As a designer and library migratory, you need to decide whether saving time is your time priority or money and take the call based on that.