Version-Controlled Design Collaboration Workflow in Sketch

You’ve been there before. You open up a folder with final.sketch, final2017.sketch, FINAL-approved.sketch, and you have no idea which is actually the final design.

Kyle has been working from final2017.sketch for weeks but Nancy insists that FINAL-approved.sketch has all of the latest UI elements in it.

You call a meeting and say “Hey, we need to fix this. From now on, all files need to be labeled with the date they were last modified, and we all need to be uploading our files to the cloud at the end of each day!” But two weeks go by and everyone resorts back to their old habits.

We’ve been there too. Using files and cloud storage as the backbone of our collaborative design workflow wasn’t working. The problem goes beyond poorly organized files, of course.

• Having multiple team members update a single file results in sync conflicts.
• It’s difficult to maintain a single thread of discussion around a design as files change hands.
• The rationale behind changes is lost across file versions.
• Rolling back changes is difficult. Either a pre-change state is not captured at all, or retrieving an earlier version of the design requires a slow process of sifting through files and their content.

So, we built Brand.ai Artboards to offer a better way to organize and share your designs and the conversations around them. It’s now in public Beta, and we’d love to hear your thoughts.

Version Controlled Design Collaboration Workflow

We internally referred to Brand.ai Artboards as GitHub for designers. It enables designers to collaborate on designs in Sketch, keep a version history for each artboard, comment on designs and gather feedback from team members throughout the design process.

Here’s How it Works

Download and install the Brand.ai Sketch plugin.

Uploading an Artboard

Select one or more artboards and click “Upload Selected Artboard”.

When you upload a new design to the Brand.ai cloud, it will appear in the Artboards section of the plugin, and become instantly available for your teammates to work with right from Sketch.

Drag & drop an artboard to any page, or click “Add Page to Document” to add all artboards to your document.

To continue working on an artboard you’ve previously uploaded, you or any team member can simply drag & drop the artboard into a document.

Alternatively, click “Add Page to Document” and a new page with all the artboards will be added to your Sketch document.

No more hunting for files!

Creating a New Version of an Artboard

When you’re ready to upload a new version of an artboard, simply upload the artboard again by clicking “Upload Selected Artboard” on the relevant page. Brand.ai will identify that a previous version is available, and will create a new version for it. You’ll see a dialog that lets you describe what changed from the previous version, and why.

Viewing Version History

Click the artboard in Brand.ai to see its version history.

No final-final file extension needed. Versions are numbered automatically, for easy reference.

You can add any version to your document. To do so, select the version, and drag the drop the artboard image to the document . This allows you to roll back changes, or reuse elements from previous designs without having to re-create them.

Sharing and Discussing Designs

To share designs and gather feedback, click “Share and Discuss”. You’ll see an online view of your design, where team members can annotate your design and leave comments.

Keeping your conversations next to your design ensures feedback doesn’t fall through the cracks.

Comments appear in real-time, so you can use this view for easy reference while talking with a remote collaborator.

Brand.ai is built for teams. Any designer on your team can access your team’s artboards, and join the discussion. You can manage your team from the Team page in your online dashboard.

Click “Add Team Member” in the plugin’s dropdown menu for a quick visit to your online Team management page.

What’s Next

We’ve built the Brand.ai web platform to help teams manage and use a design system. We’re thinking of artboards as the expression of your design system. Artboards you upload to Brand.ai stay connected to your design system — they’re not rasterized images, but a collection of styles, components, and the hierarchical and spatial relationships between these elements.

In upcoming releases and articles we’ll demonstrate how this connectivity between your system and artboards helps your team maintain a consistent, cohesive design across complex projects.