Price Plans with Auto Layout - Figma Crash Course

Let's design a web Pricing Page. We'll add multiple plan options using Figma's auto-layout to organize the price, features, and CTA, and then create a list of features to make it responsive.
Duplicate the file:
www.figma.com/community/file/...
Install the Blush plugin:
www.figma.com/community/plugi...
Watch the full Auto Layout Crash Course:
• Figma's Auto Layout
Hey! If you're into what you've seen and want to explore even more, check out our 'Master Gorgeous UI Design' course. This is the last chance to get a discounted price on the course: pablostanley.gumroad.com/l/ui...

[@efehelvaci]

I've been using Figma for a year but didn't know anything about Auto Layout. Thanks for the video :)

[@johnrapiel6746]

Pablo for president

[@Joanne0728]

"Bom, you learn a new thing, my friend" you said. Thank you. :))

[@titanhedric3431]

The way he said "Friend!" cracked me up :D Like smacked that tip in your hand: "HERE YA GO! YA JUST GOT BETTER AT FIGMA BUDDY!!!" XD

[@met4ltech]

Thank you so much for the wonderful lessons. I can't stop wondering how powerful this tool is, and most importantly, it saves a lot of time.

[@zsoltbaritz2208]

I love these tuts so much! :)

[@yolandatest]

Thank you so much for these tutorials! I am working with figma for more than 2 years and just learned a lot from your lessons!

[@stanmx]

Amazing episode! I starting to use auto-layer and I don't know how I used Figma for months without this fantastic feature. I like a lot the keyboard combination in screen, I learn a new shortcuts here. Saludos.

[@Adlip_Kun]

Thank you so much

[@radulica]

Amazing!

[@michelleelfant6128]

Wishing you had classes for Figma! My company recently switched and we would ALL be interested if you offered.

[@radulica]

This is such a good design principle, as it emulates the structure of a website design. Each auto-layout is the equivalent of a div with display: flex; on it. It works great to emulate the box within a box model and i'm guessing it's also way more helpful in the handover process to the devs. Have you had any real feedback on designing like this vs. just classic positioning, for devs especially?

[@NickQuinn1986]

really good question. How reusable is the code (as Figma creates code)? Either way, it is surely going to be helpful to Dev in terms of it's behaviour.

[@nikitav]

Thanks for the video. Why do you use multiples of 8?

[@mateuszb4387]

it's a consistency in rhytm thing. Here is a great article medium.com/design-with-figma/everything-you-need-to-know-as-a-ui-designer-about-spacing-layout-grids-2bc269e12321

[@nikitav]

@@mateuszb4387 thank you so much

[@kishangadoya401]

I have one queston, What happend if we change the size of the card individually, It does not working properly for me when it comes to individual card stretching.

[@ytRap007]

noice