Page of Alena's post with the title Design Systems overview and resources

⭐️ πŸ’–

Back to home page

Alena Nikolaeva

Germany

Frontend Developer

Design Systems overview and resources

Updated: 29.06.2020

4 min

Intro to Design Systems: resources and tools (2020) πŸ‘‡πŸ»

Are design system made for designers?

The term "design system" appeared in the mid-twentieth century and meant a system of visual brand identification. However, at that time it was only about physical products on the shelves of stores. Design system in modern world is a documented library of reusable components that helps consistency throughout the application(s). Design systems catalog all the reusable UI components to help teams assemble complex UIs faster.

The concept of "design-system" is often confused with style guides, UI-kits or brandbook. However, this definition has a larger meaning. A design system simplifies the creation, testing, visual and technical updating of it's components and ensures uniformity of product interfaces.

The "official" definition:

β€œA design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” (Design System Handbook)

How do I know I need one? ✨

The design system helps communication between designers and developers, and accelerates development of the product. It's mandatory that any change or update has to come thought to the entire organization (from stakeholders to developers). By unifying terminology, it reduces time spent on discussion of tasks and forms the general understanding of goals and principles. A mature design system can save time and money in the future when it's time for the new service or update a product. Above all, design system embrace brand personality, since you can overview everything (from colors to naming) in a quick glance. Software develops, designers, marketing, people, and businesses everyone can win.

Pros πŸš€

  • Scalable (synchronized usage across applications, or projects, or even marketing emails!)
  • Isolating components makes testing possible/easier
  • Make sure that engineering and design teams are aligned and collaborating effiently
  • Having a design system helps newcomers to start quickly
  • Consistency
  • Code reusability
  • If the products are growing very fast

Cons

  • Building one takes time

  • Never completed

  • Full time job for engineering team. Design system can't be treated as a side project.

  • Not for every project or every team.

    I work with X framework, does that work for me? πŸ’š

    Storybook is now supporting React, Vue, Nuxt, Angular, Web Components, Svelte and over a dozen others. Here is the quick snippet of how it would work with Vue.

  • Start by adding storybook to the project (make sure to have vue, vue-loader, vue-template-compiler, @babel/core, babel-loader and babel-preset-vue in your dependencies)

$ npm install @storybook/vue --save-dev
  • Add npm script to package.json
{
  "scripts": {
    "storybook": "start-storybook"
  }
}
  • Create the main file .storybook/main.js with the following content
module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};
  • Create a ../src/index.stories.js file, and write your story.

Learn Storybook for Vue.js πŸ‘ˆ check full tutorial for Vue.js

Storybook for Nuxt πŸ‘ˆ Storybook also have a support for Nuxt

Favorite design systems (2020) πŸ‘‰πŸ»

  • Collection - Best Design Systems (2020) Personal favorites
  • Collection of Russian design systems - Mail.Ru Group, Yandex, Rambler and others. Live guides, articles, presentations, speeches and other materials about design systems. Personal favorites
  • Audi - Design System by Audi
  • Cedar - The Cedar Design System provides digital teams with reusable UI components based on REI’s visual language.

Tools πŸ”§

  • Bit.dev - Helps build independant and reusable components
  • Zeroheight - Interactive HTML snippets and Storybook components
  • Vueds - An open source tool for building Design Systems with Vue.js
  • Gitbook - An open-source tool for developers to build documentation
  • Storybook - An open source tool for developing UI components in isolation for React, Vue, and Angular.
  • How design systems use Storybook - "A roundup of the best Storybook techniques from leading design systems" by Dominic Nguyen

Resources πŸ›‹