By Caleb Kingston
S
tarting your project with a design system is a great way to save time and move quickly towards a finished design. With reusable components, colors, and character styles; we can make changes at any point in our design process that will update across the entire design.
You can take advantage of design systems in both Sketch and Adobe XD, but because of the unique paradigms of each platform, the system performs differently in some areas. In this article, we’re going to cover some of the reasons you might want to migrate your design system to XD and what steps you can take to make sure your newly migrated design system is geared up and ready to go.
Why should I migrate my design system from Sketch to XD?
XD has many benefits you can take advantage of but the most important, perhaps, is that it is an all-in-one design solution that lets you design, prototype, and share your designs in one platform. Although Sketch has a few solutions for prototyping, the native option can be very limiting and 3rd party solutions require you to jump in and out of different tools and continuously sync changes to preview design.
Design systems in XD also have many features that make the entire setup process and using the assets very simple. XD components are very dynamic letting you override just about anything in an instance. This eliminates the need to set up dozens of nested components to create multiple versions of one element. With component states, you can also organize one component with many states keeping your assets panel more organized and allowing prototyping interactions to exist within the component itself when you want to toggle between states.
As we move forward migrating our design system, we’ll talk more specifically about some of these features you’ll find and how you can quickly get setup to begin taking advantage of all XD has to offer.
Before you get started, review your design system in Sketch
It’s important to understand how your Design System is organized in Sketch. When reviewing your Sketch document, select a few symbols and drill into the layers to see if masks are applied, if there are nested symbols, and so on. You will want to review the other Sketch Components like Text Styles and Colors as well. Having this familiarity will help you know what to watch out for after the migration to XD happens.
If some symbols, text styles, or colors are not set up in your Sketch document, that’s okay. It only takes a few clicks to fix that once your design system is in XD.
Import your Sketch Library into XD
After reviewing the Sketch document, we are ready for the big import. This step is the most important but is very simple. Because XD can open Sketch documents or automatically import design systems, we can get to a usable XD Library System in just a few seconds.
In this step, you have two choices. You can either simply open the Sketch document in XD, or, if you are already working on an existing XD document, you can open the assets panel, click “Link Assets” and then select “Convert Sketch Library…” The latter option will convert this Sketch document to XD in the background and automatically link these assets into your project to be ready for use.
After this step, you really are ready to begin using this design system in your projects as-is, but I’m going to share some following steps you can apply to clean up the design system and take advantage of the great design system features that made you want to migrate to XD in the first place.
Compare the visual differences between Sketch and XD
Because there are different paradigms for the way Sketch and XD handle assets in a design system, you may find a few elements appear to be different during the conversion process; but fear not. Any differences are relatively simple to fix.
In this step, make sure you have both the Sketch and XD document open and then scan around in the XD document to see if there are any differences in the look of assets or character styles. XD does a really good job at this conversion but there may be icons where masking or shapes are applied differently in Sketch than XD.
In the above example, I scanned through my XD document and found an error icon that looked inaccurate. As I drilled into the layers, I found some hidden combined shapes. If we click the icon in the layers panel to expand this combined shape, we can select all the individual shapes underneath and then click the “subtract” button in the properties panel to subtract the top two shapes from the base layer.
Because every project is set up differently, you may run into other types of differences that will need to be fixed. Although I cannot cover every scenario you might run into, I can say the fix is usually just a few clicks away if a little troubleshooting doesn’t scare you.
Add colors to your Assets Panel
When your Sketch document is converted to XD, you will notice that there are no colors applied to our assets panel. That is because setting up reusable colors within Sketch Symbols requires us to create colors as symbols themselves and apply them as masks to existing symbols. I know that sounds confusing, but that’s all in the past and there is now a simpler way to use these colors.
Once you find the colors on the canvas that you want to reuse, simply select one or many at once, and then click the plus button next to “Colors” in the Assets Panel. You are now ready to apply these colors to your designs.
The best part is, any existing color in your document that is the same value as these new color assets, you can now change them all at once making quick changes across your entire design.
Turn multiple components into one component with multiple Component States
Component States are a great way within XD to organize many versions of an element into one component.
Let’s take input fields for example. We have 5 versions of this input field added as 5 separate components. We can clean this up by editing the first component and applying additional states for all these versions.
After these additional states are created, you can navigate back to the Assets Panel, right click on these additional (and now unnecessary) components and delete them.
Organizing your components this way will drastically reduce your components by 3 times or more, helping them become much easier to browse through.
Delete Unnecessary Components
By using Component States, already you can see how much simpler and more versatile your design system can become, but XD has even more advantages baked into Components that allows us to further reduce the components we need to build.
In Sketch, if we want to create multiple versions of a dropdown menu as shown above, we would need multiple separate components to account for only needing two, three, or four menu items.
Because XD Components allow you to override virtually everything, including adding and deleting of layers in an instance, we can create one component and quickly edit the instance to add or subtract menu items and even rearrange the elements using the Stacks feature.
Clean up unnecessary layers
Because Sketch uses masking to add variable colors to a symbol, there are extra layers in some symbols that serve no purpose once they’re turned into Components in XD. As you evaluate each component, open the layers panel and expand the layers in the component to see if there are layers you can delete.
Your design system is ready to use!
Now that you have migrated your design system to XD and updated the assets to take advantage of features like dynamic components and Component States, you’re ready to publish and share for your team to take advantage of.
As I stated earlier, you can jump right in to using this design system after a quick import into XD but taking a little extra time to go through these steps will ensure you are using the best standards to organize and use the assets the most effectively in XD.
