Design Systems: Step-by-Step Guide t Creating Your Own
1. Create the UI Inventory for the Design System 2. Get Organizational Buy-In for the Design System 3. Build a Multidisciplinary Design Systems Team 4. Establish Rules and Principles for the Design System 5. Build the Color Palette for the Design System 6. Build the Typographic Scale for the Design System 7. Implement an Icons Library for the Design System 8. Standardize Other Style Properties 9. Build the First Design System Pattern 10. Run a Sprint Retrospective 11. Conclusion 12. Recommended Resources

Creating A Design System: Creating a UI Inventory

First, you must understand the current state of your design and development ecosystem.

If you think the experience provided by your product is internally inconsistent and confusing, or the maintenance of code takes too much time - you must prove it to get your team and stakeholders on board.

The best way to start is by building an inventory of all the different patterns, colors, text styles and assets used in the product. The inventory clearly shows all the inconsistencies and hopefully lets you build the case for a design system. Creating a complete inventory, as described below, takes time. You might want to select only a few activities to get the team and stakeholders on board and continue when you’ll have the full team focused on the task.

1. Create the Patterns Inventory

UI patterns
UI pattern inventory I created in  UXPin along with annotations for our developers.

2. Create the Colors Inventory

A typical source of design inconsistency is the set of colors used across the product portfolio. For example, the inventorization of colors at UXPin showed a massive redundancy slowing down the development process. 116 colors variables with 62 shades of gray were used at UXPin before the emergence of our design system.

3. Create the Typography Inventory

In a complex project, typography can quickly get out of hand. Lack of consistent typographic scale used across the project makes the information architecture convoluted and hard to understand for users, while it also increases the cost of product maintenance due to fragmentation of code. By inventorying text styles, you show your team and stakeholders where styles become inconsistent.

4. Create the Icons Inventory

Icons provide the necessary context for user experience and speed up the recognition of key actions in most of the interfaces. Inconsistent usage of icons can lead to extreme confusion of users and increase the maintenance cost. By creating an inventory of icons, you can help your team and stakeholders understand the pain of not having a design system in place.

5. Create the Space Inventory

Space is the key ingredient of any UI and designers and developers have to manage it efficiently. Add to your inventory different kinds of grids used across the products and perhaps also dive deep into paddings in the containers to understand any inconsistencies. Learn more about space in design systems: here

Try UXPin now!