Published on | Prototyping: From UX to Front End — Medium Jeff Harris

Breaking up a monolithic folder of symbols and styles can save major time and headaches

Falling in Love with InVision Craft Library

Our design team is facing that sort of looming deadline that means larger and larger sprints of work. Naturally, this gives us the Quality Assurance heeby jeebies.

Our current project is a massive enterprise endeavor with multiple agencies working together for our client. Inconsistencies are inevitable between our designs. But, it doesn’t mean we resign ourselves to a substandard product. Like any pro, we don’t want to pull long nights copy-pasting components between Sketch files, only to hand off files full of “group 3 copy/group 2 copy/rect 3” garbage and face a withering review the next day.

This is why there is such a (rightful) push for Design Language Systems (see also Living Style Guide, Design Resource Guide, etc.).

If we can spend less time remaking or hunting through files for components, and more time thinking about the best way those elements can deliver value to the user, then the better our work will be.

So, our team decided to spend some extra hours converting the pre-existing, static style guide to a sustainable design system with InVision’s Craft Library.

If you’re reluctant to try Craft Library, I highly recommend taking it for a walk. In a nutshell, it enables sharing and syncing of Symbols between Sketch files.

Literal design team superpowers.

Craft Library generates a basic folder structure that can be shared over your usual cloud suspects. This gives you a bit of version control, remote access, etc. The syncing features allow you to push and pull changes, so you can decentralize the development of your components and patterns. Alternatively, your team might create a master Sketch file that ONLY pushes changes, with the shared understanding that every other file will only pull changes.

Our team is small and nimble, so we decentralized everything. The best part is nothing about your Library process is set in stone, and you can quickly change on the fly.

Breaking Up Craft Library (In a Good Way…)

Craft Library worked flawlessly… until we reached ~100 symbols. Then, any effort to push changes would take at least five minutes of nail-biting-beach-ballin’. Computers had to be restarted. Project Managers started wringing hands. Regret tinged our feels.

Cloud storage might have been at fault. Office wifi might have been at fault. Those are elements beyond our control.

What we did own was the Library structure. So, we decided to pause everything for 30 minutes and split things up.

Here’s how to break up a monolithic Craft Library:

Duplicate your current Library. Tuck the original in a safe space. Give it a blanket and a bottle of water and promise it that you’ll be back. Deep in your heart, though, you know you’ll never return. Take the duplicate library and put it somewhere far from the original so you don’t screw up.
Episode II-style, duplicate the Duplicate library. You should now have three clones of the same library — The original (1) tucked away safe in a cave, untouched. A duplicate (2) of that original monolithic library, which we’ll be making copies of. And finally, another duplicate (3) that we’re about to rename and trim down.
Go into the last duplicate library folder (3), and open the top-level metadata.json file in your favorite text editor.
Down at the bottom of the file, you’ll see a line with ‘name’: ‘my_library’ or something similar. Here’s where you need to change the name so Sketch will recognize this as a new Library. I’d also change the name of the .library folder to match. Keep the .library extension, though! You’ll probably want to rename it to the first Category or group of symbols that you’ll be keeping.
Go into Sketch. Open Craft Library. Remove your current monolithic Library, if you can. You might need to add your newly renamed copy (3) first. In either case, add the renamed Library and then delete all the categories you don’t need.
Optionally, you can now move that trimmed up Library to a “done” folder or the like so you don’t get confused. It helped me.

Renaming Craft Libraries is too easy.

Repeat steps 2–6 above, making a copy from your original duplicate (2), renaming them to whatever your group you’re paring down to, and then bringing it into Sketch and deleting categories.

When you’re done, just keep them all in a simple parent folder and put them up on your team’s shared drive. Everyone will need to re-import the libraries as needed, but then it’s done.

Why do it this way? If I make changes to our “Tablet/Buttons” assets, I don’t want to have to wait five to ten minutes while it updates the entire library. Likewise, I don’t want to nearly crash my file when I save, just because I need to pull someone’s changes on elements that file isn’t even using.

By segmenting our libraries, pushing/pulling is only a matter of seconds. We’re decentralized and compartmentalized for efficiency. To continue guaranteeing the same consistency we’re trying to achieve with Library, we have to do two things:

Take the time to pull all relevant changes before we say a design is ready for review, handoff, etc.
Communicate. Just tell each other when a change or update has been made, when changes should be pulled. It’s weird, I know, but teams can and should talk to each other.

Let me know how this technique works for you. So far, our team is working even faster with fewer syncing errors!

How to Compartmentalize Your Team’s Craft Library in Sketch was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Compartmentalize Your Team’s Craft Library in Sketch

Cool stuff, every week

More Articles