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 are temporary snap-to guides that show as green lines when you move or resize an element on the canvas with the mouse or arrows. You can resize an element with the Ctrl key and arrows.

Snapping works like a magnet. It helps you precisely place elements by making them snap either to guides as well as smart guides.

Depending on your needs, you can show or hide all guides and toggle snapping in View Settings in the bottom right corner of the Editor.