Working in tech is always incredibly fast paced and ever changing, and design is no different, especially if you have had experience designing in start-up environments or super agile teams. Things can change before the you have time to name your layers (and if you don’t name layers, well that’s just naughty).
Lately, I have taken an interest in some new products that allow you to create a design guideline and asset libraries for your products, that is a little more fluid and alive. Something that is easier to maintain and benefit the rest of the team. There are a few great products out there at the moment and they are getting better every day.
The set up!
I am assuming you already have Sketch installed. If you’re not at that stage yet, you might not be quite ready to be needing full fluid design guides and asset libraries. But who am I to judge, you will still need them installed!
First we will need to set up an account with Invision. You can grab a free account to start, which allows 1 active project at a time, if you just want to test things out.
Once you have signed up and logged in, create your first prototype project. This will be our living style guide and asset library.
Next we need to Install Craft Plugin.
Once that is installed, you should see some new options show up in Sketch. There are some really cool features here, which I suggest you explore, but today, I am focusing on Sync.
Sync allows you to send your design files directly to Invision from right inside Sketch, so as soon as you make updates, you can push the new files directly to your guideline.
Pressing the Sync icon will ask you to log into your Invision account. It should automatically connect and show you a drop down of your projects.
We are pretty much ready to start uploading content!
Selecting what is important for a design guideline can be pretty tricky but simply uploading all your screens could be a bit overwhelming, hard to maintain and filter through. I usually stick to the main app screens and add extra notes to specific parts if required. Another option might be to create special screens that use all the styles in one view.
In sketch, you can select whether you upload all artboards on the current page or only the currently selected artboards. I generally have a few extra concept artboards lying around which don’t need to be included so I prefer the second option.
Note: When syncing, the artboards are given a unique ID, so the same artboard is always updated in the project. This means that if you create a copy, even with the same name, it will be uploaded as a new page in your guide.
These unique IDs are also user specific, if you are sharing files, and someone else syncs the same artboard but with a different account, a new page will be created in your Invision project.
Here is where the magic happens. Head back over to Invisionapp.com and open your project. Select one of your newly uploaded pages and click </> Inspect from the bottom tool bar.
Now you will see a break down of all the items in the project. Sizes, margins, rules and even CSS code output.
But that’s not even the coolest part. Invision has also taken note of what slices you have made in your documents and made all those assets available in the project, including assets slices at multiple sizes.
Tap the assets tab to check it out.
Sharing is caring
The whole reason we spend so much time creating guideline documents to keep everyone on the same page and force consistency in our app designs.
Invision projects can easily be shared with anyone, they just need to sign up for an account.
People without accounts can still see parts of the project if you want, but cannot access the details and juicy bits.
Other cool stuff
In the assets tab on the main page of your project, you can see all your files in the project, you can add extra folders and assets here if you have other bits and pieces you want to share as well. I have created a sounds folder and animations folder so if anyone wants to grab these they are available.
Invision has a great commenting set up, allowing everyone to add notes and comments to let everyone contribute with ease.
There is also some basic work flow options allowing you to add labels to pages relating to their current state (in progress, approved, on hold etc.)
Invision even includes a simple history of the uploads. As far as I know, you cannot roll back to an earlier version, but you can review it and see comments attached at that time, which is nice.
You have probably noticed I haven’t really mentioned the prototyping features of Invision. This is because, personally, I don’t want to be maintaining hotspots as well as everything else in a project like this.
This project is just for styles and asset sharing.
But you are more than welcome to add them in as well, if you like.
It’s still early days using this work flow for my design guidelines but so far it’s been pretty great. I think one of the main things is to make sure it stays up to date, people are actually investing and using it.
Make if a source of truth for your app.
Once people start ignoring and falling back into old methods, it becomes very hard to keep it maintained while doing things the old way as well.
One other thing to note, this does not produce a style guide document which some might require as a deliverable. There are other apps like Zeplin that do this, or you can use the Library tool in the Craft Plugin to create one, but it’s not quiet as refined as Zeplin’s offering, but still pretty useable. I expect this will improve over time as well.
Zeplin.io is totally awesome, but I decided to go with Invision in this case because we already have paid accounts for it.
Zeplin creates a more classic style guide and even generates swift or Objective-c code which is really cool. Hoping to spend a little more time with it soon and compare the two workflows in the future.
Let me know your thoughts!
Thanks for reading!
UX / UI Designer – Tokyo, Japan.