Balsamiq mockups custom controls and Page Templates

Balsamiq mockups custom controls and Page Templates working with symbols

 

Starting with version 2.0, mockups for desktop supports the concept of symbols. Other Software refers to this same feature as templates or master pages, components or widgets.

Starting from version 2.0, the mockups desktop version supports the symbol concept. Similar features are called templates, master pages, components, or widgets in other software.

In essence, symbols let you reuse common elements into SS different mockups.

Essentially, symbol allows you to reference common elements in multiple mockup files.

Here's a quick video introduction that shows the benefits of this feature.

 

Creating symbols

 

Symbols in mockups are simply named groups which have been "converted" to symbols (we'll talk more about what goes on under the hood later), but first, let's create a symbol!

In mockups, symbol is a group in the form of a simple name and converted to a symbol. We will discuss more about it later. Now, let's create a symbol first!

You may create a new group to convert to a symbol or use a group you already have. The following steps assume you are creating a new group.

You can create a new group or select a group that has already been created to convert it to symbol. The following steps start with creating a new group.

1. Select the controls you want to group
2. Group your selection (select edit-> group and group turns bluish color)
3. Name the group (I. e. login form)

1. Select the control for the group.
2. group selected controls. (Select the group command under the edit menu, and the group will be blue .)
3. Name the group. (For example, login form)

4. Save the file with the new group (file must be saved to convert a group to a symbol .)
5. Click on the 'convert to symbol' icon in the Property inspector to symbol.

4. Save the file with the new group. (Files must be saved before the group is converted to symbol .)
5. Click the convert to symbol button on the Property inspector to convert it to symbol.

You will notice that the group selection becomes a light green. This means that the selection is now an instance of a symbol.

You will notice that the group is changed to bright green. This indicates that the selected instance is a symbol instance.

You now have a symbol named 'login form' which will be displayed in the project assets Tab Of the UI library. (You can also add the symbol via quick add ).

Now you have a symbol named "login form", which is displayed in the project assets tag of the UI library. (You can also add it through quick Add .)

Under the hood cap bottom Qian Kun

 

When you hit "convert to symbol", mockups for desktop added the named group you selected to a file called symbols. bmml in a folder called "assets" right next to your bmml files.
You might want to refer to our best practices for creating projects with mockups if you haven't read it yet.

Once you click "convert to symbol", the mockups desktop edition will add the selected named group to the symbols. bmml file in the assets folder next to your bmml file. If you do not know about the assets folder, you may need to refer to best practices for creating projects with mockups (best practices for creating projects using mockups ).

The key to understanding symbols in mockups is that symbols are named groups contained inside bmml files that are stored in your projects 'Assets folder.

The key to understanding symbol is that symbol is the named group stored in the bmml file of the project assets folder.

We know the definition abve is pretty dense, but understanding it fully will help you make the most out of this awesomely powerful feature. Don't worry if it makes little sense
To you right now, we'll come back to it. Just read it one more time and move on.

We know this definition is rather obscure, but a thorough understanding of it helps you grasp this and its powerful features. If you still have no idea about symbol, don't worry. Let's go back to the front and study it again and proceed .;)

Overriding symbol properties re-define the symbol attribute

 

Once you have created a symbol, you will often want to change it a little each time you use it. Imagine for instance a symbol you created as a master page/template, containing
A web page's title and navigation.

After a symbol is created, small adjustments are often required for each use. Assume that you have created a symbol as the master page/temple, which contains the title and navigation of a webpage.

All your website pages will have the same font size and position for the title, but the title's text shocould be different on each page. Same goes for which page shocould be shown
Current in your navigation bar.

The page title of the entire website has fonts and locations of the same size, but the title text of each page is different. Similarly, the current address of a page in the navigation bar is different.

Symbols allow you to achieve this result by leader you override symbol properties each time you use a symbol. To do so, start by double-clicking (or hitting Enter, or F2) on
Symbol to "Enter it ".

Symbol allows you to redefine attributes for each use. When necessary, double-click on symbol, enter, or press the shortcut key f2 to "Enter the internal ".

Although this experience is very similar to editing a group's contents, you will notice that mockups for desktop warns you that what you're doing is really overriding SOME PROPERTIES
Of a symbol.

This is similar to editing the group content, but you will notice whether you really need to redefine the attributes of the symbol.

At this point, you can manipulate each control inside the symbols at will, as if you were editing a group. Some operations are not permitted while overriding symbol properties,
Such as adding, deleting or grouping controls.

Like editing a group, you can adjust every control in symbols at will. Operations that exceed the symbol attribute are not allowed, such as adding, deleting, or group controls.

If you make a mistake, you can always undo to get back. if you want to remove a single property change and go back to a symbol's default property, you can click on the little green
"X" icon in the Property inspector.

