Creating a Design System: The Online Guide

A step-by-step guide based on our own case study

Earlier this year, our CEO Marcin Treder wrote a series of posts describing his work in helping to build UXPin’s internal design system.

We wanted to condense his experience into a simple step-by-step guide. A quick reference for anyone about to embark on or already in the middle of their design systems process.

Design systems help operationalize design, freeing up product teams to focus on the real business and user problems.

We’re very proud to introduce our open online guide to building a design system. Our goal was to make the guide as thorough and technical as possible based on lessons we’ve learned the hard way in our journey so far:

  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

We hope this will help product teams get a head start on scaling design consistency and efficiency.

If you’ve worked on a design system yourself, we’d love to hear your thoughts.

UXPin is the design process tool that helps product teams around the world turn ideas into products faster.

With Merge, UXPin’s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. UXPin Merge allows you to design with React components to achieve full consistency with the final product.

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. •