Log in to like this post! How to Develop a Design System in Adobe XD Stefan Ivanov / Wednesday, March 9, 2022 This is the last of our 3-part series about Design System architecture. In the first one, we explained everything about Design Systems, the benefits they offer, and how to build one in 6 simple steps, and how Indigo.Design really helps along the way. In the second blog post we described how to build a Design System in Sketch and what key aspects to include in it. Now, the third one focuses on how you can develop a Design System in Adobe XD so you can guarantee consistency across design projects, create outputs faster, and maintain up-to-date assets and components that can be easily reused. Let’s get started, exploring and answering the following questions: What is Adobe XD? What is an Adobe XD Design System? How to build your Design System in Adobe XD? Color palettes Typography Components What Is Adobe XD? Adobe XD is one of the most popular vector graphic design tools used for creating prototypes, interaction design, and great UX. With it, you can also design wireframes and apps, collaborate across teams, configure animations, gather feedback, and build 3D and reusable designs. What Are the Advantages of Adobe XD? Interactive prototypes and wireframes Reusable design elements Rich layout functionality Software is free Ability to share handoffs and collect feedback What are the Disadvantages of Adobe XD? Cannot transfer your prototype or wireframe into an official design Doesn’t generate code Few plugins Many restrictions and limitations in the free version What Is Adobe XD Design System? In order to ensure UX and UI design consistency for current and future projects when using Adobe XD files, it’s best to have a Design System. An Adobe XD Design System will serve as a single source of truth, collecting all design patterns and best design practices for faster transitioning from ideation to design. How To Build Your Design System in Adobe XD? Let’s for a moment think of Mcdonald's as one of the highest value brands in the world from a designer perspective. Even though the logo changed a few years ago to convey a healthier lifestyle, the brand preserves its well-known and easily recognizable red and yellow colors that define it. A digital product design however needs more than a single-color hue. And when it comes to building a Design System in Adobe XD, sooner or later you will realize that you need palettes with shades of the same base hue for two, three or even more colors. Color palettes To achieve a rigid architecture for your colors in Adobe XD, start by drawing a rectangle, fill it with vibrant red, or any other color to use as a base, and create a component from it. Next, create as many instances of it as you would need. In Indigo.Design, each color has ten variations – the base one and 9 derivative from it. Now spread some of those instances to the left of the master for the darker variations and to the right for the lighter hues. For each symbol on the left stack two rectangles above the base color layer with the same size. The layer closer to it will be used to saturate and the other one to darken with a semitransparent black fill. You can tweak the properties of these two rectangles to achieve darker and darker tones of your base color. For the instances to the right follow a similar pattern adding rectangles above each. The only difference is that you must make sure you desaturate and lighten with a semitransparent white fill instead, which will give you the lighter shades. Once you are all set, you may group each variant and name it accordingly e.g., from primary 900 to 600 for the darker one and from 400 to 50 for the lighter ones, keeping 500 reserved for the base color hue as in Indigo.Design. You can do the same for a yellow and green hue thus creating the secondary and tertiary color shades for the McDonalds brand as well. The second important step when it comes to colors takes us to the assets panel to add these as reusable “Colors”. Since Adobe XD requires the use of a simple hex value for the color asset, just draw a rectangle and pick with the eyedropper tool the array of colors one by one, adding them to the color assets with the plus icon found to the right of the “Colors” heading at the top of the panel. This may be a tedious thing to do but will pay off in the long term. I would advise you to group color assets with a common base and name these asset panel groups accordingly for a consistent and well-organized Adobe XD Design System. This becomes a necessity if your design system scales like ours to include almost 50 colors. Gray colors are very distinct from other colors and there are two opposite opinions spread among the designer communities. Some argue that gray colors should be treated just like any other color array with a base shade in the middle and derivatives with darker and lighter tones. Others put the base in one end of the palette and achieve the rest of the shades playing with opacity. Both approaches work if you think about a single theme. Supporting both light and dark theme variations with your Design System in Adobe XD, however, means that we should consider the second approach rather than the first one. In practice, we should create ten rectangles for our 900 to 50 variants, fill them all with black and start decreasing the opacity at regular intervals. Our 900 variant will have a value of 87%, our 800 will use 74% and so on all the way to 50, which will be at just 2%. With an additional special color for the surface, i.e., app background as well as background for some components like cards and lists, we are all set to add these additional colors as assets. Only this time we can do it directly from the rectangles we drew as they represent simple hex values. With this in place and the option to add some more colors for special validation use cases and data visualizations, we are all set. What we love about Adobe XD is how it makes it possible to apply a color as fill or as border by selecting the target layer and right-clicking on the color in the assets panel. This means we don’t need to create fill and border asset variants for the 30+ colors we have at this point and save us some time and repetition. To wrap it up regarding colors I would like to share a small color-secret – create one transparent color asset with 0% opacity to be able to make graphic elements disappear visually from your components but keep their place and space if you want the layout to persist. Typography The next pillar of a brand is the typography. Think about the “M” of McDonalds, whatever its color might be, you’d still recognize the brand. Typographies are also one of the main pillars of scalable design systems. In Adobe XD they ultimately end up in the assets panel following an approach similar to that of the colors. However, architecting the typography of your Adobe XD Design System means that you must choose font properties to create as many type scales as your components will need and your design system users will have at their disposal to design anything product related – from blog articles to complex UIs. There are two key font properties you should focus on for that matter. Obviously, the font size is what gives blobs of text their structure but sometimes the larger the font size, the thinner you want it to appear. Other times, a text must be thicker to appear more prominent and stand out from the rest of the sentence. With combinations of these properties, you can create a set of headings, subtitles, and body text to just name a few. You will be tempted to add some component-specific character styles as well but do that with caution. For example, it does make sense to have a button typography with text transform making it all caps like in Material, or for the initial of an avatar its own specific sizes and treatments but introducing too many of these may decrease the overall consistency of your design system. We should carefully consider the impact of adding a type-scale as we don’t want our character styles to explode, or to make it easy for the users of our design system to exploit it and break the design guidelines we have in place. One thing that the team behind Indigo.Design for Adobe XD loves is how the program allows us to combine colors with character styles. This means that we don’t have to create color-based variants for the typographies we have defined, sparing us more time and repetition. Another benefit in Adobe XD comes from the fact that text alignment is not part of the character style and one can select it as per the use case of each piece of text. The image below shows the simplicity of character styles defined in Indigo.Design for Adobe XD which comes without sacrificing ease of use and flexibility. The second half of tips for architecting scalable and rigid design systems in Adobe XD are related to components, both in terms of UI elements and atomic pieces that you can use and reuse in the context of XD. Components are the mechanism to use something as a standalone element that is consistent to its siblings since all of them are connected to their single definition - the component master. Starting from something small and basic like an icon to start assembling your icon set, or a collection of shadows or illustrations and going all the way to repeating items to create a list as an example of a more complex structure. One may argue that icons, shadows, and illustrations do not need to come as components. However, when we create an icon button component in Adobe XD, we want to define it broadly. As we use it in a certain context, we usually need to change the default icon with another one. Same goes for the empty state illustration and a card whose shadow grows bigger upon selection to make it appear closer to you. Once you have your colors and character styles, set off to create components to feed your icons in the Adobe XD Design System. Whether you are using a third-party set, such as material icons, font awesome, or your own custom collection, just pick a default size and create components with the icon glyphs. Indigo.Design for Adobe XD uses a 24px square for the base of its icons. Here is the moment to point out that one of the most important things about icons is how you name their representative components. Let me give you an example from Idngo.Design by looking at how the settings icon component is named “_Overrides/Material Icons/action/settings”. It starts with “_Overrides” which designates that the element should only be used to override an icon instance placed in a component. Then we have “Material Icons” which is the icon set name. The last two parts of the name define the optional category name and the icon name itself. Categories are useful in creating some organization in larger families of icons such as Material from Google and Material Extended by Infragistics. Since Adobe XD has a powerful mechanism for asset search, you may also think about keywords that relate to the icon and put them in brackets at the end of the name to make search more flexible for the users of your Design System in Adobe XD. We are now ready to dive deeper and talk about architecting UI components. We will look at a few but let’s start with the button as a simple and common example. The first thing that distinguishes one button from another is its context of use. Once or twice, you will show a prominent CTA on a screen. Then, you will have a few important actions, sometimes you will also need to present secondary actions, and occasionally you may need a floating contextual action. For example, a button that adds list items to a list. What this means for the architecture of a design system in Adobe XD is that it needs to anticipate different types of components. For the button, these will be contained, outlined, flat and floating. If we want to have a super simple use case with just an icon, we may add a fifth variant. What defines a button besides the fact that it triggers an action is that each of these types has a similar internal structure - background, border, shadow, icon, and label. And for these pieces we will leverage what we have already laid the foundations for: The background and border will use the color assets. The shadow and icon will be primitive components. The label will use a character style typical for a button. However, this is not all a button is and we must also consider interaction states such as hover, focus or appearing in a disabled state until a certain condition is met. Luckily, Adobe XD offers support for component states, and they work like a charm. Not only designers using your Adobe XD Design System will be able to pick the disabled state for a button at design time, but for an enabled one the hover will come as an interactive state. This means that when a user presents a design and hovers over a button, it will adjust to show its hover state. Because buttons always show their content centered and may have some spacing rules on top of that, you should use the auto layout feature to define it. Put the icon and label in a group and make it a horizontal stack with a margin respecting the layout grid you have chosen. For instance, 4px or 8px if you are using a 4px layout grid. You can also set padding if you always want to have your content padded from the edges of the button. One thing to remember with the auto layout is that if you have text in it, its width must be set to adjust automatically according to the text contents. Let’s explore the input field now. It comes with a higher complexity given the fact that there are three types of inputs in the default theme of Indigo.Design – line, box, and border. An input may come with a hint or without one which has also been surfaced in the assets panel. This gives the users of your design system a total choice of 12 insertable options. In an input field you may have nested components to represent things like the prefix and suffix that can be used to guide the user about what information is expected to be filled in. Components Finally, let’s look at two more components - button group and card. The button group has a horizontal and a vertical component offering matching arrangements for a set of seven buttons. It applies the horizontal or vertical stack on instances of button components, each of which has an inside horizontal stack for its content. In simple words, we build stacks of stacks and components of components. On the image below, you will notice that we have stacks defined: for the internal group of buttons that is masked on the overarching master component This makes sure that if users of Indigo.Design remove a button, the background, border, and shadow of the button group will adjust accordingly. The card may appear significantly different, and it is when we look at the content pieces it contains. In its essence, the architecture is very similar to the vertical button group. The special sections of a card are realized as separate components with different variants. They can be easily overridden when you drag items from the assets panel on top of the one you would like to override. This lets you change the default media piece from an image to a stylized map or play with the header auto layout to insert and remove elements with everything adapting to these changes. All in all, the card is just a vertical stack of specific areas, responding to a whole variety of possible updates. To summarize all up to this point, Adobe XD makes it possible not just to establish a strong foundation of colors and character styles, but also mix them together, establishing your basic components with stacks and paddings to create a truly fluid layout. Then you can go on using these fundamental principles to architect more complex layout organizations on as many levels as you need. You can assemble intricate components, or design patterns that enable users of your design system in Adobe XD to design screens much faster. If you ever need to change the brand colors or move from a light to a dark UI, just head to the asset panels, update your colors and character styles and voila! Apps created with your Design System in Adobe XD will theme accordingly.