Properties Inspector

Every UI component you use in your project has some general and special properties you can customize.

 


Screen_Shot_2017-05-30_at_10.44.33_AM.png
Screenshot of Inspector - showing image properties



PROPERTIES

The component’s position is specified by (X, Y) coordinates (in pixels), (0, 0) being the top left corner pixel of your project’s screen.

You can rotate the component clockwise by a number of degrees. You can also place your mouse pointer over the icon and drag it left or right to decrease/increase the value.

The component’s size is specified by Width (W) and Height (H) in pixels. You can lock the particular ratio so that it’s kept even when you change its size.

If you click on the ‘Locked’ attribute, your component will not be editable. You will have to unlock it through the corresponding toggle in the Layers list.

Opacity is set by dragging a handle from 0: invisible to 1: fully visible.

You can also hide a component entirely by clicking on the ‘Visible’ attribute.

You can change the component’s background color, border thickness, style, and color.

You can also customize the text label inside your component in terms of typeface, size, color and alignment.

In images, you have the option to Mask/Crop.

Depending on the type of component you are customizing, you might have more or fewer properties or even no properties at all. For example, you will see these additional properties for Shape.

Screen_Shot_2017-05-30_at_10.50.19_AM.png 

Screen_Shot_2017-05-30_at_10.50.32_AM.png

FILTERS & ADJUSTMENTS


Saturation, brightness and contrast are on a scale 0-6.


Grayscale, Sepia and Invert are on a scale 0-1.


Hue is on a scale 0-360.


Blur is on a scale 0-20.


You can choose for your component to have a drop shadow, with a particular color and placed at a particular position relative to your component. You can also choose to blur the shadow.

properties-inspector-05.png 

Draggable

‘Draggable’ is a special attribute that lets you create an interaction based on dragging the particular UI component.

You have to check this option in order to see the Drag events, under Triggers in the Interaction tab.

 

Dynamic Properties

Some components like toolbars, tab bars and lists may also have dynamic properties. These can be added to define certain characteristics and properties of complex items like lists and tab bars. You can add any number of individual items and configure their properties. Each item can be duplicated or deleted.

Note

The 'Auto' setting and Margin-based positioning are discontinued. Old projects that use these will appear fine in Player and all corresponding Snapshot Share links will show the prototype as they did. However, once the UI item(s) affected are moved/resized in the Proto.io Editor, then the owner/designer should take care so as to make sure that the desired behavior is preserved.  

Have more questions? Submit a request