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 you 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 a good point in the process to 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, a main document has been created with all of the (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, the next step is to add the fonts used to the Document Assets. Adobe has made the process of adding colours and fonts very easy:
Simply select an artboard that has all the colours you would like to add to your design system (multiple artboards can be selected at once). With the artboard selected, click the + icon and all of the colours on the artboard will be added to the Document Assets in the Libraries panel.
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.) A green selection box with a diamond in the top left corner will now appear around your group as a visual indicator that it is a component. A triangle icon also appears next to Main Navigation inside the layers panel. You can now go to Document Assets in the Libraries panel and see this new Main Navigation component listed.
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 Libraries.
Step 5: Save and distribute your design system
The final step in creating a design system in Adobe XD is to invite the appropriate team members to collaborate and publish this document as a Library for other team members to leverage in their design process. When inviting team members to edit the document, enable Coediting to unlock real-time collaborative editing.
Now, when a team member is ready to start a new design, they can access all the colours, character styles and components from the shared Library. To do this, a team member would create a new file in Adobe XD and from the Libraries panel, click + to discover all the available Libraries. In the Shared with Me section, the newly shared Library will be available to enable. Once enabled the library will appear in the home screen of the Libraries panel.
When changes are made to a shared Library, a notification will appear in the Document assets for anyone using those shared assets. Assets can be updated individually or in bulk and all instances of that asset will update in the document.
Shared design systems in Adobe XD, will help you and your team experience increased confidence, design consistency and faster design output because:
Everyone has the most up to date assets and designs.
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 files updated.
This guide will help you to create your first shared design system from scratch and 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.