n this guide, I will explain how I use Adobe XD to create a design system from scratch. By creating a design system in Adobe XD, it means I can always ensure UX and UI design consistency for current and future team members and also as the product scales with new features and functions. While workflows may vary and some projects start with an existing design system, here are the six steps explaining how to start a design system from scratch.
For this mobile project below, the design elements unfolded as many of the user flows were created and approved. This is the moment in my design process where I can begin a design system because enough of the design patterns have been established, such as colours, fonts, icons, navigation elements and buttons. At this point, I have confidence that these items will be used repeatedly throughout this design (and beyond) and should now be made into assets.
For this example, I have created a main document with all of the screens (artboards) that have been designed so far. Now, let's turn into this a full-blown design system!
Step 1: Add fonts and colours to the Assets panel
With artboards in place, I will now add the fonts used to my assets. Adobe has made the process of adding colours and fonts to my assets very easy:
Simply select an artboard that has all the colours you would like to add to your design system (in this example I have selected multiple artboards at once). With the artboard selected, click the “+” icon and all of the colours on the artboard will be added to my assets.
With your artboards still selected, click the “+” for character styles and all the font styles and colours get added instantly. (Feels like magic!)
Step 2: Add colours to your design system
With your colours in your Assets panel, it's time to add them to the design system.
Start by creating squares with the repeat grid function.
Once you have enough squares, select a square and then tap on a colour to change the fill colour of that square.
Step 3: Add fonts to your design system
Repeat the above step for fonts (character styles).
Step 4: Add components to the design system
Now, it's time to add your components to the design system.
The first time I create a component in Adobe XD, it becomes the main component. Should I need to edit a main component in the future, I can apply my update to the main component and have it update across all linked instances (learn more about components here). For this design system component example, I am going to focus on the main navigation of the mobile app. Follow these steps:
First, I group all of my main navigation items. Once grouped, name your group. I named my group “Main Navigation.”
Then, *right-click on your group and choose “Make Component.” (With your object selected, you can also make a component via the keyboard shortcuts (MacOS = CMD+K or Windows = CTRL + K) or by clicking the “+” next to “Component” in the Properties Inspector on the right.) Green triangles now appear around your group as a visual indicator that it is now a component. A triangle icon also appears next to “Main Navigation” inside the layers panel. You can now go to your assets panel and see your new “Main Navigation” component listed.
In a separate Adobe XD file, you will now create the design system file that will be shared with your team. With that file open, drag your components from the assets panel onto an artboard in your design system.
Note: you can add states (behaviours) to components and have those interactions also live in your design system. This is very helpful for conveying interaction design to your team and keeping the behaviour consistent throughout the design as it scales. It also saves so much time with prototyping. Learn more about states here.
After completing these steps, here is what my system looks like now:
Design systems are organic documents; they are meant to evolve and change through collaboration, brand changes, interaction improvements and the scaling of products. Adobe XD makes it easy to create, share and update designs thanks to Cloud Documents and Linked Assets.
Step 5: Save and distribute your design system
The final step in creating a design system in Adobe XD is to save my design system file to Adobe Creative Cloud and then invite my team. Note: Make sure that you enable Coediting when inviting your team.
Now, when a team member is ready to start a new design, they can pull in all of the Linked Assets from a shared file and start designing immediately. To do this, a team member would create a new project in Adobe XD. With the assets panel open, the team member can click the blue button “Link Assets”. They can then choose to pull in the assets from a cloud document or a file that has been shared with them.
If there are any updates made to Linked Assets, they will always be noted in the Assets panel the next time anyone opens up that file. Team members will have the option to update those linked items and, with one tap of a button, all instances of the Linked Assets will be updated in that file.
By using a shared design system in Adobe XD, my teams and I have experienced increased confidence, design consistency and faster design output because:
We all know we have the latest designs to work from.
There is less rework because designers don’t need to recreate components and interactions from scratch.
There is less copy and pasting by hand to keep our files updated.
I sincerely hope this guide will help you to create your first shared design system from scratch. And I hope the design system you create will enable you and your team to speed up your design process while maintaining consistent visual and interactive experiences as your product scales.