From the course: Figma: Using Auto Layout

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Solution: Image gallery

Solution: Image gallery - Figma Tutorial

From the course: Figma: Using Auto Layout

Start my 1-month free trial Buy for my team

Solution: Image gallery

“

(upbeat music) - [Instructor] Let's start by selecting four images and applying auto layout. We'll navigate to the auto layout section and click on the plus icon, but you can also use Shift + A key shortcut to apply auto layout. In our layers panel, we see an auto layout frame that consists of four rectangles. Now we are going to work with different auto layout settings. So first of all, I'm going to make sure that my layout direction is set to horizontal. I will also change the gap between these items from 44 to 20 pixels, and also to create an extra space around the images, I'm going to add extra padding, so it's going to be 30 pixels for our horizontal padding and 20 pixels for our vertical padding. Since we just expanded our auto layout container, we can also add a light background fill for a better visual appeal. So I'm going to navigate to the fill section and click on the plus icon. Here, you can choose any type of color that you like. So for example, I'm going to work with a…

Contents