Creating a Design System

A design system is a collection of guidelines, style guides, and reusable components that enable rapid creation of mock ups and support faster build-out of features. It can answer specific questions from what fonts and colors are used on websites, to how buttons and panels are displayed.

As the product design is equally important with development for any kind of app/website. We might face few common challenges while working on it without design system. For example:

1. It would be difficult to quickly design and prototype new features on different screen sizes incorporating brand colors , logos and images.
2. As the team grows, there would be more instances of designs out of sync or designers might work with outdated palettes.

So, when you start working with the Design system:

1. Creating mockups and experimenting with designs will be super fast.
2. You will be able to design for a range of screen sizes, which helps you make better UI decisions.
3. You can easily go back and change text, size, images, and styling on the fly.
4. This would be great for customizing screens to show clients and get feedback.
5. You can also add structure to your web design process, and help identify and streamline your current website, app, or product so that everyone is on the same page.

Step -1 :

To start, you do need a design, this could be a mockup, a live page, or an app and a collection of components. Make a note of the various states of the components (idle, hover, clicked, disabled, default etc) , fonts, colors and typography.

Step - 2:

Organize everything into pages, place all the components and its style guide in different pages. You need to have a style guide page for design items such as font, typography & icons, components, and templates. With this method, components will be quick to find as there are fewer places to look and simple to understand.

P.S: You can also create few additional pages for adding and approving the new features added to the website/app or maintaining a log sheet for what has changed between the designers, also for guidelines to check if the whole team is aware of the standards.

Step - 3:

Create the layer styles and text styles with any designing tool you prefer.

Layer styles lets you save an objects properties such as fill, borders, shadows, alignment etc.. and allows you to consistently apply them to other objects.

Naming layer styles: How you name your styles will determine how they appear in the menu .

Text styles lets us save the properties of text, including font size, font, alignment, etc. and allows us to quickly input or change text used in symbols later on.

Step- 4:

Create symbols/components

Pay special attention to spacing, sizing, shapes, and if applicable remember to apply text and layer styles to individual parts of the components.

Start small by defining with things like buttons, avatars, and icons, then move to building your composite components.

Create templates and pages — Once you have a collection of symbols, you can start creating templates and pages for creating fast mockups of entire screens. It is also a good idea to start collecting your symbols into a style guide to organize and present them.

Step 5 —

Remember that a design system is a living library and will need to be continually update it. You can maintain Data Folders, Plugins , Documentation folders, Keyboard shortcuts list etc.,