Learn Design Systems

The Basics

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 realized 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 essential 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 product 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 product designs to market

Drilling In

A design system is a voluminous topic. It’s the central repository of all things related to design, and that’s a lot. In reality and away from all the marketing, saying The Design System is like saying The Cloud or Software Platform.

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.

Design Systems

The design system market is getting crowded, with several options available. We’ll walk through several of them and identify some pros and cons.

First, let’s define a few design-specific terms.

Skeuomorphism

Skeuomorphism makes interface objects familiar to users by using concepts they recognize. Skeuomorphism is often used in graphical user interface design to describe interface objects that mimic their real-world counterparts’ appearance and how the user can interact. A well-known example is the recycle bin icon used for discarding files.

Swiss Grid

After the second world war, the Swiss Grid Style, also known as the International Typographic Style, was developed by Swiss designers experimenting with typography and photo-montage. 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 industrial-looking typefaces rather than those designed for books. 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.

Typography

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 kerning.

Sketch

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.

Material Design

Google’s Material Design manages your designs with Android, iOS, Flutter, and the web. Released on June 25, 2014, it has reached a high level of maturity.

Google adheres to these design principles.

Based on real-world objects
Bold, graphic, intentional
Uses motion to provide meaning

Pros

Mature and serves most use cases
Multi-Platform
Based on the swiss grid system
Readable typography
It uses skeuomorphism if you’re into that.
Extensive documentation
The Floating Button
Open Source

Cons

Animations burn your battery.
Can be unintuitive
It is strongly associated with Google’s brand.
Can be overwhelming
Can be constraining
UI Elements can be obscure

I’m a software developer and like an obvious entry point into an application. Many designers dislike The Floating Button. If you would like to explore further, you can get started now.

InVision

InVision was founded in 2011 and was born from the pain experienced while providing design and web applications consulting.

InVision builds the InVision Design System Manager, 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.

Pros

Seamless collaboration
Clickable prototypes
Intuitive
Free for one prototype
Integrates with the Sketch Design Platform
Preview designs directly in your browser
Modular, so you don’t need to eat all of it
Free collaboration with one project

Cons

The monthly fee to manage multiple prototypes
Easy to use
Missing several features
Can add friction to the prototyping workflow

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.

Adobe XD

On October 18, 2017, Adobe announced that Adobe XD was out of beta and was ready to be used by the masses. 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?

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

Pros

Can target web, desktop, and mobile platforms
Simple and clean interfaces
Great grid support
Supports plugins
Export CSS, HTML, Web Components, Etc., with plugins
Real-time collaboration
It lets you import Sketch files.
Integrates with other Adobe products
Integrates with Teams & Slack

Cons

It’s still relatively new, so community support needs improvement.
The high learning curve, like most Adobe products
Collaboration requires an Adobe account.
It works best on macOS, worse on windows, and doesn’t work on Linux
It’s expensive for advanced features

I’m not a big fan of Adobe products, and I’m glad 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, 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 directly compete on features. The gap will likely close between the two over time.

If you would like to explore further, you can get started now.

Figma

Figma was founded in 2012 and started by creating a web-based design tool. I could not confirm, but the Figma product has been rebranded to The Pegasys Design System, or at least partially.

Figma adheres to these design principles.

Professional
Approachable
Thoughtful

Pros

Supports plugins
Integrates with the Sketch Design Platform
File sharing
Great for team collaboration
Document management
It’s web-based
Easy to share designs with any colleague

Cons

It doesn’t include a free version.
App onboarding is weak.
The sound features are behind a paywall.
Complex designs bog down the experience
Inadequate offline development
It’s primarily friendly for designers and developers.
It’s web-based

Some people believe that the Figma platform wins because it includes everyone in the design process. It integrates with and can replace the Sketch Design Platform. It’s possible to take Figma prototypes and convert them to mobile apps with Bravo Studio. When it’s time to hand designs off to a developer, they can export to CSS, Swift, and Android XML. If you’re interested in exploring further, you can get started at 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 revamped the 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.

Pros

Open Source
Cross-Platform
Backs up designs with component libraries

Cons

The documentation isn’t the best

Microsoft doesn’t provide a collaboration platform to go with its design system. 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

The Atlassian Design System (ADS) is a collection of components and patterns that contain multiple components. The first release of the ADS was in June 2012.

Pros

A Figma library for quick adoption
A ready-made neutral design
Clean design
Simple interfaces

Cons

Several components of the design system are private.
If Atlassian pulls the designs, you’re left to maintain many components.
A limited set of components

Notably, the Atlassian Design System provides a Confluence template to help you define your design principles. Interestingly, InVision maintains this design template.

If you’re interested in exploring further, you can get started now.

Pollen

Pollen is the foundation of your next design system.

Pollen is a configurable library of CSS variables. It lets you write faster, more consistent, and more maintainable styles. Use it in any stack and quickly extend it as a build tool for your custom design systems.

Pollen came along after writing about the design systems above. I’m a big fan of open-source, so this option is more than welcome.

Wrapping Up

Whether you believe form follows function, a great design is a critical 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.

A complex design system may be overkill if you are not planning on building a sprawling organization of designers and software developers. However, the principles of great design are embedded in these design systems. It can be good to learn from the experts and start creating your design system to set your business on a solid foundation.