Design Prototypes with 6️⃣0️⃣➕ Material Components in Adobe XD
When 9 years ago Sketch won the Apple design award, I felt as if David was challenging the Goliath of design programs in the face of Adobe for the first time in ages. Then 5 years ago, I stumbled upon Figma and saw how the arrival of new vector graphic design tools could not only make some noise but also stir things up among the design community even further. And for a while, the buzz around Sketch and Figma was so huge that all the design-related conversations that surrounded me were in the form of arguments on which of the two apps was the better one.
With small but determined steps, Figma took the competition to another level. It introduced many new concepts and features that allowed us to create scalable and elaborate design systems, claiming much of what Sketch had taken away from Adobe in its early days. However, during this same period, we witnessed Goliath waking up from his lengthy nap. This is why in this article, I want to share how Adobe XD enabled us to create an elaborate design system and bring Indigo.Design to the hands of a whole new array of fellow designers.
“Have no fear of perfection — you’ll never reach it.”
Salvador Dali
This quote sums up the half-baked versions of Indigo.Design for Figma and Adobe XD that we released two years ago — an end result that was far from what we hoped to see back then. However, now in the eve of 2022 we finally have the true Indigo.Design library with 60+ material components for Adobe XD. Focusing on Adobe XD, we actually managed to learn many lessons which I want to share with you now. So, keep them in mind and dive into Indigo.Design. See how you can easily add it to your libraries and use it to better understand, change, or improve them, or start creating a design system from scratch on your own.
Colors and character styles
Picture this for a second — an empty canvas. Doesn’t it make you feel excited knowing that you are up to a new big and creative design project…? To make the most of this moment, I would suggest starting with the atoms and even the sub-atomic pieces of your design system such as colors, typographies, shadows, and graphics. Like a set of icons for example that you would like to use. Since Adobe XD does not have dedicated mechanisms for setting up your shadows and icons yet, we will focus on the other two.
Colors usually come in two variations: groups of similar colors that form a sequential scheme from brighter to darker nuances and standalone colors with special meaning such as the surface for your interface and validation messages. While the special ones are always hand-picked, the others may also be the product of an automated process. To give a more specific idea we may want to use a base color and combine it with layers for saturating and darkening or desaturating and lightening appearance to create variants. In our team, we have adopted this approach because it allows our customers to “re-brand” the Indigo.Design system with one click. The trick with Adobe XD is that we have set things to work that way on the 🎨 Colors artboard. However, from the colors added in the libraries panel, only the base one will be updated while the variations have to be synced manually.
Setting up typography in Adobe XD is the easiest thing ever. All you need to do is specify your type scales and add them as character styles in the libraries panel. Note that colors and characters have their independent styles that can be combined freely with almost 50 colors by default and 15 styles. In the typography, you get more than 700 combinations with only 2 clicks. How cool is this? This alone is a huge gain compared to Sketch but there is also one more thing that I really liked — the alignment of a text layer is not bound to the character style. Thus, if you want to change the character style, it will not mess up the alignment settings and your design will preserve its beauty and consistency.
From overrides for layouts and variants to components
Overrides in Sketch are the perfect mechanism to let the users of your design system choose between variants for nested symbols. However, this is all that Sketch has to offer. Since we speak about the goodies in Adobe XD in the next sections, here we’ll look at an example for overriding applicable to Adobe XD. You may have defined something as a component and expect that there will be more complicated components that nest it. Such as the icon of an avatar, for instance.
Overriding the default one with another one (e.g. the android robot with a user account representation) can be easily achieved when you select the layer of the material icon symbol, change your panel to show libraries, and drag another component on top of the one highlighted on your design surface.
Apart from icons, we decided to preserve this mechanism for some rarely used variations such as the dark and light theme variants for some of the components.
Layouts with stacks and repeat grids
One of the best things about Adobe XD is its ability to support Stacks and Paddings out of the box without the need for additional plugins. On the one hand, these allowed us to create templatable layouts by moving, hiding, and deleting components. On the other hand, we were also able to support the insertion of an arbitrary component that automatically adjusts the rest of the layout. Keep in mind that you should do this for a reason because adding a card in the template of your grid cell might be a bit too much.
Speaking of tables and grids we come to the next valuable feature to create repetitive-content components in Adobe XD — the repeat grid. In Indigo.Design we only use the repeat grid for our three types of tables: the flat one, the hierarchical one, and the tree grid. But it can also be used to create patterns and grid layouts with cards, images, or tiles, for example. If we look at the hierarchical grid structure, we will notice one in the header that lets you create as many columns as necessary and another one for the expand column to let you add as many rows and records as necessary.
There is also a third one for the rest of the body cells to let you match the adjustments made with the other two repeat grids. Notice that if you want to make further changes to cell type, template, or content, you have to destroy the repeat grid first. Why is that? Because these changes are usually only in the scope of a single column and not all of them at once.
Defining component states and interactive states
With every component that you create in Adobe XD you only define its default state. This means that you can scale things up by adding validation states. But adding such a simple state is not all. The special hover state and toggle state let you trigger things such as showing a ripple effect when hovering over a toggle switch and changing it from off to on when clicked. If that is not enough you can also create states that are shown on user interaction. For example, toggling that same switch with the enter key of your keyboard. All these things surface up when designs created with this functionality are run and demoed. Luckily for those who plan to test or use Indigo.Design for Adobe XD, all these come out of the box as they are baked in its various components.
Before we wrap things up I would like to urge you to try Indigo.Design out and see all of its features. It is super customizable and can easily fit into your organization’s needs and branding. It adds a lot of value and brings on plenty of benefits — like theming, app-building in the browser, generation of responsive Angular code, just to name a few. We would also like to give you a glimpse of what to expect next from our digital product design and prototype platform because our team is committed to making Indigo.Design even better and more complete design-to-code solution.
- Realizing how much value our Sketch plugin 🧩 brought, we are setting off to create one with matching functionality for Adobe XD. There is the first version already available so you can try it out and create an Angular or Blazor app from your design.
- Supporting just a handful of data visualizations 📊 right now, we are committed to bringing more to you and letting you design elaborate dashboards and export them as code.
- As always, we are continuously looking for more components and patterns to add to our library and would love to hear your ideas. So, feel free to comment below ⬇️ if you have something in mind.
After fully supporting Sketch and Adobe XD, it will soon be available for Figma as well. Stay tuned for updates on that by following our publication!
