Rapid prototyping in Adobe XD with 40+ material components
The article below was written in 2019 to announce our first successful attempt to create a component library for Adobe XD. Indigo.Design for Adobe XD had massive updates in 2021 and 2022 and now supports not just prototyping, but also code generation for its 60+ components, more rigid branding and styling, and further optimizations possible with the latest versions of Adobe XD. This led to the need for an updated article that you may find here.
Ten weeks ago I published an article about Indigo.Design and the UI Kit we released for Figma in mid-July. Now that the summer holidays are over and everyone is refocusing on building new stuff, this is the best time for a retrospective. For the last few years, I’ve dedicated the last quarter of the year to things that drive my team’s success for the next twelve months such as reviewing the current trends, looking for additional training is certain areas, appropriate conferences to attend, and others. But first and foremost I review our design processes and I brainstorm on ways to enhance them. With this article I not only hope that you will do such a retrospective yourself, but I want to inspire you with some ideas and I want to share what we build for Adobe XD during the summer.
This month I had my 5-year anniversary with Infragistics and this got me thinking about how my job and role has changed during such a seemingly insignificant amount of time. After joining the company it quickly became obvious to me that I had to establish some processes. With two fellow designers, who were mostly involved in styling the code that other wrote in CSS and XAML, I could quickly see that design was done with little intention and mostly to cover up some things that were not done right in the first place. It took a year to establish some rules and processes and to hire the right people for the team to increase its UX consciousness, which has resulted in catering to the user needs in every formal and informal conversation in the office these days. Having the favors of the upper management I was able to hire more people, which is the better strategy to keep up with innovation compared to the other frequent scenario where people are required to simply design faster. However, in 2019 there is even a better approach that leverages not only a great tool, but also a new process and way of thinking.
Frustration can sometimes be a friend
Some years ago we realized that something was not right: we knew what to anticipate in the next 3–6 months but sometimes it took more than a year to find a good designer for our team. There had to be a better way to get high-quality and quantity output from designers without burning them out. About the same time we started hearing more and more about design systems. I think today the term is used to a degree that everyone is familiar with what it means overall, but I will share the words of Marco Suarez of the InVision team that covers the what and how of design systems.
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” - Marco Suarez
The only things that still seems to cause some turbulence is what goes into a design system and, in my opinion, the more the better. Therefore, Indigo.Design doesn’t just include the components as a UI Kit (supporting the three most common design tools on the market Sketch, Figma and Adobe XD), but also guidance on how to use them. This comes along with many other things, including:
- Plugins enabling integration with the cloud
- Indigo.Design’s rich functionality of for collecting feedback and conducting remote unmoderated user testing
- Code generation or the ability to output runnable Angular applications based on Ignite UI for Angular from your Sketch designs, improving the developer handoff
After Sketch and Figma it was time for Adobe XD
Indigo.Design for Adobe XD includes the same set of 40+ components like its predecessors for Sketch and Figma but the assets are organized in a flatter structure. This is due to the lack of an override notion in the design tool and the different approach to nesting components (the term used to describe symbols in Adobe XD). This approach poses a few limitations to embedding states and layouts in deep hierarchies for more elaborate components, therefore, we decided to keep things usable and flatten the “override” tree. With this flattening of the kit we also had to take a different approach and split the Indigo-Components library across multiple files to provide not only easier discoverability but also the ability to import from your Cloud Documents* only files for the assets that you actually need for your design.
A similar approach was adopted for the Patterns library, but here I’d like to mention that one library has remained the same and that is the one you need the most: Indigo-Styling. It contains all the color, elevation, typography and illustration assets to create polished and skillful pieces of design. With the styling assets, component and pattern collections you are equipped to quickly create elaborate design, boost your team’s productivity and have a peace of mind about consistency. But don’t take this for granted, download the Indigo.Design UI kit for Adobe XD and give it a try yourself, you wont regret it.
Do design systems come at the price of loss of creativity?
If you are still doubtful about design systems and whether they will limit your creativity and make you sacrifice the uniqueness of a design, be sure to check what our team has shot on dribbble. For the past ten months we have been regularly sharing different concepts and pieces of UI that we needed to create for our daily tasks or just hit us as an idea. And to see what is possible with the UI kit for Adobe XD check the last couple of shots on the platform, but there will be more soon - in the upcoming weeks we will be adding lots of shots there, so stay tuned for them by following us.
To wrap things up I want to go back to where I started and the importance to be retrospective about our work, identify flaws in our processes and look for solutions to improve for the future. I firmly believe that for many of us design systems are a tool, whose full story is still yet to be told, but we should not wait for that moment, we should embrace them today. The UI Kits we have build for Sketch, Figma and now Adobe XD will be a pleasant surprise if you haven’t tested them yet and they will become neater and more useful in the future, empowering teams for the challenges that lie ahead. And in case your preferred tool for UX/UI design is Adobe XD, you are welcome on board now - do not hesitate to download the UI kit and give it a try.
*To be able to access all styles, components and patterns as design assets, you need to unzip the UI Kit, opening every XD document inside and save it to your Cloud Documents like it is shown on the left.
