Listen to this post
Learn design systems for fun and profit! A Design System is a set of interconnected patterns and shared practices coherently organized to aid in digital product design and development of products such as apps or websites. It may contain but is not limited to pattern libraries and design language, style guides, coded components, brand language, and documentation.
As I wrote this article, I came to realize that Design System is a very loaded phrase. If you’re looking for prototyping, focus on InVision, Adobe XD, and Figma. Alternatively, if you’re looking for actual components to use in your applications to make your products consistent, focus on Google’s Material Design, Microsoft’s Fluent Design System, and Atlassian.
Primary Use Cases
- Centralization of your designs to ensure consistency within your products
- Enables organizations to identify code reuse opportunities across disparate teams
- Power efficiencies in the process of delivering new designs to market
A design system is a voluminous topic. It’s really the central repository of all things related to design, and that’s a lot. Here in reality and away from all the marketing, saying The Design System is like saying The Cloud. Many companies have a different take on how a design system should work. The components of design systems vary wildly, but all of them bring a unique value proposition. If you’re looking for a deep dive into what design systems are, check out the educational content at the bottom of this page.
The design system market is getting crowded with several options at your disposal. We’ll walk through several of them and identify some pros & cons. Before we do so, let’s define a few design-specific terms.
Skeuomorphism is often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.
After the second world war, the Swiss Grid Style, also known as the International Typographic Style, was developed by Swiss designers who experimented with typography and photo-montage. Characterized by a cold, emotionally sterile grid style, they used a structured layout and unjustified type, which became very influential in the mid-twentieth century and influenced a vast audience. These pioneering graphic artists saw design as part of industrial production and searched for anonymous, objective visual communication. They chose photographic images rather than illustrations and typefaces that were industrial-looking rather than those designed for books.
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The typeface arrangement involves selecting typefaces, point sizes, line lengths, line-spacing, letter-spacing, and adjusting the space between pairs of letters.
The Sketch application is a vector-based graphics editor available on macOS. It has about one million users and is a prominent tool within the graphics design industry.
Google’s Material Design helps you manage your designs with Android, iOS, Flutter, and the web. It was released on June 25, 2014, so it has reached a level of maturity that most design systems have not reached.
Google adheres to these design principles.
- Based on real-world objects
- Bold, graphic, intentional
- Uses motion to provide meaning
Many designers don’t like The Floating Button. I’m a software developer, and I like having a quick and obvious entry point into an application. If you would like to explore further, you can get started now.
InVision was founded in 2011 and was born out of the pain experienced while providing design and web applications consulting.
InVision builds the Invision Design System Manager which is the core tool used to create your design system. Use of InVision’s design studio is free with unlimited collaborators with a single project.
I couldn’t find InVision’s design principles, but they seem to like the core principles of good design.
Millions of designers use the Sketch Design Platform. The InVision Studio desktop product allows you to import a Sketch design. If you would like to explore further, you can get started now.
The Adobe XD product is part of the Adobe Creative Suite and provides tools to build web and mobile prototypes. It’s an entry point into Adobe’s world of design tools like Adobe Illustrator, Photoshop, and friends. Of course, Adobe makes it easy to switch from Sketch and InVision; why wouldn’t they? On October 18, 2017, Adobe announced that Adobe XD was out of beta and was ready to be used by the masses.
Adobe teaches fundamental design principles, so apparently, they are the authority. In addition to the fundamentals, they describe how to make your projects adhere to industry-standard design principles.
- Define form factor and context
- Define a content hierarchy
- Ensure readability
- Add interactivity
- Ensure usability
Full disclosure, I’m not a big fan of Adobe products, and I’m glad that Flash is dead. I’ve always shied away from vendor lock-in, and Adobe tries to lock you in with complex tools with steep learning curves. However, it looks like Adobe XD is a great product to use by itself depending on your requirements.
Much like other Design System products Adobe XD provides one free project. Coediting is also possible with the free plan. Adobe XD is more similar to Figma than not, and they are directly competing on features. I imagine the gap will close between the two over time.
If you would like to explore further, you can get started now.
Figma was founded in 2012 and started by creating a web-based design tool. I could not confirm, but it appears that the Figma product has been rebranded to The Pegasys Design System, or at least partially
Figma adheres to these design principles.
Some people believe that the Figma platform wins because it includes everyone in the design process. It’s possible to take Figma prototypes and convert them to mobile apps with Bravo Studio. It integrates with and can replace the Sketch Design Platform. When it’s time to hand designs off to a developer, it’s possible to export to CSS, Swift, and Android XML. If you’re interested in exploring further, you can get started now by logging into figma.com.
Microsoft Fluent Design
The Microsoft Fluent Design System is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included. It was developed in 2017 and is a revamp of the now infamous Metro design guidelines for windows devices.
The design system adheres to these principles.
- Adaptive: Fluent experiences feel natural on each device
- Empathetic: Fluent experiences are intuitive and powerful
- Beautiful: Fluent experiences are engaging and immersive
Microsoft doesn’t provide a collaboration platform to go with their design system. In fact, they have built many Figma plugins to manage their designs. The Microsoft design system’s real value is the cross-platform component libraries that enable a consistent experience everywhere with little customization. If you are interested in exploring further, you can get started now.
Atlassian Design System
Notably, the Atlassian Design System provides a Confluence template to help you define your own design principles. Interestingly, this design template is maintained by InVision.
If you’re interested in exploring further, you can get started now.
Whether you believe form follows function or not, a great design is a key component of your business and brand. The rise of more sophisticated design systems is a boon for new companies looking to simplify their design process. Your designs start with your principles and end with a clear message that shapes your brand and business.
If you are not planning on building a sprawling organization of designers and software developers, a complex design system may be overkill. However, the principles of great design are embedded in these design systems. It can’t hurt to learn from the experts and start creating your own design system to set your business on a solid foundation.
Learn Design Systems – Beyond the Basics
- Introduction to Design Systems (Treehouse)
- Implementing a Design System (Pluralsight)
- UX Foundations: Style Guides and Design Systems (LinkedIn)
- Learn Figma: User Interface Design Essentials – UI/UX Design (Skillshare)
- User Experience Design Essentials – Adobe XD UI UX Design (Skillshare)