Thursday, 22 June, 2017 UTC
Summary
There's never a better time to work in software. Developers and designers are among the most desired people on the market. Companies all over the world seem to have a never-ending thirst for software experts. In 2003 the U.S. Bureau of Labor Statistics estimated the number of software engineers working in the US to be 677,900 people. In 2016, this number increased over 5× to 3,870,000.
At the same time, design teams grew faster than software development. In the last 5 years, the design-developer ratio increased by an average of 2.5×. These changes put enormous pressure on designers and developers to take on more projects while delivering higher quality faster. But the challenge is that software development doesn't scale easily.
Scaling through hiring, without first putting standards in place, doesn't usually end well. With every new hire, the technical and design debt increases. New ideas for color palettes, typography, patterns, code standards or even frameworks appear in the product, increasing the inconsistency and maintenance cost.
Creating a design systems process is one of the best ways to prevent this problem.
The Era of Systems
For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.
Unlike past approaches to setting up standards in software development (pattern libraries, style guides...), design systems are not a static deliverable created from months of work. In fact, design systems are not a deliverable at all - they're a new process of building software.
What is a Design System?
A design system reflects the truth about the standard experience in a given organization. It's both trustworthy documentation and a modular toolkit for designers and developers.
Design systems adapt naturally to changes in the product and sync design and code for an easier way to create consistent experiences.
The Toolset for the new Era
Over a year ago, the team at UXPin started our user research. After 40+ interviews with design and engineering leaders and a survey of 3,100+ designers and developers, we've concluded traditional design tools aren't good enough to serve this new reality.
They're too fragmented, disconnected, and unfocused. Design system tools must be a complete hub for design and development.
We've summed up the research with simple rules for our first release of UXPin Systems:
- Dynamic environment, not static documentation
- Actionable system, not a reference document
- Connection between design and development, not just a library of design patterns
With these principles in mind, we released the first design system platform on June 13th 2017.
Step by Step in UXPin: Creating a Design System Process
Using our internal design system as an example, let's explore how to create the foundation for your design system:
- Color Palette and Text Styles
- Assets (logos, icons)
- Design Patterns
- Development Documentation
Important disclaimer: All the following examples were created within UXPin only, but the UXPin Design Systems solution also supports Sketch.
1. Create an Actionable Library of Styles
Start with the most prevalent pieces of any design: text styles and a color palette.
In UXPin, both color palette and text styles can be pulled directly from design projects and saved in a shared Design Systems library (an actionable toolkit that's always synced with design system). Your entire team will always have access to approved styling, minimizing the temptation of introducing yet another typeface or shade of gray.
To add every color or text style, simply select layers in Sketch or UXPin and UXPin will pull the right styling and add it to the system.
All these styles always stay in sync with the library in UXPin or Sketch, which makes for a living system (not just static documentation).
2. Create an Actionable Library of Assets
Just like colors and text styles, you can save all your graphic design assets in UXPin Systems.
Think logos, approved stock photos, or icon libraries. You can save all these in the Design Systems Library, which stays in sync with the Design System and your entire team. One library, directly in your tools and always in sync.
3. Create an Actionable Library of Patterns
You can also save your design patterns in UXPin. All your symbols from UXPin and Sketch can be saved in a Design Systems Library. UXPin symbols can be interactive and animated, so you don't have to recreate interactions every single time.
Symbols in both UXPin and Sketch have overriding abilities, so you don't have to worry about your patterns being used in multiple places with different copy. UXPin allows you to adjust the copy however you want and sync everything with the library whenever you're ready.
It's a powerful tool to manage all your shared design patterns.
4. Generate a System and Keep it in Sync
Having a library of shared assets is great, but it's definitely not enough to solve the problem of scaling software development.
Most solutions stop here and don't move towards development. We've decided to go all the way.
In UXPin Systems all the colors, text styles, assets, and patterns become a living system with one click. Just go into the Design Systems tab in UXPin Dashboard, select your library, and it comes to life.
A new documentation page is automatically created and always stays in sync with your library. If you add a new pattern or a color, it automatically appears in your design system.
5. Add Documentation for Developers
Once you've generated your system, you can add documentation, including code snippets to any element. The documentation editor makes it very straightforward to document your system.
Again, the documentation is immediately available to your team.
6. Make Documentation Actionable
Design system documentation shouldn't just be a reference document. It needs to be where the action is: in the design projects themselves.
With UXPin, documentation from the design system follows the elements in any project.
If you're working on yet another sign-up form, once you drop in the symbols from the library, UXPin automatically generates full documentation for developers - including all the information coming from the design system (full markup, information about imports, and names of JavaScript components, etc).
The First Complete Solution
Needless to say, I'm extremely proud of our focus on design systems as the heart of a better software development process. Of course, this is just a beginning.
If you'd like to try out UXPin for yourself, you can go ahead and start a free trial.
Creating a Design System Process with UXPin is a post from CSS-Tricks