Getting started with Brand.ai and Sketch


In this episode, we’ll demonstrate how to create a UI library using the Brand.ai Sketch plugin. Let’s take a look. In Sketch, I’ve already created my landing page and I’ve decided how the look and feel of my website should be. I’d like to create a UI library so I can easily reuse the elements of my design in other files. I’ve already identified assets that will be likely used in other pages in the site. I want to hand it off to Joe who’s on my team. Joe will need components of my design to create an FAQ page. With Brand.ai, I can easily share individual assets from Sketch so that Joe can reuse my components instantly. I’ll sign up for an account using the Brand.ai panel in Sketch. After providing my name, I can see that a new UI library has already been created for me with some example files. I’ll delete these and put my own Sketch assets. Now, the first thing I do is select the colour I want to use use in my button. I’ve already added it as my document colour here. In the Brand.ai panel I can choose the colour I want saved to my design library. I’ll double-click the tile title and give it a name. Now, I’ll add my text styles from Sketch into Brand.ai. I’ve already created them in my Sketch document so all I need is to select all of my text styles in the Brand.ai panel and press Add Type Styles. In my buttons, I’ve created some shared styles so that I can reuse the fill and shadow properties that I added to this rectangle. I’ll go back to the Brand.ai panel, select all, and click “Add Shared Styles”. I’ll also add the phone as a component by selecting it in Sketch and clicking “Add Layers” in the Brand.ai panel. The phone is made up of shapes and Brand.ai will preserve the original asset no matter its format. Joe will receive the same Phone folder I had in Sketch when he uses Brand.ai to reuse my asset. Now, I’ll select multiple symbols to add into the components tab. Because Brand.ai preserves the symbol from my Sketch document, Joe will be able to add them into his document and use features such as overrides and nested symbols. Later when Joe needs to create a button, he can select from Sketch overrides the nested symbols that I’ve already provided for him. What’s more, if I click here, I can see a that a web view of this library was created for me automatically! We can easily share and review the library with others by using the web view. We’ll talk more about this and other capabilities in upcoming tutorials. Creating a design library to collaborate and bring consistent styling across Sketch documents has now never been easier using the Brand.ai plugin in Sketch.

Leave a Reply

Your email address will not be published. Required fields are marked *