Style Guide for designers. The “Design, Share, & Control” workflow.

Few days ago, I read an article talking about managing Style Guides using Github. Although I think Github is a great tool for managing Living Style Guides, it is not the best solution for design teams to share their Style Guide Artifacts.

Living Style Guides:

Living Style Guides are written in HTML and ready to be used in production.

Style Guide Artifacts:

Style Guide Artifacts are the files used by design teams to communicate the overall design of elements in a Style Guide and are usually shared as a Sketchapp files.

In this article, I’m going to describe the workflow that I like to call Design, Share, & Control.

Design

In this step the designer creates their design artifact files to share with their design teams. In this example , I have created a new Sketchapp file called “Design.sketch” and included an artboard called “Buttons” which contains a few styles for buttons.

Our basic Styleguide file

It is important to share the file with other members of the team and get their feedback about the work and do the required changes.

Share

Using Dropbox (or Google Drive) we can share and control the version of our design files. For this example, I have created a folder called “Styleguide” using my Github application and saved my sketchapp file there. You can download the Dropbox app to keep a copy of your files in your computer.

This takes care of sharing the file with our team, but how can we collaborate and control changes? That is what you are going to learn next.

Control

It is time to get the team’s feedback . In order to do that Invision has a great set of tools that goes from prototype to project management.

First, create a Desktop project with the same name as the folder in Dropbox.

Creating a new project in Invision

Then, connect Invision with the Dropbox account. Click the pink plus button and select the “Sync With Dropbox” option.

In the Dropbox dialog ,choose the Sketch file for the Style Guide.

Once Invision finishes syncing ,you can see all the artboards as Screeens (in this example “Buttons”).

Buttons Screen in Invision

In this example, click on “Buttons” screen to enter into the edit mode and use the Comment Mode to leave a comment about the style of the buttons.

In order to make the changes mentioned in the comment, open the Sketch app again:

At this point the changes should be automatically updated in Invision.

Much better

Go back to Invision and resolve the issue with the buttons.

I could also mark this screen as approved. Since I solved all existing issues.

Finally, let’s verify the history of all changes made to this design.

Wow I can actually keep track of everything I did.

As you can see this approach covers most of the tasks designers need while managing their projects. I hope you find this useful.

Let’s do some work.

Take aways

1. Design artifacts with Sketch
2. Share and add version control with Dropbox
3. Control, preview, comment, and prototype with Invision