Design Systems
A Design System defines the basic variables, guidelines, templates and patterns that define a UI.
Styleguide, Pattern-Library, Design System...?
A Style Guide ususally refers to colors, grids, icons, typography etc. It also contains documentation about look and feel, corporate identity and branding. Pattern Libraries describe how interactive or dynamic elements behave, e.g. a multiselect input or tab navigation. Further it states in which context and where to use it and provides definition of animations and user interactions.
A Design System is basically a superset of both, providing everything that's needed to build consistent UIs across applications.
A Design System isn’t a Project, it’s a Product Serving Products - Nathan Curtis
Break it down
The modern approach is not to provide complete pages for every UI state, but equip developers with atomic designs (see Atomic Design) to create consistent UIs and maximal flexibility. This allows to create all sorts of components and pages that match the design system without having a designer to define all kinds of new composite views.
There might be exceptions when it comes to edge cases, but it still minimizes effort and keeps overall flexibility high.
We're not designing pages, we're designing systems of components. - Stephen Hay
UI/UX Design Tools
The probably most known tools used for Design Systems are Figma, Sketch and Adobe XD.
Those tools are very powerful and can also be used to create vector assets, high fidelity prototypes, components, style exports or even generate code, like for example Figma-to-React.
Examples
Here you find some very prominent examples for great Design Systems. Just explore them to gain better understanding of how they work. These are just some examples, of course there is many more great Design Systems provided by lots of companies.
Some existing Design Systems also are made available as Figma community templates, for instance Material.io Figma Template.
