We left off in our music app with three screens that we linked together. Here I've added one more screen that I built by cloning the music tab and adding some new content. Cloning mockups is an easy way to create new mock ups without creating previous work. But what if I wanted to make a change to something that appears on multiple mockups? Let's say that I just got an email from my boss saying that we'll be adding a new section called popular and then radio is now being called stations. I now have three screens that have these tabs, so I have to go to each one and make the change.

Also, notice that the new screen I created isn't linked from the old screens, since it didn't exist when I created them. So now I also have to go and update the links in each screen. It's kind of a pain and this isn't even a big project. Fortunately, balsamiq mockups has a feature that allows you to make a change in one place, and have it update in multiple markups. It's called symbols. Let's undo some of these changes and try a more efficient method.

We'll start by grouping the tab and subtitle controls. Since those will be appearing for each new tab we create. Now that they're grouped, we'll go over to the property inspector and give them a name. Let's call it tab content area and click the Convert to symbol button. Notice that the color changes from purple to green. So now what on the surface nothing has changed, but behind the scenes balsamiq mockups now treats this group as a reusable symbol.

Let's replace the tabs in our other screen with the new symbol we just created. There's a category of the library called symbols and all of your symbols will show up there. You can also add symbols using quick add just like any other control. Now let's make some changes to our new symbol. We'll check out a new area of the application that we haven't seen yet. In the top left corner, there's a menu to navigate to some other areas of the application.

So far, we've only been looking at the mockups area, but there's also the assets and symbols areas. Let's click on symbols. We can see a symbol library called Project symbols with a symbol inside. A symbol library is a collection of symbols By default, it will be called Project symbols. You can have multiple symbol libraries, or you can put all your symbols into one. So let's edit this symbol and see what happens.

We'll change the text and add a tab. Then we'll put links on all the tabs that we've already created. Now let's go back to our mock ups. In each of our screens where that symbol appears, the changes we made have been applied. We can now edit the properties of our symbol to make the right tab selected, for example, and then we can edit the subtitles. Each time a symbol is used in a mock up it's called an instance of a symbol.

This means that when you make changes to the properties, you aren't changing the symbol, just the instance or use of it. Now let's convert the featured area to assemble since that's something that's reused across screens to now let's make a few edits. First, let's align that subtitle. Now let's talk about images. There are several ways to add an image to your project. The easiest way is to just drag and drop it from your computer into the application.

You can also do it from the property inspector. Let's say we want to add a photo to our featured artist photo. To show what kind of photos we'd like to have there. I can see the other images that I've already imported here. And I can also import one from the web or from Flickr. clicking the plus icon allows me to use one from my computer.

Let's use this one. I'll resize it a bit. It stands out a bit too much. So I'll click the sketches checkbox to tone it down a bit. Going back to my mock ups, I can see that, again, my changes to the symbol are reflected everywhere it's used. Finally, let's take a quick look at the assets area of the application.

Here I can see the images that I've imported. I can write notes about them, import a new version, or export it out of mockups by using the Save to disk option. I can also see where it's used in my project. Now I know that if I delete this image, it will disappear from those mock ups. There's a lot more to learn about symbols and assets. But we'll leave it at that for now.

You can read more in our documentation and tutorials.