If an incorrect operation is performed, you can always cancel the returned result. If you only want to undo the POs. & size and restore it to the default symbol value, you can click the green "X" icon in the Property inspector (on the Right of POS. & size.

You can also revert all changes you made to a symbol's instance at once, via the "X" icon in the Property inspector you see when selecting the whole symbol.

You can use the "X" icon in the Property inspector column (the rightmost of the symbol column) to undo all operations (Pos. & size and content) at one time and restore the operation to the symbol instance.

Editing a symbol's source to edit the symbol source file

 

The main benefit of reusable symbols is that if you need to make a change, you can do it in one place and it will be propagated to all the instances (uses) of that symbol.

The main advantage of repeated use of symbol is that once you need to make adjustments, you only need to edit a place, and all the symbol instances will be updated.

To edit a symbol's source, you simply open the bmml file that contains the symbol and edit it normally, just as you wocould edit a group. save your changes, go back to a mockups that
Uses that symbol and notice that your changes have been applied, just like that!

Editing the symbol source file is like editing a group. You only need to open the bmml file, including the symbol, and then edit it. Save your update and return to mockups to use symbol. You will notice that the change has taken effect. That's all.

There are a couple of shortcuts in the app that help you reach a symbol's source in order to edit it:

The program provides two shortcuts to help you open the symbol source file for editing.

• You can select a symbol instance and hit the "Edit source" button in the Property inspector.
• You can select a symbol instance and click "Edit source" in the Property inspector ".

• You can enter a symbol for overriding, then hit the "edit" button there.
• You can enter a symbol instance and click "edit", as shown in.

Symbol Libraries

 

A symbol library is a collection of symbol definitions. You might want to create a symbol library in order to share common controls with your team, or share them with the community
Via mockups to go.

To create a symbol library, all you have to do is to create a bmml file, create some groups (one per symbol) and give each group a name.

The symbol library is a collection of symbols. You can create a symbol library sharing control for your team, or share them with the Community mockups to go.

To create a symbol library, you must create a bmml file and some groups (each of which is a symbol) with their own names.

Whenever someone saves your bmml in an asset folder, they'll be able to use the groups contained in it as symbols in any mockup of that project.

As long as a bmml file is saved to the asset folder, the group will be converted to the symbol that can be used in any mockup of this project.

One more thing... Another thing about using whole mockups as symbols ...... Use the entire mockup as the symbol

 

There's a little secret we haven't shared with you yet. Remember how symbols in mockups are simply named groups contained inside bmml files that are saved in a project's asset folder?

Well, it turns out that's not entirely true. there's one more way to create a symbol in mockups: just create a mockup with no groups in it and save it in an assets folder. mockups
Will detect this, and treat the whole mockup as a symbol, named after the mockup's file name.

We have another secret that we haven't shared with you. Do you remember this sentence? "In mockups, symbol is a simple group named and converted to the symbol form and stored in the bmml file in the assets folder of the project ."

In fact, this is not completely correct. There is also a way to create a symbol in mockups: Create a mockup without a group to the assets folder. Mockups uses the entire mockup as a symbol and the name follows the name of the mockup file.

With this in mind, the full definition of symbols becomes as follows:
Taking this into consideration, the definition of symbol is as follows:

Symbols in mockups are either named groups contained inside bmml files that are saved in a project's asset folder, or bmml files with no groups in them, saved in a project's asset
Folder.
In mockups, symbol is the group named after the bmml file is saved in the project assets folder, and the bmml file without the group in this folder.

Sharing symbols sharess projects share symbol across projects

 

What? You're still reading? You just can't get enough of symbols can you?
What? Are you still watching? Isn't the Symbol Information enough for you?

Allright, since you 've asked for it, we'll spill all the beans for you. so far we 've been talking about "project assets Folders", the directory called "assets" sitting next to your
Bmml files.

Well, since you come to the door, we have to confess completely. Now we have talked about the project resource folder multiple times. The directory named "assets" is next to your bmml file.

That's all nice and good, but what if you want to share symbols within SS all of your projects?

All works well, but what if you want to share these symbrs in all projects?

To help uber-power-users like yourself, mockups has a concept of an "account assets" folder. By default mockups looks for it in your sort ents folder, in a directory called "balsamiq
Mockups ", but you can specify where mockups shoshould look for it via the config file.

To help super users like you, mockups introduces the concept of account file resource folders. By default, mockups finds your "document" folder and places it in the "balsamiq mockups" folder. You can also specify the location through config. File.

If you put images or bmml files in a folder called "assets" inside of a folder called "balsamiq mockups" inside of your documents folder, those images and symbols will be accessible
From any of your projects, under the "account assets" folder in your UI library, Which magically shows up only if the account assets folder exists and has something in it.

If you place images or bmml files in the \ balsamiq mockups \ assets folder of your documents, these images and symbol are available in any project. As long as the account resource folder has a suitable file, it will be displayed magically in the account assts tag of the UI library.

I'm writing this smaller because it's so exciting you might faint: consider creating a shared account assets folder in Dropbox, and tell everyone on your team to point their config
Files to that folder. let that sink in for a minute. I know, wow. Wow.

I am writing with such a small word, because the next one is very exciting and may even make you faint: consider creating a shared account resource folder in Dropbox, then, tell everyone in your team to point their configuration files to this address ...... Wait. I know, wow, wow ~.

Next steps and feedback next step plan and feedback

 

At the moment, symbols only work in mockups for desktop, and you cannot nest symbols inside of other symbols. If those features are important to you, let us know!

Currently, symbol can only work in the desktop version of mockups, and supports nesting other symbrs. If these features are very important to you, please let us know.

Got any questions about symbols or any feedback on this document? Post them here!

Is there any problem with symbol or this document? Please publish it here.

Reprinted: http://www.howzhi.com/group/web-dev/discuss/731