The Property Inspector (also called the toolbox, palette, property dialog, properties window, toolbar, floating window, floating tool bar, properties box and control dialog) is the little floating rectangle that appears once you select one or more UI controls. It allows you to perform some common functions such as copying/pasting, layering, and aligning controls, as well as some control-specific customizations.
The Property Inspector is displayed when you select an object on the canvas. You can drag and drop the Property Inspector to move it, it will re-appear where you left it next time you need it. You can also make it smaller (so that only the title bar shows) by clicking the collapse icon in the upper-left corner.
If your UI Library is visible, you can set the inspector to be docked over it. The View menu shows this option.
Common Inspectors#
|
Editing Inspector
|
Always present, always at the top. From left to right: undo, redo, duplicate, cut, copy, paste, delete, group, ungroup, lock |
|
Layering and Position & Size
|
Always present, always in the second row (below the editing inspector). Layering, from left to right: bring to front, send to back, bring forward, send backward. Position and size shows you the size and position of the selection, in pixels. Clicking on the numbers lets you edit them. The format is "X,Y WxH" where X is the x position, Y is the y position (0,0 is top-left, growing right and down), W is the width and H is the height of the selection. |
|
Align
|
Shown whenever more than one control is selected. Lets you align the selected elements horizontally to the left, center and right and vertically to the top, middle and bottom. The next two icons distribute the centers of the selected items horizontally or vertically. The last two icons space out the selected items evenly horizontally or vertically. |
Other inspectors #
|
Arrow
|
Lets you decide the direction and curvature of the arrow, as well as whether to show or hide arrow pointers. |
|
Auto-Size
|
Clicking on the autosize button will resize the component to its natural size, with everything showing and no extra space |
|
Border
|
Shows or hides the border around the selected controls. |
|
Border Style
|
Lets you set the border to square or rounded corners, dashed lines, or no border. |
|
Color
|
Lets you select the foreground and/or background color of the selected controls (depending on the control type), as well as the background color's opacity (only in some controls). |
|
Crop
|
Allows you to crop an image or group so that only part of it is shown. |
|
Horizontal Curly Brace Direction
|
Lets you specify whether the horizontal curly brace should point up or down. |
|
Icon
|
The icon inspector lets you select, resize and remove an icon to the selected controls. You simply click on the search field, start typing the name of the icon you need and you'll be presented with suggestions that match your string. Use the arrow keys or your mouse to select the icon you want, then use the slider to resize it. To rotate an icon, click the icon immediately to the right of the slider. To remove an icon, click on the trash can icon to the right of the rotate icon. To see the full list of icons available, click the little triangle which will open the Icon Library. |
|
Icon Label Position
|
Lets you specify whether the label should be positioned below, to the left, or to the right of the icon |
|
Image
|
The Image inspector lets you select which image to use for the selected image controls. You can select the default placeholder, add a new image, or select from a list of images already present in the mockup. You can additionally "sketch" the image to make it look a bit more hand-drawn by selecting the "Sketch it!" checkbox. |
|
iPhone
|
Lets you set the orientation, background pattern and top bar visibility of the iPhone control. |
|
iPhone Keyboard
|
Lets you set the iPhone keyboard for portrait or landscape orientation. |
|
Links
|
Lets you link a control in one mockup to another mockup. See Linking for more info. |
|
List and DataGrid
|
Lets you specify whether the selected controls should have a header row, two colors for alternating row backgrounds, the height of the row and which row should be selected, if any. In the DataGrid control, you can additionally toggle the visibility of vertical and horizontal dividing your table's columns and rows. |
|
Menu Button Toggle
|
Adds a drop-down icon to button controls. |
|
Name
|
Shown only when two or more controls are selected. Allows you to name a group of controls to that it can be used as a Symbol. |
|
Pointy Button Style
|
Lets you show the iPhone button as pointed to the left, right, or neither. |
|
Progress Bar Type
|
Lets you toggle between a progressive and an indeterminate (candy-cane) progress bar and set the amount complete (for the progressive style). |
|
Scrollbar
|
Lets you quickly add a scrollbar to the selected controls. |
|
Selection
|
Lets you specify which elements of the selected control should be shown as selected, if any. |
|
Shape
|
Lets you specify the shape of the geometric shape control. |
|
State
|
Lets you specify the state of your control, whether it's in focus, selected, disabled, etc. Different control types support different states. |
|
Tabs Position
|
Lets you specify whether the tabs should be above or below the canvas, as well as their horizontal alignment relative to the canvas. |
|
Text Orientation
|
Lets you show text as horizontal, vertical, or angled. |
|
Text Styles
|
Lets you specify whether the font of the text in the selected controls should be bold, italic or underlined, as well as its horizontal alignment and point size. |
|
Tooltip Arrow Direction
|
Lets you specify the direction of the arrow pointing out of the tooltip control. |
|
Value
|
Lets you specify the position of the slider in the scrollbar and slider controls. |
|
Vertical Curly Brace Direction
|
Lets you specify whether the vertical curly brace should point left or right |
|
Vertical Tabs Position
|
Lets you specify whether the tabs should be to the left or right of the canvas. |
|
Window / Dialog
|
Lets you toggle window chrome controls like minimize, maximize and close, as well as a dragging affordance. You can also specify the height of the top and bottom bars. |
