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
Raouf Belakhdar

Raouf Belakhdar

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