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.
A methodology that involves breaking UI down into its basic components, which are then reused throughout the site.
The majority of Design Systems on the market are built using Atomic Design Methodology.
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.
More elaborate UI Structures built from several elements. Like a complete form consisting out of different inputs, selects, texts, and buttons.
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 think behind the system or to provide more specific do’s and don’ts.
Designs Systems are all about design documentation. Its size may vary, but a comprehensive style guide and UI Library are the absolute minima.
A good way to decompile and analyze all this stuff is to research top agency’s websites. As an example, you can find some here – Top eCommerce Web Design Companies.
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.