From the course: Figma: Using Auto Layout

Unlock the full course today

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

Solution: Design a recipe card with auto layout

Solution: Design a recipe card with auto layout - Figma Tutorial

From the course: Figma: Using Auto Layout

Solution: Design a recipe card with auto layout

(upbeat music) - [Instructor] Let's design a recipe card with auto layout together. First, we'll start by creating a rectangle. So in the upper menu bar, we are going to select a rectangle, and draw it right here in our frame. Let's also navigate to the right side panel and change the dimensions where the width is going to be 200 pixels and the height is going to be 115 pixels. Also, I will quickly change the border radius of my rectangle to the value of 10 pixels. Next, we are going to add an image right here so we can have a very nice recipe card. So let's navigate to the fill section and click on this gray rectangle. And right here, you have four options. So by default, you have a solid option, but we are going to change to an image. Here, let's quickly click on choose image. And here in my folder, I have an image of an apple pie. So you can use exactly the same image from the exercise file or use any other image that you have for this project. So I'm going to click and open. And…

Contents