Properties Panel

Overview

Properties Panel allows changing the properties of the elements. It is located on the right side of the canvas and it’s divided into sections — different properties will be displayed depending on the selected element. The panel can be also shown directly next to the selected element depending on the View Options settings.

Canvas properties
Interactions
General options
Alignment options
Resizing Constraints
Blending modes
Styling
Custom properties
Typography
Symbols
Custom CSS
Specification
Preview – Background
Preview – Shadows

Canvas properties

The canvas is the design space within which you can build your prototypes. Only elements placed on the canvas are displayed in the Preview mode.

This section is available only when no elements on the canvas are selected and lets you adjust the canvas to your needs.

You can specify the following properties:

Canvas size — changes size using pre-defined or custom dimensions (10 000px limit), to swap the dimensions, click the arrows icon;
Scrolling (vertical and horizontal) — allows scrolling to elements placed outside of the right side of the canvas and below it;
Fill — changes the color of the canvas;
Image fill — adds an image as a background for the entire canvas;
Grid — enables grid to help you layout your elements (changing any grid settings activates grid automatically).

Adaptive versions

You can add breakpoints to the prototype to create versions for different screen resolutions. First, click Add new adaptive version button in the Canvas size section. Then, specify the canvas dimensions and other settings and confirm with Add breakpoint button — the breakpoint will be added to all pages in the prototype.

Device Frames

A device frame provides better visual context for your prototype and gives it a “real-life” look.

In UXPin there is a wide range of frames for different devices presented in multiple color variants. A device frame is automatically matched with the chosen canvas size and you can select the color of the frame that suits you the most.

To make your prototype feel even more real a standard cursor is replaced with a touch cursor in the preview of touch-screen devices.

When it comes to sharing a preview link, it’s up to you to decide whether to show the device frame or hide it. This setting is available in the Share Menu of your prototype.

Interactions

While designing you can also make your elements interactive using the Interactions section at the top of the Properties Panel. Once you click the + button, the section will open and you’ll be able to specify how the interaction should work.

If an element has any interactions, instead of the + button, you’ll see an indicator with a number. Once you click it, you can start editing added interactions or create new ones.

To edit the existing interactions, choose a proper one from the list and click it – you’ll automatically enter edit mode.

General options

Once placed on the canvas, each element is assigned the size and position properties which you can further edit.

To change the size or the position of the element, you can either type in the exact value or use the arrows (pressing Shift while using arrows will increase or decrease the value by 10 pixels).

To swap the dimensions of the element, press Alt and click the arrows icon between the Width and Height fields.

Additionally, you will be able to specify the rules for changing size — in relation to which corner or edge of the element the change should occur.

To make the position of the element stick to the canvas, regardless of the scroll, click the Pin icon.

You can also rotate the elements by the exact number of degrees — it’s enough to type in the value in the Rotation field. To rotate the element manually, hover over its corner until the cursor changes into double-sided arrow. Then, grab the element and move it to the desired position.

To flip the element horizontally or vertically, click one of the Flip icons next to the Rotation input. Please note that it’s not possible to flip symbols or elements that contain symbols.

Math

You can use the math operations to change the values in all number fields such as size and position. It’s enough to select an element and use +, -, * or / to perform the calculations and adjust your object.

For radius and padding, you can set a different value for each corner or edge — just click the square icon next to the value.

Alignment options

The buttons for aligning the elements are located at the very top section of the Properties Panel. Use the left, center, right, top, middle and bottom options to align elements.

When a single layer is selected, it will be aligned to the canvas. In the case of multiple layers, they will be aligned among themselves. For example, when aligning elements to the left, everything will move to match the left-most element.

Additionally, you can move your element’s depth To front or To back from the top bar context menu — the element will be placed either in front of other elements or behind them.

Pressing Alt will change these options into Move forward or Move behind — the element will be moved forward or behind other elements.

These actions will be also mirrored on the layers panel — the layer will be placed on top or at the bottom of the list in case of To font/To back options or moved one position up or down in case of Move forward/Move behind.

Distribute

The distribute feature makes the distance between elements the same size.
To distribute your elements, select them and choose one of the Distribute options at the top of the Properties Panel:

vertically — the selected elements are spaced evenly in relation to the Y-axis (cmd/ctrl+alt+Y).
horizontally — the selected elements are spaced evenly in relation to the X-axis (cmd/crtl+alt+X).

Resizing Constraints

Constraints are available for elements placed inside groups or symbols and allow to determine specific resizing rules. UXPin automatically sets the constraints based on the position and size of the elements, but you can change the settings in the Resizing section.

There are four types of constraints:

Stretch (no constraints selected) — stretches the element proportionally.

Left/Right/Top/Bottom — pins the element to the specified side of the parent and preserves its size.

Center — keeps the element in place in relation to the center of the parent element and preserves its size.

Left&Right or Top&Bottom — stretches the element horizontally or vertically so that both sides remain pinned to the parent and the distance from the borders is preserved.

Blending modes

With blending modes, you can determine how two elements are blended into each other.

