Web design is a very creative profession; surely, words like 'system,' 'rules,' or 'laws' don't fit the bill. No, a designer is free to do whatever they want! Give them a blank canvas, and they're ready to go.
Allright, on the one hand, a designer craves that creative freedom. On the other hand, even designers sometimes find it useful to have some rules to stick to. However, let's call them 'guidelines,' okay? Us creative types prefer softer language like that.
With that out of the way:
What is a design system?
A design system is a set of guidelines that ensures a consistent look and feel for products. Whether your audience encounters your designs on Instagram, a website, or — who knew it still existed?! — in real life, designing with a design system makes sure they have the same experience everywhere.
Crafting new formats within a design system helps streamline your design process and assures you maintain the same look everywhere. Working with guidelines helps you bring structure to your work. You won't have to start from scratch every time and you can leave reinventing the wheel to inventors.
My design systems contain 3 parts:
Foundations
The part where you'll define the guidelines for all designs. This is the core of your system; a brand distilled to its practical essence. It includes things like:
Spacing
Shadows
Icons
Components
These are the basic building blocks for your design systems and are often reusable elements. It's kind of like a library, where you store stuff like:
Buttons
Badges
Dropdowns
Radio buttons
Checkboxes
Tabs
Tags
Blocks
These are reusable bigger content blocks, which includes components. Like:
Header navigation
Hero sections
Footer sections
The advantages of using a design system are that you can guarantee consistency in your designs. This is important because it's crucials for modern brands that users always know which brand they are interacting with. Additionaly, the framework of a design systems helps you create the best solutions every time. Instead of limiting you, a design systems helps you create amazing products within the boundaries of a brand.
Checkout my free Figma Starter Design System. A starter kit which you can use every time you start a new project with Figma. It includes colors, grids, icons, shadows, avatars, local variables and more!
