Canvas

The heart of the UXPin Editor is the canvas where you build prototypes. Only elements placed on the canvas are displayed in the Preview mode.

Canvas Size

You can define the size of your canvas (10 000px limit) in the Properties panel to the right or add adaptive breakpoints to create versions for different screen resolutions.

If you don't need to have a set canvas size, you can set its parameters (height and width) to auto. That way, on Preview the canvas will end right after the last element.

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 the grid automatically).

Smart Guides and Snapping

Smart guides appear as green lines whenever you move an element on the canvas and one of its handles is lined up directly with one of the other element’s handles. It helps to arrange an element with the reference to other elements on the canvas.

Snapping helps you precisely place elements by making them snap to both to traditional and smart guides.

Showing and Hiding Smart Guides

Depending on your needs, you can show or hide all guides and enable/disable snapping in View Options.