Design System Libraries

Design system libraries are the place for shared design patterns, such as colors, text styles, assets and Symbols that allow teams build quality consistent prototypes; saving time while keeping projects on-brand. With DS libraries you can also create a fully documented Design System.

Note

Please note that there’s a limit of one Design System Library on the Free plan.

Built-in Design Libraries

Apart from your own libraries, UXPin offers ready, built-in iOS, Material Design, and User Flows libraries with interactive elements, colors, text styles, and icons.

Adding Libraries

To add your first or next library, go to Design System Libraries, open the section at the bottom of the panel and click + New library.

Permissions

You can decide who has access to your library — you or your team. You can set these permission when creating the library or any time after in the Library settings (cog icon). Or, you can access permissions in the Manage libraries section by clicking Edit.

Managing Libraries

To manage libraries, click on the current library name and choose Manage libraries. You will see a modal in which you can:

  • decide which libraries are visible in the Editor
  • rename libraries
  • edit permissions
  • delete the library

Adding and Reusing Elements

Every library has 4 sections. You can add elements to each section directly from the Editor. And these are:

  • Colors
  • Text styles
  • Assets
  • Symbols

Colors

You can add colors to the library in two ways:

  • From selected elements - select one or more elements on the canvas and click +From selected in the library panel to add all colors.
  • With a HEX code - type in the HEX codes to add colors automatically.

To apply colors to the elements on your design, select the element and choose any color from the library. The colors from the currently selected library will also be displayed in the Color Picker.

Text styles

To add a text style, select the formatted text from the canvas and click +Text style in the library. This way you will store its font, size, weight, and style. You can then apply it to other text elements on the canvas.

Assets

To upload assets, such as images and icons just click +Upload and choose the files from your computer. Once uploaded, you can add them to your design by clicking or dragging them to the desired place.

Symbols

To add a Symbol, select an element on the canvas and click +Symbol. Any element that's not a symbol will turn into one. Once added to the library, symbols can be reused across different projects.

Categorizing

You can create categories for Colors, Assets and UI Patterns. Create one in the drop-down at the top of the library panel by clicking +New category.

Apart from adding new elements to categories and sorting already existing content, you can move elements between them. Select All categories from the drop-down, enter the edit mode (pencil icon) and then drag and drop the elements into desired categories.

You can also reorder the elements inside the category in the same way as well as switch between list or grid view with the icon right next to the search bar, as shown below:

Switch to the list view if you want longer element names to be fully displayed.

Deleting Elements and Libraries

To delete an element from a library, enable the edit mode, select an element and click Delete.

To delete the whole library, click the cog icon at the bottom, choose Library settings and then Delete library. Removing a library with a corresponding Design System will remove the system too.

Updating Symbols

Design system libraries let you keep symbols in sync even when working on different projects.

Sometimes you may notice a small yellow indicator with a number on the Quick Add menu. It means that some symbol copies on the design are out of sync with their versions in the library — the symbol may have been updated in another project.

Click on the square icon and you'll see a panel to update the symbol copy to its version in the library without erasing overrides.

Optionally, you can choose Update all Symbols in the settings.