Use Design System Libraries to store colors, text styles, assets and UI patterns and share them across different projects and teams. The libraries help you create coherent designs and can become a base for creating a fully documented Design System.
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 and Material Design libraries with interactive elements, colors, text styles, and icons.
If you don’t have any libraries yet, simply click the Design System Library icon in the left panel and press Create library button.
To add a new library, click the current library name in the bottom left corner and choose +New library.
Additionally, each time you create a new Design System, the corresponding Design System Library with the same name is automatically added.
Upon creating a new library, you will be asked to set edit and access permissions for it. This way you can specify the team members with access to the library and ensure that no accidental edits take place.
You can change permissions anytime – it’s enough to click the cog icon in the library window and open the Library settings. Additionally, you can access permissions in the Manage libraries section by enabling the Edit option.
Please note that the libraries and the corresponding Design System will share the permissions.
Managing the libraries
To change your library settings in the editor, expand the section by clicking the current library name. Now you can either switch to other active libraries or click Manage libraries in order to:
- select which libraries are displayed in the editor;
- rename the library;
- edit permissions;
- remove the library.
Adding and using elements
The library is divided into 4 sections:
- text styles,
- UI patterns.
You can add the elements to the sections directly from the UXPin Editor.
There are 2 ways for adding colors to the library:
- From selected elements — select an element or multiple elements on the canvas and press +From selected in the library window to collect all colors.
- Using HEX code — type in the HEX codes and the colors will be automatically added.
Once you store your colors, you will be able to apply them to different elements in your design – it’s enough to select an element and choose a color from the library. Also, the colors from the currently selected library will be displayed in color picker.
Text styles allow storing all formatting details: font used, its size, weight, and style. To add a text style, select the formatted text from the canvas and press +Text style in the library.
Once you collect the default formatting, you can apply it conveniently to text elements on the canvas – just select an element and press the style in the library panel to apply it.
To this section you can upload images and icons — just click +Upload and choose files from the computer. Once uploaded, you can add the files to your design by clicking or dragging them to the specific location.
UI Patterns allow storing your Symbols. Simply select a symbol on the canvas and click +UI pattern. You can also do it for any elements – they will be automatically transformed into a symbol in the result. Once added to the library, symbols can be reused across different projects.
Categorizing is available for colors, assets and UI Patterns sections. To create categories, open the drop-down at the top of the library panel and select +New category.
Once you add categories, you will be able to upload new elements directly to specific groups and sort the already existing content. To move elements into categories, enable the edit mode by pressing the pencil icon and then drag and drop them to proper sections. 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.
Deleting libraries and elements
To delete the specific elements from the library, enable the edit mode. Then select the elements and press Delete in the bottom of the library panel.
If you want to delete the whole library, click the cog icon in the bottom right corner, choose Library settings and press Delete.
Please note that once you remove a library which has a corresponding Design System, the system will be removed as well.
Updating UI Patterns
Design System Libraries help keep your symbols in sync and allow to access them across different projects. Whenever the symbols in the library differ from the instances places on canvas, you’ll see an indicator in the left toolbar. Click the notification to see a preview of those symbols with their current and new version presented and select the ones you want to update.
Additionally, you can choose to Update all symbols in the settings and the application will compare the symbols in the library with the ones placed on the canvas. Read more about Symbols.