Contact List made Auto Layout - Figma Crash Course

In this lesson, we'll create a contact list.
We'll solve what happens when the text grows into two lines, and how can it adapt to different screens with auto-layout.
This is part of a crash course on Figma's auto layout.
Duplicate the File:
www.figma.com/community/file/...
Download the Blush Plugin: www.figma.com/community/plugi...
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...

[@mateuszb4387]

I don't even know what is more excellent, the feature itself or your demos and explanation

[@shriyashekhar4454]

Exactly the content I was looking for while doing my UI!

[@minibuilds1497]

Thank you Pablo, these videos and the snack series are GOLD.

[@vikasshetty9380]

This is by far the best and most fun playlist, Pablo.

[@rida6093]

Thank you so much. Found this video really helpful. Was struggling with understanding auto layout before I watched this.

[@user-di6jn7mg8f]

omg this is exactly what i was looking for! i had so much trouble with auto layout the entire day and you made my life so much better thank you so much :)

[@deveshp9998]

Now that's all we need to know about auto layout. Excellent tutorial, thanks!

[@seans5710]

Great tutorial. Concise and all useful info, no fluff. Subscribed. Thanks for posting!

[@afnovakful]

Thank you!! You explained exactly what I was having trouble with better than Figma's own tutorials! 💜

[@ericad7681]

Excellent tutorial, this really helped me understand that you need to set both the frame and the text to fill container. I can't tell you how much this answered my questions. Thank you!

[@oluwatobiafolabi2344]

THANK YOU FOR THESE VIDEOS!! i had no idea that auto-layout can be used for such cool stuff

[@diegohnz]

Congrats, you really have an outstanding way of teaching and making it easy to learn. Thank you!

[@uniqueux]

I'm excited. I'm getting the blush plugin too. Nice tutorial!

[@michellezhu1559]

Too good to be true. I mean I am starting to use auto-layout properly and got confused about "hug content' and fill container" and your way of explanation is dope!

[@GraveRave]

These lessons are awesome, glad I subscribed!

[@cathysquires3722]

Great videos using real world examples. Thanks so much!

[@BappyGolder]

Pablo you are a legend. Thank you for sharing the lesson here!

[@Underhills]

Thanks. Your tutorials are superior. I'll tell you why. You have the ability not to let anything out, every single step is crucial cause if even the slightest thing is left out its sure to cause havoc a couple of minutes later for the audience. I see that happen so many times in tutorials I'm trying to follow, the person speaking isn't showing everything or including every information and then suddenly it's guesswork. I also like that you are taking small breaks to demonstrate what's accomplished so far by using the design - and then further advance to the next step. This what's making your tutorials work, so keep on doing it right!

[@Mr_Sin99]

wow, one of the best autolayout tutorials on youtube

[@petermckinnon386]

Brilliant video & explanation of auto layout pal.

[@batatatasfritas]

Again, absolutely brilliant tutorial

[@GrahamYoung05]

This is the best explanation of auto layout I’ve seen. Thanks Pablo!

[@chvrleshd]

I concur!

[@zsvoyage]

Thank you so much for the video, I found it very helpful to learn the tips through the example you are showcasing.

[@milowska_agata]

That was awesome! Thank you Pablo! 🥳

[@Marsisredandhot]

Thank you so much for this

[@ruslankuyan2326]

Thanks for your experience 🙌

[@subramaniankalyan3739]

Beautifully explained and shown :)

[@tobiasstrollo]

Omg wow - really really good tutorial - thank you!

[@monika7684]

You explain everything so well! God Speed You, Man!

[@firthousali5505]

Superb Nice, Really I need much more videos for each component on Figma.

[@david.415]

Great tutorial as always Pablo! :) One of the text properties that I didn't see you set, which was needed for the rows to auto adjust in height based on the component width and/or content length is setting the text boxes to "Auto Height". The default settings for text boxes are "Auto Width" and "Fixed Size" depending on if you just click and type or click, drag (create fix text box size), and type. Thank you for all the awesome tutorials!

[@honeymehta9395]

Hi D T, this comment was so helpful. I thought something was wrong with my file and I started pulling my hair. Though this comment helped me understand there was an issue, I still could not solve it. If the same thing happens to anyone else, you can duplicate the file in the description and copy the same text settings. Hope it helps :)

[@nicolasmarrone8568]

Great videotutorial men! Thank you so much!

[@PixelNP]

just what i needed.. thank you

[@quangkhuedinhdo]

The video is very helpful. Thank you!

[@Adlip_Kun]

Thank you so much for this

[@ArtiomNeganov]

I liked this video very much. Thanks man!

[@isabellas5765]

this is so helpful! thank you so much!

[@hamzahali1985]

Wow this is amazing 🤩

[@RizaHariati]

So cool! I love blush btw

[@roshniambastha6576]

So helpful :D Thank you

[@shinthantaung9589]

Thank you so much sir!

[@heyamjoe]

By far, thanks a lot.

[@victoriaoviso]

Life saver! Thank you

[@pabli7o]

I love watching these on my 12-minute lunch break lol

[@sasaivanovic5126]

excellent man thank you so so so much!

[@Blackcat5595]

This is great, thank you! Can you make a video about making a table/spreadsheet with Auto Layout?

[@inceptioninvest]

Thanks Pablo

[@prior1981]

Maestro!

[@prabhathk6175]

So cool

[@evgenyzakharov3759]

Class👍

[@juanmarquez4349]

Great explanation! Question, What about if adding background colors in the rows, you add a divider component between the rows in the list as for example? Thank you!!

[@leomega]

pablito! the master!

[@chicoselfie1602]

Your awesome!

[@inceptioninvest]

Thanks

[@kongregant8100]

This is great, thanks! What if I want to add an online green dot overimposed to the avatar, messenger style?

[@goodamar]

thank u

[@lattelover7186]

Thank you so much for the tutorial. I learn a lot about Figma Auto Layout just from this single video. 10:31 i don't see any Text Style on my Figma. Should we create one by one or there's already a style template we can import?

[@chicoselfie1602]

You are the fuc**ng best!

[@Underhills]

A general UI question: Do u prefer the avatar to flow with the height of the row like in your demo compared to leaving the position sticky to the place of origin? I kinda pref the latter. Same with the right action menu (context icon). What's your take on that?

[@joliedine]

Could you create a video showing how to create table (with line at the bottom of each element) using auto layout?

[@fridawb]

Great video! When you insert the header it looks like you have a bunch of different predefined headers to choose from. Is this a plugin or something you've done yourself? (I want it!)

[@ulyssesdewaegemaeker7311]

where has the resizing options gone? I'm looking to the right tool-bar and I dont get that key feature..

[@2SaltyRecipes]

One thing I don't get with auto-layout is how you get to animations. Like I tried to make a simple on/off button with auto layout, and I can't use smart animations at all with it.

[@ubaidullahzahid1308]

How to select all title togehter without subtitle

[@fajleyrabbe2930]

7:00 AL in action

[@Carroty_Peg]

Is anyone else struggling at 8:31? My text won't turn into two lines! Argh! Thank you though, this is very helpful!

[@noahm]

9:52 what happened to poor Annette’s address :(

[@alexsm3882]

Dude this is driving me crazy, why didn't Annette Black get any address info from Content Reel 😂 Happened to one contact in my follow along project as well, is it just random or what?

[@ytRap007]

Noice

[@alimamedgasanov5591]

1:55

[@omaryaa_]

Where is Figma Maria! 😂

[@snmbala]

Adobe XD will copy this feature by 2030