The Properties panel is where you can edit your layers and change their style properties.

You have a wide range of options and tools available to change the layer's fill, stroke, shadows and more.

Layer Opacity and Blending

You can use the numbers on your keyboard to adjust opacity. Number "2" gives you 20%, "5" gives you 50%, and "0" gives you 100%. If it’s already 100%, then it will change to 0% opacity.

To change the blend mode of an individual layer, click the Blending dropdown in the Layer section to the right and choose one of the available blend modes.

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 to 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.


The Typography section in the Properties panel has a number of options available to edit the text.

That's where you can change the font, size, color and the opacity of your text. You can bold, italicize or underline it. There's also the possibility to generate lorem ipsum.

Further, you can change it's alignment, spacing, convert it into a bulleted, numbered or unordered list.

Resizing Text

To resize a text element, you have to change the size manually by editing the text size value in the Properties panel. Resizing it on the canvas will not change it.

Local Fonts

In Typography section in the fonts drop-down you can access local fonts which are installed on your computer.

However, please keep in mind that you cannot add and remove fonts in the Fonts Management (Manage fonts link). It’s also impossible to add or remove the style of a local font.

Also, the UXPin desktop app has access to all local fonts on your computer, but the web version works a little bit different. The web version lists only local fonts common for most operating systems because it doesn’t have access to the local fonts on your computer. You can preview prototypes and edit the text with your installed local font online, but you won’t be able to set that font on a different text element.

Sharing preview

If you want to share a preview of your prototype with someone, make sure they have the font you used inside the editor on their computer. In this case, you have 2 options:

Upload the font file via custom font upload (in WOFF format)

Send the font file to the recipient of the preview link and make sure they install it.

Thanks to that, the design is going to render correctly and they will see things as you’ve designed them. In case the recipient doesn’t have it installed, we will replace the font with Arial and inform them about it. But if the local font is available in Google fonts, it will display properly.


Since exporting your designs to PNG and PDF takes place on the UXPin servers, they don’t have access to your local fonts. It means that the prototypes with local fonts will use Arial instead. In case of missing local fonts during an HTML export, these fonts will also be replaced with Arial.


All color tools are in the Fill section in the Properties Panel. The Fill menu will only be shown when a relevant layer or element is selected.

Solid colors will have their HEX codes displayed. If you used a gradient on your design, the Fill section will display Gradient in the Fill section.

To change the color, click the Fill color square to open the Color picker.

Color Picker

You can change, view, and sample colors in the Color Picker. It shows the current color of a selected element - indicated by a white circle on the Hue, Saturation, Brightness (HSB) color model, and it's surrounded by related shades. Drag the circle around to get your desired color. To change the hue, or tone, click-and-drag the slider below the picker. Use the slider below to adjust opacity.

At the top of, you see the currently picked color's HEX code, next to it the heart icon adds the color to your favorites. And to its right, you have the eye dropper tool (Mac).

At the bottom you will see five icons. Starting from the left:

  • Favorite colors
  • Design library colors
  • HSB color model
  • Last used colors, solid colors, and gradients
  • Color schemes


To apply a gradient fill to a layer, check the Gradient checkbox under the HSB color model. A Gradient bar will show up where you can click to add new points, select any of the points and drag to move them. Right under it you can choose the gradient type, Radial or Linear.


To add a stroke, click the + 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.


There are 2 types of shadows in UXPin, Shadows which cast outside the element and Inner shadows which are 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.


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.


Adding multiple shadow and blur effects may decrease the performance of the editor.

Image Fill

To insert a custom image as fill, click the + 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 CSS

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