We’ve recently released Design System Libraries into UXPin which allow you to store, categorize, and reuse all crucial parts of your work/composition. Now we want to extend this functionality with an update that introduces Design System Libraries to our Sketch integration.
Similarly as in case of DS Libraries in our app, the Sketch plugin now has the option to create a shared library of components, colors, and images that can be used independently from UXPin or synced with your account. This way you can create and manage your assets across two platforms!
Adding New Library
In order to start organizing your process, all you have to do is choose UXPin from the “Plugin” drop-down and select “Toggle Design System library”. In the modal that appears simply press “Create library” to get started.
In case you decide to sync the library with your UXPin account later on, upon creating it, you can decide if your team members should have access to this library and if who is able to edit its content. You can also change these settings later on in Libraries settings.
This way you can limit viewing and editing to yourself or to the specific project members or allow the whole team to use and edit the library freely.
Once you create a Design System Library in Sketch, you can work on it locally (you don’t need a UXPin account for that) or sync it with your UXPin account! If you do, in Design System Libraries infrastructure, the libraries are shared account-wide as long as your teammates have proper access permissions, but remember that this library can also be edited in Sketch.
We made it easy for our customers to limit the number of libraries visible at any given moment, so there are no distractions by sets that aren’t needed in that particular project.
To manage your libraries, expand the section by clicking on the current library name and either switch the active one or go to “Libraries settings” where you can enable, edit, and remove your libraries.
From the edit view, you can also change the user permissions for the existing libraries.
Please note that Design System Libraries and corresponding Design Systems will have the same viewing and editing permissions.
After updating in permissions, you need to upload the changes to UXPin in order to propagate them across your teammates.
Once they open the library, they’ll see a notification of pending changes. Downloading them will update the permission settings also on their end.
When you remove a library, other users might still be using them in their projects. In such cases, they will be notified that the library has been removed and they’ll have the option to either save a copy of that library for themselves or discard their changes and delete the local copy of the library.
In UXPin you can be added to a lot of different accounts and, as a result, you also get access to different libraries. When you switch between different UXPin accounts in Sketch, the library list will refresh, so you’re sure you’re using the files from the correct account.
We don’t want you to constantly browse through a number of elements, when the only thing you’re looking for is the color for a specific use case or a CTA button. It’s easy to categorize and sort through your assets, colors and patterns in Design System Libraries.
While you’re working in Sketch, create your categories by opening the dropdown and typing in the category name. Then quickly scan and add your elements, colors, patterns to appropriate section.
If you decide a category is no longer needed, you can remove it by enabling the edit mode.
You can also easily drag and drop your colors, assets and UI patterns into specific categories. Simply enable the edit mode in the library panel and then drag the chosen item into the category you need. All your changes will be reflected in the synced library within your UXPin account!
Whenever a new library is created, you can quickly start adding different information to it. In order to collect colors from your elements, select them on your Sketch artboard and click “+ Color” on the libraries panel.
You can select multiple elements at once and have all their colors added automatically to your set.
The colors which you’ve added will have their default name and HEX code displayed in the library panel. You can quickly rename them to suit your needs or use cases – simply double click on the name and type in the new one.
Once you have all your colors stored, you can easily transfer them to new parts of your design. Select an element on the artboard and then click on the color from the library to apply it.
The colors you add in Sketch can also be applied to elements in UXPin!
You can also store assets such as images and icons as a part of the Design System Library in Sketch. The files can be added similarly to colors – just switch the tab to “Assets,” select the images or icons on the artboard and press “+ Add image.”
You can also upload icons images directly from your computer. In this case, don’t select anything on your artboard, simply press “+ Add image.”
From that section all the files can be transferred to your Sketch design or UXPin prototype with a single click or dragged to a specific location. All the images and icons can be then adjusted, recolored, cropped and resized till the desired effect is achieved.
Users can also save entire UI patterns which makes assembling designs effortless and fast. It’s enough to select an element or a group of them on your Sketch artboard and then press “+ Symbol” on the Design System Library panel.
This way you can add different parts of your design as UI patterns and use them in Sketch easily. They will also be visible in read-only mode in UI Patterns section in UXPin.
Whenever you add an UI pattern to the library, it is saved as a master template. Our new plugin now allows you to update all instances of this symbol back to their master version—all you have to do is click “Update all symbols on canvas” at the bottom of the library panel.
Another thing you can do is update the master version in the library, if you’ve decided that the recent changes made to the elements should be the official version.
In this case what you need to do is select the element on the artboard first and then, in the libraries panel, enable the edit mode. Your master element will be presented with an icon that signalizes differences between the two versions.
Just press that icon and the master version will be replaced with the version from your artboard. Simple as that!
Now keeping your entire Team up to date and making sure that everyone follows the most recent version of your library on both platforms is easy as never before!
Once you sync your library with the UXPin account you’re logged into, other users on your account will have access to it, if they have the proper edit and viewing permissions. You and your team will be also able to add new properties, assets, or patterns to the library from UXPin level and the changed will be reflected in the Sketch library as well.
In order to sync the library, press the icon with blue arrow and then confirm the synchronization:
Now, every time you add or remove elements from your library in Sketch, you can upload the changes to the cloud.
Once you do, other users of the library are able to download the changes and use new assets, colors, and UI patterns in Sketch. Additionally they’ll be able to apply updated colors and assets freely in UXPin as well as view added UI patterns to keep consistency.
Please note that if you have outstanding library updates and add new elements/colors/patterns without downloading the changes first, the plugin will have a conflict.
You can either upload your changes, which will overwrite the update proposed by the other user, or you can download the pending update, but this will discard all the changes that you’ve made to the library since.
Now you can no longer worry about design consistency across your projects! With Design System Libraries, you have a handy way of creating guidelines and templates that can be managed and applied swiftly.
Ready to try it in UXPin? Log in to the app!