By Jill DaSilva
I
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 colors, 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 this into a full-blown design system!
Step 1: Add fonts and colors 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 colors and fonts very easy:
- Simply select an artboard that has all the colors you would like to add to your design system (multiple artboards can be selected at once). With the artboard selected, click on the + icon and all of the colors on the artboard will be added to the Document Assets in the Libraries panel.
- With your artboards still selected, click on the + for character styles and all the font styles and colors get added instantly. (Feels like magic!)
Step 2: Add colors to your design system
With your colors 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 color to change the fill color 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 a component is created in Adobe XD, it becomes the Main Component. Changes made to a Main Component will update across all instances of that component (learn more about components here). This design system component example will focus on the main navigation of the mobile app. Follow these steps:
- First, group all of the main navigation items. Once grouped, name your group something descriptive like 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 on 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.
In Adobe XD, components can include multiple variations, referred to as states. Component states allow many different visual variations to be included in a single reusable element. Component states can also be linked together in prototype mode making it easy to create reusable interactive elements and use them across your design projects.
After completing these steps, here is what the 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 colors, 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.
There are also several plugins for Adobe XD that can help you create your design system. Check out these 5 XD Plugins to Help You Create, Distribute, and Manage a Design System.
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.
