How to build a design system?

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 which are then reused for building more elaborate components.⁠
⠀
Atomic Design describes five layers of UI: ⁠
⠀
1️⃣Atoms, the essentials such as colour, shape etc
⠀
2️⃣ Molecules, simple UI elements like a button. It’s constructed out of shape, colour 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

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.

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.

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.

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.