What is a Region?

A region is an area that defines the location where the content in your step is placed on the panel.

A region can be any rectangular shape, and sit anywhere on the panel. You can also have multiple regions per step. To add more regions simply use the + ADD REGION button and enter in your measurements.

Placing your Regions

Regions are defined in pixels, so to find out where to place them make sure your design file is in this measurement.

To find out what your coordinates are find the:

  1. (x) Distance from the left edge
  2. (y) Distance from the top edge
  3. (w) Width of the area
  4. (h) Height of the area

These are the values you would see allocated to an object (e.g. text box) in Adobe Illustrator or Photoshop or any other design program. For example in Adobe Illustrator your regions would look something like this -

When in Spiff these regions would look like this (these have been rounded up) -

Completing your Regions

Regions are very powerful and require a little more than just adding your coordinates. You also need to set a layer index, add rotation (if required), and choose your panel. The layer index refers to which layer this step will be on, you can have as many layers as you like.

It's important to keep your layers structured neatly or you may not be able to see everything you've added to your panel. For exmaple:

  • Layer 0 is a color step where someone can choose the color of their background
  • Layer 1 is an upload step where someone can upload an image
  • Layer 2 is a text step

We also set a rotation from 0° to 360°.

To complete your region you need to assign it a panel. The panel you assign it to will be the one it appears on.

The last thing you can configure in regions is the immutable checkbox. This setting will make it so that the object is locked when in the advanced editor.