The Size panel can be used to specify the width and height of your selected element.

<aside> 💡 You can also (re)size elements by dragging the Resizer handlers on the Artboard. Read more

</aside>

Defining minimum and maximum sizes

In contrary to traditional design tools, Handoff also supports relative sizing units. Because of this, you can also set a min- and max- value. This allows you to specify a certain size, but also specify that it should not exceed a specific size.

Example: You have a Hero section that you think looks nice when its height is 80% of the screen's height. However, you realise when a user would see your design on a 32-inch monitor, there would be way too much whitespace.

As a solution to this, you set the max height to 1050px, to make sure that even on a 32-inch monitor things will look properly.

Available units

You can use various units for sizing in Handoff. These properties are supported:

• px
• em (relative to the parent's font size)
• rem (relative to the screen's font size)
• % (relative to the parent's size)
• vw (relative to the screen width)
• vh (relative to the screen height)

When you select another unit, Handoff will try to re-calculate the size so it matches the new unit.

Mask

Masking elements is probably something that you recognise from traditional design tools. In Handoff, the Mask property allows you to control how elements inside your selected element should behave when they don't fit. There's three options: