Elements

In UXPin, the most frequently used elements which you probably use each time you design are:

  • The Quick tools in Toolbar to the left side of the Editor or
  • The Basic Elements library which you can access from the More elements menu (three dot icon).

The Quicks tools are Rectangle, Oval, Line, Path (Pen tool), Text, Image, Icon, and Hotspot.

To speed up your workflow, you can search for elements with the search shortcut Cmd "F" .

Customizing Elements and Shapes

You can customize your elements in the Properties panel to the right side of the Editor with extra options, such as borders, padding, and radius.

Borders can be solid, dotted or dashed. If you need to round up the corners of your elements, including Pen Tool shapes, you can set the corner radius in the Radius input.

The Shapes element from the Basic Elements library can be customized in the Properties panel — browse from additional parallelograms, stars, and variations of triangles to quickly get what you need.

Tip

Use Arrows either to point something out or indicate a movement. This basic element has a few extra options like customizable endpoints (you can have a single or double arrow), size, or rotation.

Text

To create text objects, select the Text icon or hit "T" . Then you can either:

  • Click on the canvas to create a text element 
  • Click and drag to create a text element with specific dimensions

In the Properties panel you can edit the properties of text elements, such as its font, size or line height.

Images

You can add an image to your design in a few ways:

  • Drag and drop images from your desktop right into the prototype
  • Select Image from the left-side menu and locate the image on your computer
  • Use the copy paste shortcut
  • Use the the "I" keyboard shortcut

Once uploaded, you can edit your image in the Image section of the Properties panel. That's where you can crop it or adjust its brightness, contrast, saturation, vibrance, and sharpness.

Icons

The next element from the Quick tools bar is the Icon. Click on the Icon image (flower) to add an icon to your design. Then, at the bottom of the Properties panel you will see the Icon section where you can browse through different icon libraries.

Hotspot

With hotspots you can add an interaction on top of any element. This is especially useful when you want to make only parts of layers clickable. These can be JPGs that include text or a logotype which should link to another page. This way you don't have to add interactions to specific elements.

Creating and using hotspots

You can add a hotspot from the left-side menu or by using the shortcut "H" and drawing the shape on the canvas. Hotspots are transparent boxes which you can place anywhere on your design and add interactions to. One of the most frequent usages of hotspots is linking to another screen of your design. In addition to linking between pages, you can also link to external URLs or trigger animations.

Built-in Libraries

UXPin libraries are built-in, ready to use iOS, Material Design, and User Flows libraries with interactive elements, colors, text styles, and icons. You will find them at the bottom of Design System Libraries.