If you build prototypes in ProtoShare, you probably spend a lot of time in the Editor. And regardless of whether you’re working on a mission-critical project for your important client, or a personal project to share with your colleagues, finding ways to minimize the effort required to get the job done is a good thing.
Here are 10 time-saving tips to keep in mind the next time you use the Editor. Try them out. I’m sure they’ll improve your prototyping experience.
-
Opening Multiple Objects
If you’re doing a lot of work in a project, you’re most likely editing lots of designs as well as templates and masters. Fortunately, you can open multiple objects in the Editor. Each object appears as a separate tab, and you can quickly click from tab to tab to edit the desired content.
Additionally, you can choose to link the tabs to their respective object. To do so, right click any tab and select the Link Tabs menu item. A linked Editor tab automatically displays and highlights the associated design, template, or master in the Pages or Library tabs.
-
Using Keyboard Shortcuts
Keyboard shortcuts are available for many Editor actions. Some shortcuts are associated with displaying Editor features such as the Listing and the Property Inspector. Other shortcuts are associated with toolbar functions such as aligning and grouping components. There are still other shortcuts associated with actions that don’t have a corresponding interface element such as duplicating components.
Shortcuts are browser-specific and are included in the toolbar and context menus. You can also learn about shortcuts with the online help. To quickly access the relevant help page, click the Keyboard Shortcuts item in the Help menu.
-
Duplicating Components
There’s a particular keyboard shortcut that deserves its own description because its associated function is so useful. The function is duplicating components and the keyboard shortcut is Alt (Option) + click and drag. Note that you can also use Ctrl + C and Ctrl + V to copy and paste components, although this option involves an additional step.
This shortcut is particularly useful when you want to reuse components that are already configured. For example, suppose you’re prototyping a product category page for an eCommerce site. The page uses multiple instances of a product item that consists of grouped components configured a particular way. Rather than recreate this item for each instance and configure the same properties, you can just duplicate the group.
-
Selecting Multiple Components
To perform any action on a component in the Editor, you must first select it. To select a single component, you simply click it in the canvas. To select multiple components, you can use Shift + click or the rubberband feature. To use the rubber band feature, click in a region of the canvas that contains no components (or a component that’s locked) and that’s close to the components you want to select, and then drag. A gray selection region appears.
You can combine the two multiple selection options to quickly select components that are not contiguous in the canvas. Selecting multiple components is a fast way to configure the properties that are common to all components.
-
Locking Components
Locking a component fixes its position and size, and prevents the component from being selected in the canvas. A common example is locking a background image to prevent it from being selected while selecting other components placed on top.
To lock a component, select it and click Lock Position from the Layout menu or the component context menu. A locked component is indicated by an italicized name in the Component Listing, and by the red selection handles in the canvas.
-
Positioning Components
When creating a new design, one of the first challenges is positioning components in a way that’s both functional and aesthetically pleasing. To position a component, you have three options: mouse, keyboard arrows, and component properties. The option you choose depends on the granularity of the move, and to a large extent, your personal preference.To position a component with your mouse, select the component and drag. By default the component moves in five-pixel increments. To move it in one-pixel increments, press Ctrl while dragging.
To position a component using the keyboard, select the component and press any of the arrow keys. By default, the component moves in one-pixel increments. To move it in five-pixel increments, press the Ctrl key. To move it in ten-pixel increments, press the Shift key. Finally, you can use the X and Y properties in the Position + Size group to specify a position for the selected component.
-
Organizing Components with Containers
The Container component “contains” other components in a parent/child relationship. Because of this relationship, Container properties such as Visibility, X, and Y are automatically applied to its children. Also, when you use the alignment tools with a single child component, the alignment is performed relative to the Container border instead of the Canvas border. You add components to the Container by dragging them inside its borders. In the Component Listing, the added components appear as children of the parent Container.
The Container component is particularly beneficial when using states. For example, suppose you want a collection of components to appear as a pop-up when clicking a button. You have two options: you can configure the visibility for each component in the collection, or you can place the components in a Container and configure just the Container visibility.
-
Changing the Component Stack Order
Components are stacked as they are added to the Editor canvas. The default stack order is given by the order in which components are added, with the most recently added component on top. The component on top of the stack appears on top of (overlays) other components in the design. The exceptions are the navigation components, which always display drop-downs and fly-outs on top so they are not obscured. The stack order is also indicated by the Component Listing, with the most recently added component at the bottom of the list.
To change the stack order of a component, click Send Backward or Bring Forward in the Layout menu, the component context menu, or the Listing. For example, suppose you want to include a background image for an existing design. When you add the Image component, it overlays all existing components because it’s the most recent addition to the design. In this case, you want to send the component backward so the image appears in the background.
-
Testing Component Functionality
When you add components to the Editor canvas, by default you cannot interact with their functionality as you would in the Review UI or when viewing the design in a browser. Instead, you interact with components by selecting them, dragging them to a new location, configuring their properties, and so on.
To interact with component functionality in the Editor, click the Interactive Mode button in the toolbar. This mode provides an easy way to test the functionality of your components. For example, you can display navigation subpages, select radio buttons, and verify state behavior. While in interactive mode, a yellow border is displayed around the Editor canvas.
-
Correcting Mistakes
Suppose you inadvertently add components to a Container, or duplicate the wrong master, or reduce the size of an Image component to 0-by-0 pixels. You can quickly correct these mistakes by using the undo and redo features. Undo reverses an action, while redo reverses the last undo. ProtoShare stores an unlimited number of actions related to using components. However, the action history is deleted when the Editor is refreshed. The Editor is automatically refreshed when you add certain components such as any of the page navigation components, and when you add a template or a master. You can also manually refresh the Editor by clicking the Refresh button.
To undo an action, click the Undo button in the Editor toolbar. To redo an action, click the Redo button in the Editor toolbar.
