- Balsamiq Wireframes for Google Drive Overview
- Installing Balsamiq Wireframes for Google Drive
- Balsamiq Wireframes Integration With G Suite Apps
- Working with Files in Google Drive
- Editor Overview
- Adding and Arranging UI Controls
- Editing UI Controls
- Sharing and Reviewing
- Collaborative Editing
- Using Images, Assets, and Icons
- Linking Wireframes Together
- Full Screen Presentation Mode
- Keeping Projects Clean and Organized
- Organize Wireframes and Use a Hierarchy
- Select the Unused Images/Assets
- Optimize Existing Images (For Older Projects)
- Clean Up the Symbols
- Empty the Trash
- Extra Step: Split Your Project Into Smaller Ones
- Keyboard Shortcuts
- Troubleshooting 'ReferenceError: gapi is not defined' Error
- Troubleshooting 'Maximum Number of Pinned Revisions Exceeded' Error
- Troubleshooting 'Sorry, sharing is unavailable at this time. Please try again later' Error
Keeping Projects Clean and Organized
Projects can become packed with many elements, and sometimes it's good to take a moment to do some house keeping. Cleaning up your project will make it easier to navigate, smaller in size, and thus much faster!
Let's look at few different ways to optimize a project.
Organize Wireframes and Use a Hierarchy
The Navigator Panel lists all the wireframes that belong to your project in a chronological order.
You can reorder them as you wish (by dragging them up and down) and it also offers a hierarchical structure to better organize your wireframes, allowing you to create a parent/child relationship between them.
To use it, select the wireframe you wish to be the child and press the TAB key. The child wireframe will be placed in a tree hierarchy below the wireframe above it.
You can then use the arrows to the left of the parent wireframe to show and hide the wireframes under it.
To restore it to the top level, press SHIFT+TAB.
Select the Unused Images/Assets
Using Assets can be really useful when creating your wireframes but since we spend most of the time in the Wireframes view, Assets can easily become cluttered with unnecessary elements.
With that in mind, we created an option that allows you to select all images that are not used in your wireframes. The option is available in the Edit menu, as shown below:
Selecting it will open the Assets view where all the unused images will be selected for you. You can then move all the items to the Trash from the dedicated toast message or the context menu.
Note: Moving Assets to the Trash does not remove them from the project. You'll need to use the "Empty Trash" option to delete those items permanently.
Optimize Existing Images (For Older Projects)
When you import an image file to a project, our tool automatically optimizes it to ensure good performance by:
- resizing it to a maximum size of 2 MegaPixels
- downscaling retina/HiDpi images to 1x size
- converting PNG images to JPEG when possible
However, these optimizations are not applied to existing images in a project.
Since we released this feature in February 2020, a simple trick to optimize all the images of an older project is to import the project into a new, empty project. The option is available from the Project menu (or File menu on our Desktop product).
This way, all the images will be processed and optimized.
Clean Up the Symbols
Symbols are another great feature that let you create reusable common elements that you can use across different wireframes. Let's look at the best way to keep them "clean".
When an individual Symbol is selected, the lower portion of the right panel shows which wireframes (if any) the Symbol is used in. This is a good indication for deleting Symbols that aren’t being used.
You can use the context menu to delete Symbols and Symbol Libraries from your project.
Deleting Symbol Libraries will move them to the Trash, where you can delete them permanently or restore them. You can also empty the trash directly from the dedicated toast message.
Deleting an individual Symbol from a Symbol Library, however, deletes it permanently.
Tip: You can hold down SHIFT or CTRL/CMD to select multiple Symbols and delete multiple Symbols at once.
Empty the Trash
Moving items to the Trash does not remove them from the project. Using the "Empty Trash" option is the only way to delete those items permanently.
Extra Step: Split Your Project Into Smaller Ones
We usually recommend keeping a project under 100 wireframes to avoid performance issues. In some cases, splitting a project into smaller ones is a nice and easy way to help with slowness issues.
Here are two quick methods to split your project's data:
Duplicate the project and delete the unwanted data from the original project (A), and then the newly created one (B).
Create a new (empty) project. Select all the wireframes you want to move from the Navigator of project A. Copy the wireframes (CTRL/CMD+C) and paste them (CTRL/CMD+V) in the newly created project (B). Finally, remove the wireframes from project A.
We hope that these tips will be useful to improve your project's organization and help with any performance issues you may hit.
However, don't hesitate to reach out and share any related BMPR file with us via email@example.com if needed. We're here to help! :)
- Keyboard Shortcuts