Create a Masonry Grid with Auto Layout

No video

Create a Masonry Grid with Auto Layout - Figma Crash Course

Рет қаралды 28,626

3 жыл бұрын

Let's design a masonry grid using Figma's auto-layout.
Duplicate the resource file:
www.figma.com/...
Install the Blush plugin:
www.figma.com/...
Install the Unsplash plugin:
www.figma.com/...
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.g...

Пікірлер: 50

@SketchTogether 3 жыл бұрын

Yo! If you wanna see the end result, you can duplicate the resource file here: www.figma.com/community/file/915706020494734586 Also, install the Blush plugin: www.figma.com/community/plugin/838959511417581040/B

@michellezhu1559 3 жыл бұрын

You are such a good teacher. The way you teach...bomb!

@vanessavanbleisem4795 2 жыл бұрын

Seriously, no idea what I would have done without your tutorial! Thank you!

@zoshuacolah 3 жыл бұрын

I love how it is packed with so many nuggets of best practices. Great video!

@jswanson859 3 жыл бұрын

This was simply a great tutorial. Easy to follow and I didn't feel like any of the steps were missing. I was able to achieve the same results as you. THANK YOU! You have a new subscriber now and I'm going to try the UI Components one now.

@user-rr1tm2px1g 3 жыл бұрын

Please, don't stop! It's amazing what you do

@artenman Жыл бұрын

How Cool is That. How Cool is That. How Cool is That.

@mariavillar6921 2 жыл бұрын

Thank you for the course!! I also used the Figma file and it was the most useful tool for learning autolayout. Thank you!!!!

@wongeubing 2 жыл бұрын

Thank you so much for your tutorials. You are such a great instructor. I'm completely new to figma and I've been able to learn so much very quickly thanks to your templates and tutorials.

@Underhills 2 жыл бұрын

Smashing the like button on all your tuts man. Great stuff, keep'em coming!

@whatsnewnow4469 2 жыл бұрын

Super cool video. I love the way u teach.

@viktoriacarralesraichynets1851 2 жыл бұрын

Awesome explanation! Thanks!

@kierankelly1629 2 жыл бұрын

Clear and Concise, thanks

@bhaktimagar4887 6 ай бұрын

This is amazing I have tried this Thank you so much

@Downgrde 2 жыл бұрын

Great teacher, thank you!

@niloufarkazemii2095 3 жыл бұрын

you explained it so amazingly clear and simple . thank you .

@RizaHariati 2 жыл бұрын

The projects really fun to do. Thanks Pablo

@suzettegibson350 Жыл бұрын

Excellent, clear lessons! Thank you so much!

@jeeyuuni 3 жыл бұрын

your teaching skills are amazing! thanks for these !! : )

@ChristianBaptiste 3 жыл бұрын

Another great video Pablo!

@Adlip_Kun Ай бұрын

Thank you so much

@arnaudakotonou6254 Жыл бұрын

Amazing content

@kathyz8550 2 жыл бұрын

Awesome, thanks! So helpful.

@ricardocastillosandoval9383 2 жыл бұрын

is there a way to force the images to stack in one column when resized to a mobile screen ?

@JoelNUIT 9 ай бұрын

Thankyou so much

@SketchTogether 8 ай бұрын

Most welcome 😊

@alyshiah5085 3 жыл бұрын

This was such a clear explanation Pablo, thank you!

@aj20ad 3 жыл бұрын

Thank you so much!

@kartikmalviya9230 3 жыл бұрын

Hi Pablo, thanks for this tutorial. I am facing one problem though, ... When I resize the content inside the columns to fill the container on both axis, it loses becomes a normal grid, not a masonry Grid that was before setting those scaling to fill the container on both axis. I hope you understand what I'm trying to say.

@emirece1873 3 жыл бұрын

When adding more texts it expands upward. Is there any possible way to make it downward while extending the size of the frame eventually and keeping the texts at the left bottom corner of the frame? Thanks.

@florakis 2 жыл бұрын

When I make the three columns as an AutoLayout and Im trying to change the title position ( 7:16 ) nothing happens... If I don't make then as an AutoLayout it's working, I tried multiple times to do the same thing and sometimes the two columns where responding to the changes and one was not, but again if i select all three columns and apply AutoLayout, its not working. , anyone has the same problem?

@unsafecontent 3 жыл бұрын

Great video! However I still have one question: On your first example the cards had different heights while on the same row, but when you select fill the container property for all your content it resizes equally all the elements. How did you make some cards with different size while keeping everything filling the container?

@anitius101 3 жыл бұрын

After he applied the fill container property to the card component, he manually changed the height on some of them. You can change the size of an instance without affecting the original component. Minute 8:26 aprox. I hope that makes sense.

@tadswiech3043 3 жыл бұрын

the best

@Carroty_Peg 3 жыл бұрын

What can I do if I don't use a plugin? When I paste an image, do I have to turn it into a frame? Thank you!

@stanmx 3 жыл бұрын

Powerful auto-layer! great episode, one question, i see you use plugins for made responsive the image, but is possible copy image direct to the figma board and make it responsive? thank you.

@oss4maz 3 жыл бұрын

the same principles apply to all the elements in Figma (images, texts etc)

@stanmx 3 жыл бұрын

@@oss4maz thank you, I will try this one without the unsplash plug-in.

@gauravidesigns 3 жыл бұрын

bro please make videos on microinteraction

@waveandersson 3 жыл бұрын

I was wondering if there is a way to keep the aspect ratio intact on the cards while resizing grid

@stopeCZ 3 жыл бұрын

medium.com/@solo_cube/figma-auto-layout-objects-on-top-of-the-fixed-aspect-ratio-elements-d709aa7f496c

@waveandersson 3 жыл бұрын

@@stopeCZ thanks, i Will look into that article

@waveandersson 3 жыл бұрын

@@stopeCZ When you follow the guidelines in the article, you end up with a component the can scale and keep aspect ratio, but the component doesn't work in a vertical list with auto layout, the components are not updating height, and they end up overlapping each other. So back to manually fitting stuff for different screensizes...

@stopeCZ 3 жыл бұрын

@@waveandersson I've duplicated the original file and the instances of different aspect ratio master components resize and scale fine in my auto layout frames. You might be focusing and resizing a wrong layer in the instance.

@waveandersson 3 жыл бұрын

Yes, I may have done something wrong, but I do not think it's that easy. I made the scaling work fine but not the vertical sorting ... were you able to get to cards expanding properly and push the other cards to fit as they should?