This may however affect the size of the layer, making it bigger or smaller.

Top and bottom: maintains the position of the layer when you change the position of the Frame from the top and bottom.

Bottom: sets the position of the layer on the bottom frame.

Top: sets the position of the layer on the top of the frame.

There are several types of vertical constraints: The vertical constraints in Figma will allow you to define how a child element will react when the vertical dimensions of the Frame are modified. +20%, the layer will increase to 160px, also +20%. In this case the child element represents 80% of the frame. For example, let's take a 100 px frame which contains an 80 px layer.

Scale: the size and position of your child element will be readjusted in a propositional way (in percentage) to those of the Frame.

Center: maintains the position of the layer relative to the horizontal centre of the frame.

This may affect the size of the layer, however, by making it larger or smaller.

Left and right: maintains the position of the layer when you change the position of the Frame from the left and right.

When you stretch your frame to the right, the child element will follow.

Right: will set the position of your layer to the right side of the Frame.

When you stretch your frame to the left, the child element will follow. Left: will set the position of your layer on the left side of the Frame.

Here are the different horizontal constraints you can apply to child elements: Horizontal constraints will allow you to define how your layer will react when you adjust your frame horizontally.

Responsive resize figma