UI kits: sharing and synchronization

Share and sync UI kits with Justinmind to collaborate remotely

Need a tool that lets you create and share your own customized widget library with your team? Look no further than Justinmind!

What’s a design system? It’s the glue that binds your prototype together and keeps your whole team in sync: It’s what keeps the design on-brand, and ensures a cohesive product and experience for the user.

Build prototypes with your own widget libraries in Justinmind
Download Free

Maintaining a cohesive design system requires close collaboration between the members of a product team, and especially between designers. Sometimes this can be hard to achieve remotely, but not with Justinmind! With our tool, you and your team can share and customize your own widget library online with just a few clicks!

In this post, we’ll show you how you can create and share a customized widget UI library and share it with other members of your team. Not only will you keep everyone on the same page, you’ll also save time and repetition.

Why create and share a widget library

Share UI kits with Justinmind - benefits

One synchronized library for everyone

Firstly, using a shared widget library saves time. This is because you and your team members don’t have to keep redesigning the same element for each and every screen of your prototype. Moreover, everyone on your team, from designers to business analysts will have access to this standardized UI library, with any updates shared in real time. Hence, no on will be using non-standard or outdated components.

Easier designer-developer handoff

With Justinmind’s design-development handoff capabilities, you can rest assured your developers will be able to fully replicate the UI widgets from your prototype, as they’ll have the exact specifications they need to to code them consistently, without any variation.

Share UI kits with Justinmind - teamwork

Creating your own custom widget library

You can do all this by creating custom widget libraries in Justinmind. A widget is a group or cluster of elements that have a distinct set of attributes, and elements. They may have certain color presets, copy and even interactions. A good example might be a field with a CTA button.

Learn more about widget UI libraries in our Help Center!

If you have the Justinmind Enterprise account, you can create your own custom widgets and add them to a library that you can share remotely with other Justinmind users. You can also import your own widget libraries created outside of Justinmind, in addition to choosing from our own UI kits that boast over 4,000 UI widgets and content blocks! Here’s how to get started:

Set up your library

If you wish to create your own specific widget library in the Justinmind prototyping tool, all you have to do is select Widgets from the main menu and click New Widget Library. Add a name and a brief description and you’re good to go! Justinmind will then add your new custom widget library to the widget palette. Congratulations – you’re now a Library Owner!

Design your widgets

Now it’s time to start designing your widgets. Just drag and drop shapes, and other UI elements from the other widget UI libraries provided on the Widget palette to start creating your own special custom widgets. Once your widget is ready, simply drag and drop it over into your own custom library. Then just give it a name and brief description.

Click Exit edit library to exit the widget editor  – now you can start building your prototype screens using the custom made widget library you created.

Share UI kits with Justinmind - design

Create widget groups

Organize your custom widget library by sorting different UI widgets into groups. Just truck on over to the Widgets palette, select your library and click New group. Give that group a name such as “Buttons” or “Footers”. You can then start dragging and dropping widgets and sorting them into these groups.

Import widget assets from other tools

If you already have assets created from another tool, such as Photoshop or Sketch – no problem! In Justinmind, both of these tools are integrated so you can import your assets into a new customized widget library.

The good thing about this integration is that you can import full images and then separate the layers. Break these down into separate elements or import them as they are, as full widgets. Visit our Help Center to learn more about Justinmind’s integrations with Photoshop and Sketch.

Share your widget library with other users

Now it’s time to share your custom widget UI library so that your whole design team and other project stakeholders have access to it. You can keep everyone connected to this source of truth in Justinmind very easily.

To avail of this shared functionality, go to the gear icon next to your custom widget library in the widget palette and click the Share option. By doing this, you can share any local changes that you make in the prototyping tool with other Justinmind users.

Share your widget library updates

How do the other Justinmind users on your team get access to this library and any updates you make to it? Very easy. As the library owner, you can make sure the local updates you carry out in your custom library are available to all your users by clicking the gear icon next to the library and clicking Commit.

You can also share these changes across more than one customized library. To do this, go to the gear icon next to your custom widget library on the Widget palette and Commit all shared libraries. All your libraries will instantly update across the server.

Share UI kits with Justinmind - sharing libraries
For more information on how to manage your widget libraries in Justinmind, head over to our Help Center!

How users access your updates

Users can easily get a hold of the updates the Library Owner makes to their library in little more than a few clicks. Firstly, they can download or gain access to your library by going to the main menu and updating all the shared libraries by clicking Update all shared libraries. Next, they click on Add/Remove libraries and add the new one, which should appear in the popup window that opens.

The user should then be able to see your custom widget library in their widget palette. After that, they can continue to check for updates to the shared library by clicking on the gear icon at the top of the library. By doing this they make sure the library they’re using is constantly updated.

For more on how users can access shared widget libraries, see our Help Center.

What you can do as a Library Owner

As a Library Owner you’ll also have access to the following features that you can execute at your will! As an owner you’ll be able to do the following:

  • Lock the library and make it uneditable by clicking Exit edit library
  • Commit any changes made to the library and share them as an update
  • Update changes from the server made by owners of other libraries
  • Delete the contents of your widget library, groups in the library or even the full library itself
Share UI kits with Justinmind - library owner

Lastly, as a library owner, you’ll be able to Unshare the library so that it is no longer available on the server, as well as continue to add new groups to the custom widget library shared by you and your design team.

Wrap up

A shared and regularly updated design system of library assets is how you apply the glue of cohesion that will make your product echo the brand of the client and make sure you provide a consistent experience for the user.

It’s also the glue that keeps your team operating from the same source of truth and keeps designers, developers, product managers and clients on the same page, even if everyone is working remotely.

By importing and creating your own custom widget libraries in Justinmind, you have complete freedom over how the UI design of your product will turn out in terms of everything from look and feel, color scheme, font logo and more. All you have to do is add in some interaction, test it on your users and hand it off to the developers!

Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast