Design System in UI/UX | Benefits of Design System

What is Design System? | Examples of Design System in UI/UX
#uiux #designsystem #styleguide

What is a design system?
A design system is a collection of all UI resources and elements that a design company may have. These include all UI Components, design guidelines, style guide, reusable components and philosophies, documentation, page screenshots and image examples and snippets and development resources with necessary code and hosting it on common cloud location, so it can be accessed anytime by the required team members.

Everyone who’s part of the company product team, such as developers, designers, engineers, product managers, etc., gets together to discuss and map out everything that’s currently an existing part of their digital product assets, from logos and colors to language and codes. Then they collaborate on creating this ultimate master plan that explains how exactly things should be presented (designed and coded).

Everyone has one common source of visual references, tools, articles, patterns and data libraries. It allows them to keep their work consistent and uniform, and have every single member on the same page – the ultimate goal of design systems.

Importance of design systems
Designers don’t have to create a new landing page from scratch when they have a library of standard design and UI elements such as colors, logos, headers, footers and other essential symbols to speed up the design process.

Developers don’t have to waste time on repeated UI Components or code snippets when everything they need is right there to copy from reusable components and/or libraries.
The majority of design systems follow rather general setup patterns.
The system often features its top navigation with the main categories: Design, Code, Language, Components, etc.

Benefits of Design System
One of the most significant benefits of design systems is that such collection of resources, elements, and data minimizes communication issues between designers and developers and minimizes the room for potential UX design bugs.
--------------------------------------------------------------------------------
Image and Video Credits

Video by Pavel Danilyuk from Pexels
Video by cottonbro from Pexels
Video by Mikhail Nilov from Pexels
Video by BuildWith Angga from Pexels

--------------------------------------------------------------------------------
Facebook
---------------------------------------------------------------------------------

#uiux #designsystem #styleguide

What is Design System | Examples of Design System in UI/UX