You can use one of the following effects:

Normal — no blending mode applied;

Darken — selects the darker of two colors;
Multiply — multiplies each pixel on the top layer by the pixels in the layers beneath;
Color burn — darkens the background color and increases the contrast;

Lighten — selects the lighter of two colors;
Screen — removes the black color and replaces it with a color fill;
Color dodge — lightens the background color to reflect the source color;

Overlay — combines Multiply on darker colors with Screen on lighter colors;
Soft light — applies a variant of Multiply on dark values and a variant of Screen on lighter values;
Hard light — combines Multiply on lighter colors with Screen on darker colors (opposite of Overlay);

Difference — takes the difference value between two colors (negative effect);
Exclusion — acts as Difference but similar colors result in lower contrast middle value;

Hue — applies the hue of the source layer to the luminance and saturation of the background color;
Saturation — applies the saturation of the source layer to the hue and luminance to the background color;
Color — applies the hue and saturation of the foreground to the luminance of the background;
Luminosity — applies the luminosity of the source color with the hue and saturation of the background color.

Opacity

You can adjust the opacity of the selected elements by changing the value in the opacity field or pressing the 1-9 keys on the keyboard. For example, pressing 5 will change the opacity to 50%.
Please note that if you press 0, the opacity will be changed to 100% unless the element already has 100% opacity. In such a case, it will be changed to 0%.

Styling

Depending on the type of the selected element, you can add the specific style properties and effects.

To add a property, click the add + button in the section title. Each property is added with the default settings which you’ll be able to edit freely. Additionally, if the element is already styled, the sections showing its properties will be automatically displayed, so you can review and edit them quickly.

To delete a property from the element, hover over the section and click the x button.

Fill

The majority of UXPin elements have the default fill added. To change the fill, type in the hex code or click the solid square to open the Color Picker.

Additionally, you will be able to completely remove the fill – just click the x button to make the element transparent.

Stroke

To add a stroke, click + button in the Stroke section. You’ll be able to further edit the following options:

color;
type of stroke;
size.

You can set the different stroke size for the top, right, bottom, and left edge of the element by clicking the button beside the input field.

Shadows

There are 2 types of shadows in UXPin:

shadows — cast outside the elements;
inner shadows — rendered inside the elements.

To add shadows, it’s enough to click + button in the Shadows section. Next, you’ll be able to specify color, opacity, x and y offset, blur and spread.

The x and y offset determines the distance you want the shadow to be offset from the object while blur specifies the distance from the edge of the shadow where you want any blurring to occur.

Adding a spread will increase or decrease the size of the object casting the shadow. Please note that it’s possible for Rectangle, Oval and all form elements.

To achieve more complex effects you can add multiple shadows to the elements such as Rectangles. Additionally, you’ll be able to turn the shadows on and off by checking the checkbox.

Blur

Blur allows for bringing the element out of focus. To add blur, first, click the + button. Then specify the radius to achieve the desired effect.

Please note that adding multiple shadow and blur effects may decrease the performance of the editor.

Image fill

To insert a custom image as a fill, click + icon in the Image fill section and select Upload. Once you upload an image, you’ll see its preview and you’ll be able to position the image using the buttons next to it.

You can also specify the filling rules and choose from the following settings:

Stretch – the default option, the image is stretched to fit the layer’s height and width ratio.
Fit to fill – the image fills the height and width of its box. The aspect ratio is maintained but the image is usually cropped.
Contain – increases or decreases the size of the image to fill the box while preserving its aspect-ratio.
Don’t resize – image will ignore the height and width of the bounding box and retain its original size.

Custom properties

Some elements such as checkboxes, inputs, or select lists have individual properties, different for each of them.
Depending on the element, the proper section in the properties panel will be activated where you can adjust additional settings.

You can choose from nine types of input available: Text, Password, Email, Url, Number, Tel, Date, Month and Time. Moreover, there is a default HTML validation which prevents typing unwanted symbols in the input field, for example, letters in the Number input.

Also, when you click on such input on mobile devices a corresponding keyboard will appear.

Typography

The typography section allows you to style the texts in your design — just click the + button to open it. You will be able to set the following options:

Font, its weight, and size;
Color and opacity;
Spacing for lines and characters;
Alignment;
Styles;
Unordered and ordered lists.

To add a sample text, click the Generate Lorem Ipsum button.

Symbols

To turn your elements into symbols, select the element and press Create Symbol button in the top bar.

Symbols have also a separate section with their specific settings: break, detach and clone.

Custom CSS

You can style your elements using CSS — just click the + button to open the section and type in the CSS code.

Check the list of supported properties.

Specification

You can add further context to each element using the Specification section — just click the + button and choose Add new field. You will be able to specify the type of the field: text, list or code. The added specification will be displayed in Spec Mode in Preview mode.

Preview – Background

Here you can change the preview background color and present your design in the best light.

Preview – Shadows

You can add shadows to the whole prototype canvas in the preview. Preview Shadow has the same properties as the shadow added to specific elements: color, opacity, x and y offset, blur and spread.