Shared libraries: which one to use?
Update: This article is very old, and the information about the different tools are not relevant anymore.
Check instead my other articles → https://medium.com/@audreyhacq
Well I think it’s no a secret anymore: I’m a big fan of Design Systems!
My new purpose in life: free up time for designers so they can do more interesting stuff than seeking into 20 files to find the final version of an icon or re-do for the 4th time this famous focus input state…
Now that we’re all convinced that we must stop designing pages and start designing components (don’t tell me you’re not ;) the second step is to share these components among designers.
Working with components is great but being able to share them among designers is so much better!
And in order to share these components and make sure they are up to date so that everyone works with the same raw material, what better solution than shared libraries?
Comparing existing shared libraries
So I’ve started to compare the existing services in order to find which one was the most efficient, according to what I wanted to do.
The following table sums up the main features I would expect from a good shared library and compares Craft, Zero Height, Lingo and the new native library from Sketch:
Now let’s review in details each tool in order to understand what are the main differences between these services:
Craft Library plugin
For the record, Craft is a Sketch plugin, developed by Invision that allows you to do many things: prototyping, duplicate content, easily out random content in your design and share your components… That’s a lot for one plugin and I’m not quite sure that this latest feature is their priority for now…
The negative points that I see with Craft are:
- I can’t decide who has the right to edit the library and who can just use it, a feature which in my opinion is crucial when working with several designers.
- I don’t like the way it manages folders; it’s not really easy to find the components I am looking for:
- The plugin isn’t really ergonomic nor easy to use…
Guess what: Craft wouldn’t be my first choice ;)
Zero Height
Zero height is an online service that creates Style Guides directly from your Sketch file.
Pros
- One of the biggest advantages of Zero Height is the creation of that well-organized Style Guide that anyone with the link can access:
- The folders’s management system is helpful and great to find quickly what we’re looking for :
- There is also a history of every component so I know who did the last edit of a component and when. However, I can’t restore one of these versions… Too bad :(
Cons
- I can’t choose where I want to store my library… It will automatically be saved on Zero Height’s servers.
- I can’t choose who in my team can edit the library and who can just use it and for me, it’s really missing…
- This service is not free. We have to pay (after a short trial period) and I don’t see enough advantages in Zero Height yet for investing some money in it.
Lingo
So now we are talking!
Ok, now I can tell you the truth: Lingo is one of my favorites (and no, I do not own any stock of that company ;)
Pros
- The filling of the library is really simple: once I’ve prepared my Sketch file with all the symbols, shared styles and text styles, I just have to hit the “push all” button and bam, everything is synchronised!
- I can check every component that I will “pull” or “push” in the library, which reduces the possibility of making errors:
- Just as Zero Height, Lingo creates a beautiful online Style Guide that everyone with the link can access:
- Permissions and rights!! I can decide who will be able to edit the library or not:
- I haven’t seen components’ versioning for now but I can see recently deleted assets and restore them:
Two other very good points for Lingo that make it a great tool to manage complex design systems:
- I can import other assets than Sketch ones: jpeg, png, gif, tiff, svg, eps and pdf files.
- I can also download the assets into different files extensions directly from the online version. That’s very convenient, especially for the other team members who need to use components with other softs (as PowerPoint or Keynote for example)!!
Cons
Even if, for me, Lingo is one of the best shared library I’ve tested, here are some points which could make you choose another solution (as the Sketch native library, for example):
- It’s not a free service: you have to pay when you exceed 150 assets (which occurs very very quickly)
- It’s also a plugin and that means that it’s dependent on Sketch’ evolutions and that the components are stocked on their servers
- The online Style Guide is a little bit messy because components are stored in sections and not in folders (as with Zero Height, for example) so it’s less clear visually… However, there is a great search and tag systems so you can easily find the components you’re looking for.
Sketch Library
And last but not least, Sketch has (finally) launched its own shared library!
It doesn’t exactly work in the same way others do… First of all because, here, it’s a Sketch file that becomes the library:
Then, I can use all the symbols of that file in any other document:
These symbols become linked assets and, of course, every time I will change something in the library file, it will automatically change it everywhere!
Pros
- It’s not a plugin, it’s native with Sketch! That means no additional cost and no issue with the future releases of Sketch
- I can choose where I want to stock the library file (Dropbox, Drive, Cloud…) and avoid being dependent on another service subscription
- No more symbols page (and that’s quite a revolution ;): every linked symbol appears now as an external link. You can manipulate it without entering the symbol instance:
- Thanks to a clear message, I know when I’m editing the library file; it’s impossible to make a change by mistake:
- Permissions! thanks to Dropbox, I’m able to give “edit” rights to the designers and “view” rights to the others… Which allows them nevertheless to use the components and to make a lot of tests with it!
Cons
Ok I know, that feature has just been launched a couple of weeks ago so I’ll be forgiving, but I have to say that some essential things are still missing:
- I can’t insert colour nor text styles in the library… Yet they are really important elements when you create a Design System and that should be the first element we want to share! For now, I’ve handled some text styles into my symbols but it’s not the best way to deal with it:
- It’s really not easy to import a symbol… I have to pick it in the symbol menu and that’s not as quick as a drag&drop system… And there is no search bar to facilitate the work neither. Even with the Runner plugin, I don’t find it convenient.
- When something changes in the library, I only have a little message in the top right corner of my document. Too bad for such an important feature…
- And the worst bug for me: when I copy/paste an element that was linked to the library from one file to another, it looses its link and becomes a normal symbol… Nooooooo :(
→ Updated : This bug was solved since the last Sketch update ;)
Quick tips : you can use the plugin symbol replacer which works really well until they fix that bug.
So even if this new feature is really cool, there are still small things that have to be improved before being really efficient and speeding up our workflow.
Conclusion
I think you’ve got it, even if Lingo and Sketch are ahead, I haven’t found the perfect solution for sharing a design system yet… As always, it depends on what you want to do with it, what kind of project, how many members you have in your team etc…
For this article, I was focused on Sketch but I keep in mind that there are other tools like Figma that also proposes a shared library. I also keep an eye on Invision who has just acquired Brand.ai and whose new Design System Manager may completely change the game!
We are just at the very beginning of this new shared library era and I can’t wait to see all the evolutions that are about to come!
If you know other services or have some experiences with shared libraries too, don’t be shy and leave a comment!
