Creating a symbol

To create a symbol, there are just a few steps to take, a few new tools to learn, and a few important things to remember. So, let's dive right in by turning one of the elements already in your wireframe project into a symbol. Perform the following steps for doing so:

  1. If it's not already open, select project_mockup_1.bmml from the balsamiq_project_files folder and open it.
  2. Select all the elements in the header area by clicking-and-dragging the mouse around the entire section, as shown in the following screenshot:
    Creating a symbol

    You can also select by pressing Shift while clicking on each piece of the header.

  3. Once everything is selected, turn the header into a group, by pressing Command + G/Ctrl + G.
  4. The Property Inspector will appear, indicating that it is now a Group, as shown in the following screenshot:
    Creating a symbol
  5. Give your new group a name by typing it into the Name textbox in the Property Inspector. For example, you can name it wireframe_header, as shown in the following screenshot:
    Creating a symbol
  6. When you type in the Name field, notice that the button next to it changes from Name this group first to Convert To Symbol.
  7. When you are done typing, click on the Convert To Symbol button. Once clicked, your grouping will turn green, indicating that it is now a symbol.

    Note

    By changing this group into a symbol, you have modified the page. In other words, remember to save your work.

Location of the saved symbols

Now that you have created your first symbol, you might be wondering where did Balsamiq put it? Luckily, Balsamiq puts your symbols in a unique and easy-to-find place where you have easy access to them anytime.

To find it, select the Project Assets button from the UI Library. Project Assets is where Balsamiq stores all of your symbols, as shown in the following screenshot:

Location of the saved symbols

You should now see the newly created wireframe_header symbol in the project assets bar, as shown in the following screenshot:

Location of the saved symbols

Symbols.bmml

While Balsamiq makes finding your symbols easy using the UI Library, there is one other place where symbols are kept.

Perform the following steps to find it:

  1. Open the balsamiq_project_files folder.
  2. Once inside, open the assets folder.

There you will find a file called symbols.bmml. Open this file to find the symbol you have just created.

Symbols as a master page

To understand symbols better, think of symbols.bmml as a "master page". For those not familiar with the term, a master page is an individual page where common elements, such as a header, footer, navigation, and so on—that is, things that are shared across multiple pages in your project—can be placed. Make a change to the master page and those changes will cascade throughout your entire project, saving you from having to make those same changes page by page.

We will do an exercise later so that you can see this in action.

Note

For the record, Balsamiq does not refer to this view as a "master page". I am calling it that to give you a clearer vision of what this page essentially is.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.74.231