A Crafty way to automagically keep your design team in sync.

Thanks to our Atomic Workflow we have a solid design system in place at Nordnet. The jewel in the crown being a Sketch file that contains our UI Kit. Hundreds of design assets inside. Everything from typography guidelines and input states, to grids and colour pallets. And to top it off, it’s meticulously organised into reusable symbols and text styles. Delicious!

The challenge is making sure our designers always have the latest version of the UI Kit at their disposal. Without creating any overhead to them. This needs to be a frictionless integration into their routine, otherwise no one would use it.

Making each designer open the Sketch file to copy-paste all of those symbols just wouldn’t work. There are many reasons this isn’t an ideal solution, but primarily it would just be a massive pain in the ass.

We’d like to share a great way of solving this issue using Dropbox, Sketch, and Craft by Invision.

Sketch is the backbone of our UI Kit.

It’s no secret we’re champions of Sketch at Nordnet. The team use it for all of our design and concept work. When designing for screen, nothing else comes close to it right now.

Nested symbols are such a powerful feature of Sketch.

One of the most powerful features Sketch offers are Symbols. Re-usable assets with easy to configure variables. These can be complex sections of a complete UI — such as a website header — or as simple as a single icon.

If you aren’t familiar with Sketch or using symbols you’re missing out!

The team regularly creates or updates these symbols as we discover new requirements in Nordnet’s user interface.

Updating and maintaining this Sketch file is an article in itself, so I’ll skip explaining exactly how we do that, but it’s a collaborative process illustrated here by Can Kilicbay our lead product designer.

Craft makes distributing the UI Kit frictionless.

To say Craft is a Sketch plugin by Invision would technically be true; but a huge understatement.

It’s a suite of plugins to let you design with real data in mind. It offers useful shortcuts such as photo placeholders, dummy content, and layout shortcuts.

Best of all though is Craft’s library feature.

We are able to import our entire UI Kit into a Craft library. Which we save on Dropbox. It is then automatically distributed to every version of Sketch on our design team with Craft installed!

Everything from our UI Kit is available at the click of a button or a drag of the mouse. Font styles, UI elements, grid systems, page layouts, icons. Everything! And always automagically up to date thanks to Dropbox.

How ace is that? (very).

Dropbox keeps everyone up to date.

This automation wouldn’t be possible without Dropbox. We have a team account at Nordnet that we couldn’t live without.

The UI Kit with all it’s assets (including the Craft library) are saved here and automatically updated for everyone whenever a change is made.

Our UI Kit Sketch file living happily next to our UI Kit Craft library!

And it’s as simple as that. Any questions, pro-tips, or ideas on how we can improve this workflow please leave us a comment!

Thanks for reading,
The Nordnet Design Studio Team