Learn Figma Basics, Part 3: Frame Constraints.

How constraints work:

Horizontal Constraints

  • Left maintains the object’s position, relative to the left side of the frame.
  • Right maintains the object’s position, relative to the right side of the frame.
  • Left and right maintain the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x-axis when resized.
  • Center maintains the object’s position, relative to the horizontal center of the frame.
  • Scale will define the object’s size and position as a percentage of the Frame’s dimensions. It will then maintain those proportions as you resize it.

Vertical Constraints

  • Top maintains the object’s position, relative to the top of the frame.
  • Bottom maintains the object’s position, relative to the bottom of the frame.
  • Top and bottom maintain the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y-axis when resized.
  • Center maintains the object’s position, relative to the vertical center of the frame.
  • Scale will define the object’s size and position as a percentage of the Frame’s dimensions. It will then maintain those proportions as you resize it.

Exercise file:

Before you go

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raouf Belakhdar

Raouf Belakhdar

186 Followers

Figma Landing Page’s Design Resources Colors palettes, Typography Styles and ready to use Components. https://www.captain-design.com/