Sharing and syncing UI widget libraries

With Justinmind, you can share Widget libraries with other Justinmind users in just a few clicks. Shared Libraries will synchronize changes so at all times all the users are using an updated version of the library. This feature is excellent to implement Design Systems in big organizations.

Sharing a Widget library

You can make any Widget Library to become a shared library following these steps.

Hover over the library icon to enable the “New library” tooltip. Clicking on the icon opens the library management dialog, there you can see two sections “Local” and “Shared”.
In the image, the library called ‘My own library’ is not being shared yet. If we click on the little gear icon next to the name of the library, a list of options will show up one being ‘Share’. If you click ‘Share’ that library will be uploaded to the Justinmind Server and become a shared library and you will also see it on the “Shared” tab.
From then on, any user in that account will see that library in the Libraries Dialog and will be able to use it for their prototypes.

Once you share a library you become the Owner of that library, meaning you will be the only user able to delete that library from the server. The rest of users will be able only to use the library for their prototypes and to add, remove or change the widgets inside that library.

Managing a shared Widget library

Committing changes to your shared library

Any user in the same account can add, remove or edit widgets from shared libraries. To do so first they need to click on the ‘More libraries’ text in the Libraries palette and then, in the dialog, select that library and hit ‘ok’ to add it to the palette. Once in the palette, you need to click on the gear icon of that library and select ‘Edit library’ to edit its contents.

Once the library is activated for edition mode, you can change anything in it. Like, for instance, adding a new widget to the library. After finishing with the changes, you’ll need to click on the gear icon again and select ‘commit’ to upload the changes to the server so the rest of the users can get those changes. The library will have a new version number just for information purposes, libraries don’t save the history of changes of all the versions.

Note: changes will be applied to the library only, not the prototypes. If any prototype was built using previous versions of that library, that prototype won’t change.

Operations with your shared library

Apart from sharing your custom widget library and committing changes, you can perform the following operations:

Exit edit library – closes the library for edition so you can use it in a prototype.
Edit library details – click to edit the name and description of your library from the dialog that appears.
New Widget Group – click to create a new group of widgets so you can keep them organized.
Remove from palette – removes the widget library from the palette. You can add it again by clicking on ‘More libraries’ and selecting it from the list.
Generate Design system – generate a document that includes the design system created in the library (colors, fonts, functional components and assets)
Edit all widgets – opens all the widgets of the library in the canvas so you can edit their contents. This option is specially useful when you want to do bulk changes to them like the ‘Edit – Replace styles’ option in the main menu.
Save all widgets – saves the changes of any widgets that are opening in the canvas for edition.
Commit – click to upload all local changes made to the current library to the server.
Update – click to retrieve changes from the server since the last update.
Revert changes – click to revert all changes made to the current library since the last commit.
Unshare – click to remove the library from the server and from the other users’ computers.
Export library – click to export the contents of the shared library into a file.

Accessing a shared library from another user

If you are a Justinmind user and another Justinmind user has shared a custom widget library in a common account, you can use that library with your prototypes.

To use libraries from other users, click on the ‘More librares’ text in the Libraries palette and select the library from the dialog. The dialog will list all the libraries you have access to. Once added to the palette, you can drag widgets to your prototype as you would do with any other library.