Learn Design Systems

Listen to this post
Reading Time: 5 minutes

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

Drilling In

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.

Design Systems

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

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.

Swiss Grid

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

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.

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 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
Pros
  • Mature and will serve most design use cases
  • Multi-Platform
  • Based on the swiss grid system
  • Readable typography
  • Uses skeuomorphism, if you’re into that
  • Extensive documentation
  • Open Source
  • The Floating Button
Cons
  • Animations will burn a user’s battery
  • Can be unintuitive
  • Strongly associated with Google’s brand
  • Can be overwhelming
  • Can be constraining
  • UI Elements can be obscure

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.

See also:

InVision

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.

Pros
  • Seamless collaboration
  • Clickable prototypes
  • Intuitive
  • Free for one prototype
  • Integrates with the Sketch Design Platform
  • Preview designs directly in the browser
  • Modular, so you don’t need to eat all of it
  • Free collaboration if you have only 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

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
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
  • Lets you import Sketch files
  • Integrates with other Adobe products
  • Integrates with Teams & Slack
Cons
  • It’s still relatively new, so community support is lacking
  • High learning curve like most Adobe products
  • Collaboration requires an Adobe account
  • Works best on macOS, worse on windows, and doesn’t work on linux
  • It’s expensive for advanced features

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

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.

  • 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
  • Does not include a free version
  • App onboarding isn’t very useful
  • The good features are behind a paywall
  • Large designs bog down the experience
  • Not the best for offline development
  • It’s only 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’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
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 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

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 not public
  • If Atlassian pulls the designs you’re now maintaining a lot of components
  • Limited set of components

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.

Wrapping Up

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

Share this post