Auto layout 5 ways

I wanted to improve my auto layout skills, so I drew inspiration from Figma's video, "Figma in 5: Auto Layout."

I went with the 'Handjet' font because it matched up well with the digital heart icon that I found when building the button. Then I decided to give the whole thing a modern space aesthetic.

I used uiGradients for inspo to make the design more visually appealing. And I used Photoshop to fine-tune the colors, making sure they meshed well with the background image.

Overall, I think the designs fit in the same universe nicely. Specifically, I love the gradient combo on the "confirm" CTA button.

But, of course, there were challenges:

  • Figuring out the differences between 'fixed,' 'hug,' and 'fill' settings.

  • Making sure all the sections of the dialog box were responsive.

I stuck with it though and overcame, so I'm pleased with the progress!

Figma file

View all tags
Posted on Mar 16, 2024

More by Steven Watkins

View profile