Uxpin Creating A Design System Quickly With Uxpin

Creating a Design System
Quickly With UXPin

Creating a Design System
Quickly With UXPin
Copyright © 2018 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded or

posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed “Attention:

Permissions Request,” to [email protected].
Design Systems in UXPin
One platform for consistent design and development.

S Y S T E M S
Design Language UI Patterns Automated Documentation

D E S I G N
Sync Sketch with UXPin for Scale designs consistently with Documentation syncs everywhere
a consistent design language: fonts, Symbols and interactive components. and travels with library elements.
colors, icons, assets, and more.
Modular design One source of truth Painless documentation

and development for everyone and developer handoff
Scale quickly with design system Close your knowledge gaps. Eliminate busywork. Generate style
libraries. Formalize your design and code guides, specs, and documentation.
conventions.
My productivity and developer productivity have both increased.

They love that they can collaborate and move quickly to a powerful
Tracy Dendy experience.
HBO
To book a demo, call +1 (855) 223-9114 or email us at [email protected]

Introduction
Back in 2016, the team at UXPin started user research for our first
design systems platform. After 40+ interviews with design and en-
gineering leaders and a survey of 3,100+ designers and developers,
we’ve concluded that traditional tools don’t always support a scalable
design process.
They’re too fragmented, disconnected, and unfocused. Effective design

tools must be a complete hub for design and development.
We’ve summed up the research with simple rules for our design
systems platform:
• Dynamic environment, not static documentation
• Actionable system, not a reference document
• Connection between design and development, not just a library

of design patterns
• Lives inside the same platform as prototyping and collaboration

tools
Introduction 5
With these principles in mind, let’s explore how UXPin Systems re-
duces the time and effort of creating a documented design system.
The Design Systems
Process in UXPin
More than just a pattern library or style guide, UXPin provides a

comprehensive design systems platform:
Let’s look at how to create the foundation of your design system in

UXPin:
• Color Palette and Text Styles

• Assets (logos, icons)
The Design Systems Process in UXPin 7
• Design Patterns
• Development Documentation
Important disclaimer: All the following examples were created with-

in UXPin only, but the UXPin Systems solution also supports Sketch.
1. Create an Actionable Library of Styles

Start with the most prevalent pieces of any design – text styles
and 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 a 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 documen-
tation).
Now that you’ve started your design system, it’s important to note
that you can also set permissions for who can view and modify
the design system.
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 the 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
as custom fields (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.
And that’s it! You’ve just created your first full design system. If
you want to play around with what you’ve seen, ahead and start
a free trial.

Uxpin Creating A Design System Quickly With Uxpin

Uploaded by

Copyright:

Available Formats

Uxpin Creating A Design System Quickly With Uxpin

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uxpin Creating A Design System Quickly With Uxpin

Uploaded by

Copyright:

Available Formats

Creating a Design System

Quickly With UXPin

Copyright © 2018 by UXPin Inc.

All rights reserved. No part of this publication text may be uploaded or

For permission requests, write to the publisher, addressed “Attention:

One platform for consistent design and development.

Design Language UI Patterns Automated Documentation

Modular design One source of truth Painless documentation

My productivity and developer productivity have both increased.

To book a demo, call +1 (855) 223-9114 or email us at [email protected]

They’re too fragmented, disconnected, and unfocused. Effective design

• Dynamic environment, not static documentation

• Actionable system, not a reference document

• Connection between design and development, not just a library

• Lives inside the same platform as prototyping and collaboration

More than just a pattern library or style guide, UXPin provides a

Let’s look at how to create the foundation of your design system in

• Color Palette and Text Styles

Important disclaimer: All the following examples were created with-

1. Create an Actionable Library of Styles

To add every color or text style, simply select layers in Sketch or

2. Create an Actionable Library of Assets

3. Create an Actionable Library of Patterns

Symbols in both UXPin and Sketch have overriding abilities, so you

It’s a powerful tool to manage all your shared design patterns.

4. Generate a System and Keep it in Sync

Most solutions stop here and don’t move towards development.

A new documentation page is automatically created and always

5. Add Documentation for Developers

Again, the documentation is immediately available to your team.

You might also like