Pen Tool

Shapes fill up a big part of your prototypes. Our one and only Pen tool is your go-to way when a simple rectangle just isn't enough. You can literally draw any unique, complex shape you want.

Drawing Objects

To start drawing, select the Pen icon from the left toolbar or hit "P" . You can either close your path by connecting all points or leave it open. When finished, press Enter or Esc.

Before you start drawing, there are two things to remember:

  • Filling an open shape with colors or images will have the same effect as if the path was closed.
  • To draw a straight line or keep the angles at 45° or 90°, hold Shift while drawing.

Once you place a point on the canvas, click it to activate the Bézier curve. Two handle control points will appear on both ends at an equal distance from the main point. Once you drag one of them, you’ll be able to adjust the curvature of the path.

To draw a heart with the Pen tool, you need to start with a square.

Editing

To enter the edit mode, just double-click on the element. Then, select the points and drag them to the desired position. You can use the keyboard arrows too or enter the specific position of the points in the Properties Panel.

  • If you want to move your points in x/y axes only, press Shift while dragging. To select multiple points at once, simply keep Shift pressed while you click. If you move any of them, all the selected points will change their positions.
  • If you want to add extra points, click anywhere on the existing path. You can also add a point exactly in the middle of the path by clicking with Shift pressed.
  • To remove the points, press Option and click, or hit "Delete" for actively selected points. 
  • You can change the type of the curve point from straight to Bézier by double-clicking the chosen point.
  • The Radius option in the Properties Panel allows you to adjust the corner radius of your elements. Just click on the point you want to edit. To edit multiple corners at once, just hold Shift and select the ones you wish to change.

Point Types

Each shape is created out of a series of points. By changing a type of point you’ll be able to specify how the line between the points behaves.

There are four types of points available in UXPin: straight, mirrored, asymmetric and disjointed.

Each point placed on the canvas is set as straight type by default — it allows to create straight lines or angles.

You can change the type of the curve point by choosing one of the options from the Curve section in the Properties Panel. Clicking on a point and dragging changes it into a mirrored type in case of straight point and strait point in case of all other types:

  • mirrored point creates a Bézier curve — the handles mirror each other and are placed in the same distance from the point. Once you drag one handle control point, the other will move as well to create a smooth curve.
  • For an asymmetric point, handle controls are placed at the same angle but you can put each of them at a different distance from the point.
  • disjointed point type allows to position the handles both at different angles and different distance from the point.

Stroke

To specify the stroke options, select the shape and click the cog icon in the Stroke section of the Properties Panel.

Click one of the icons at the top to change the type of path ends and joins.

Ends types:

  • Butt end — chops off the stroke at the ends;
  • Round end — extends the stroke past the ends with semicircular shape;
  • Square end — extends the stroke past the ends with square shape.

Joins types:

  • Miter join — causes the outside corner of the stroke to come to a sharp point;
  • Round join — causes the outside corner of a stroke to come to a rounded or smooth curve;
  • Bevel join — cuts off the corner so that the width of the stroke is the same at the bevel as on the rest of the stroke.

Additionally, you’ll be able to set the endpoints for the path to create different arrows.

You can also determine the start and stop point of a stroke by entering the exact percentage. As a result, the border will be added only to the limited part of the element and you’ll be able to create e.g. radial charts.

To change the path into a dashed or dotted line, enter the specific value in the Dash field. If you want the dash and gap to have the same length, type in a value, for example, 10 and both dash and gap will be 10 px long.

You can also set different lengths for each dash and gap — it’s enough to enter multiple values and separate them with a comma. The values will be assigned to dashes and gaps respectively and the pattern will be continued for the whole stroke.

For example, if you enter 30,20,10,5, the system will create a dashed line with 30 px, a gap with 20 px, a dash with 10 px, and a gap with 5 px. Then the values will repeat again.

Boolean Operations

Boolean operations allow combining any set of basic pen tool shapes to create more complex ones. The combined shapes are treated as a single layer and have shared properties. Additionally, they can be combined further with other shapes.

To combine the shapes, select them on the canvas and click Combine shapes icon from the top bar. You’ll be able to choose one of the following formulas:

  • Union — combines the selected shapes into a group that is a sum of the areas;
  • Subtract — removes the area of a shape from a bottom layer shape (opposite of Union);
  • Intersect — creates a shape that consists of the overlapping part of sublayers;
  • Difference — creates a shape that consists of the areas of sublayers which don’t overlap (opposite of Intersect).

The combined shapes are presented in the Layers panel just as regular groups so you can access all the shapes inside. For each combined shape you’ll see an icon informing which type of boolean operation has been used. However, you can always change the formula for any boolean group if needed.

Also, the individual shapes inside the group are still editable. You’ll be able to change their position, edit points and add new ones.

To break the combined shape, click Break apart from the drop-down.