Learn Figma Basics, Part 4: Auto Layout.

Apply Auto Layout to a frame:

  • Select the artboard frame
  • Pick the frame tool in the toolbar.
  • Draw a frame of 60px by 60px
  • Add a fill color: #11ACDD to the new frame.
  • Click + icon beside Auto layout.
  • Select the text tool
  • Click inside the auto layout frame
  • Add the text: Sign up for free.

Auto layout properties:

1 — spacing :

  • Vertical allows you to add, remove, and reorder objects along the y-axis. example: objects within a list, or posts within a newsfeed or timeline.
  • Horizontal allows you to add, remove, and reorder objects along the x-axis. example: a row of buttons, or icons in a mobile navigation menu.

2. Padding

3. Spacing Between

4. Resizing

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