fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

How to Build a Design System?


Tegra - February 16, 2020 - 0 comments

How to build a design system?  How design system is constructed?  Field guide to design systems. In this series we'll take a closer look at one of the hottest topics in the design industry.

How to build a design system? 📈

Courtesy of @tomkoszyk

It all depends on the product, project goals, team needs. The good news is all design systems have similar construction. Figuring it out will help you find out what exactly do you need and how to approach such a project.⁠

I’d say that all modern design systems are based on @brad_frost Atomic Design methodology. It involves breaking down UI into most essential elements that are then reused for building more elaborate components.⁠

Atomic Design describes five layers of UI: ⁠

1️⃣ Atoms, the essentials such as color, shape, etc.

2️⃣ Molecules, simple UI elements like a button. It’s constructed out of shape, color, and a text style; it’s still a relatively simple structure though

3️⃣ Organisms, more complicated UI elements, made out of atoms and molecules: A form is a good example ⁠

4️⃣ Templates, blueprints of specific pages (or sections), later filled with actual data⁠

5️⃣ Pages, templates filled with real data. ⁠

Recently, another layer has been introduced: design tokens. Tokens are understood as an agnostic way to store variables metric values used throughout the system — things like spacings values, corner radiuses, grid sizes, etc.

There’s also another side of the spectrum: Design principles & guidelines and the documentation. Guidelines & principles are an open subject: some systems are heavily focused on those, others do not have them.

Atomic Design  A methodology that involves breaking UI down into its basic components, which are then reused throuchout the site.

Atomic Design

A methodology that involves breaking UI down into its basic components, which are then reused throughout the site.

Atomic Design  Majority of Design Systems on the market are built using Atomic Design Methodology.

The majority of Design Systems on the market are built using Atomic Design Methodology.

Atoms Foundations  These are the most basic "elements" of a design sytem. The lowest level of design artefacts. Foundations scope may vary depending on your needs.

Atoms Foundations

These are the most basic “elements” of a design system. The lowest level of design artifacts. Foundation's scope may vary depending on your needs.

Basic UI Elements  UI elements that are used to build more elaborate structures. Excellent examples of such items are buttons or inputs. They are constructed out of most basic elements, and later on, used for building complete forms.

Basic UI Elements

UI elements that are used to build more elaborate structures. Excellent examples of such items are buttons or inputs. They are constructed out of most basic elements, and later on, used for building complete forms.

UI Components  More elaborate UI Structures built from several elements. Like a complete form consisting out of different inputs, selects, texts and buttons.

UI Components

More elaborate UI Structures built from several elements. Like a complete form consisting out of different inputs, selects, texts, and buttons.

Sample Screens  Templates are more common for open design systems where those templates serve as another way of showcasing guidelines on how to use the system. Those are blueprints filled in with the actual data.

Sample Screens

Templates are more common for open design systems where those templates serve as another way of showcasing guidelines on how to use the system. Those are blueprints filled in with the actual data.

Principles & Guidelines  An optional part of a design system. It's a sort of a guide for using all system elements. 
Those guidelines may describe elemental principles and thinking behind the system or to provide more specific do's and don'ts.

Principles & Guidelines

An optional part of a design system. It's a sort of a guide for using all system elements.
Those guidelines may describe elemental principles and think behind the system or to provide more specific do's and don'ts.

Documentation  Designs Systems are all about design documentation. Its size may vary, but a comprehensive style guide and UI Library are the absolute minima.

Documentation

Designs Systems are all about design documentation. Its size may vary, but a comprehensive style guide and UI Library are the absolute minima.

Bonus — 4 tools that may be useful in your designer way:

Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *