Follow

Getting started with Brand.ai and Sketch

Creating a Design Library in Sketch

One of the most important aspects of creating high-fidelity mockups is to design using consistent elements. With the Brand.ai plugin for Sketch, you can manage and synchronize Sketch assets individually into a managed design system.

Here's a quick getting started video: 

 

Getting Started

Creating a design library with Brand.ai is simple and allows you to collaborate with other team members instantly. The first thing you need to do is download the Brand.ai plugin and double-click the file to install it into Sketch.

Brand.ai_-_Episode_2_-_Install_Plugin.gif

 

Then, open Sketch and launch Brand.ai from the menu bar under Plugins.


Brand.ai_-_Episode_2_-_Plugin_Panel.gif

Create an account in the Brand.ai panel and you’ll find that several example assets were automatically created for you in your new UI Library.

Brand.ai_-_Episode_2_-_Panel_Signup.gif

 

Adding Assets

You can add colors from Sketch by selecting a layer and adding it into your Brand.ai panel.

To add colors, switch to the colors tab, and click Add Colors. You can then select Document Colors or colors from selected layers.

Episode_2_-_Add_Colour.gif

 

You can add text styles and shared layer styles in a similar manner. Simply switch to the respective tab in the Brand.ai panel, and click the Add button. 

To add a symbol, group or layer into the components tab, select the layer in the document and click 'Add Layer' in the right section in the Brand.ai plugin. 


Episode_2_-_Add_Component.gif

 

If you're looking to add artboards into Brand.ai, see this article for details.

Viewing Your Design Library Online

Now that you’ve created a design library, you can easily share assets synced from Sketch on the web. An online view of your design library is available from within the Brand.ai panel in Sketch.

Episode_2_-_Web_View.gif

 

Your Design System in the Cloud

No matter how complex a group or layer is, Brand.ai will preserve the original asset in its native format. A symbol used in Sketch and then synced to another computer using Brand.ai will be an exact copy.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.