Create a Masonry Grid with Auto Layout - Figma Crash Course
HTML-код
- Опубликовано: 13 дек 2020
- Let's design a masonry grid using Figma's auto-layout.
Duplicate the resource file:
www.figma.com/community/file/...
Install the Blush plugin:
www.figma.com/community/plugi...
Install the Unsplash 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...
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
You are such a good teacher. The way you teach...bomb!
Seriously, no idea what I would have done without your tutorial! Thank you!
I love how it is packed with so many nuggets of best practices. Great video!
How
Cool
is
That.
How
Cool
is
That.
How
Cool
is
That.
Smashing the like button on all your tuts man. Great stuff, keep'em coming!
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.
Please, don't stop! It's amazing what you do
Thank you for the course!! I also used the Figma file and it was the most useful tool for learning autolayout. Thank you!!!!
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.
Super cool video. I love the way u teach.
Another great video Pablo!
you explained it so amazingly clear and simple . thank you .
Awesome explanation! Thanks!
Clear and Concise, thanks
your teaching skills are amazing! thanks for these !! : )
This is amazing
I have tried this
Thank you so much
Excellent, clear lessons! Thank you so much!
Great teacher, thank you!
The projects really fun to do. Thanks Pablo
Thank you so much
Awesome, thanks! So helpful.
Amazing content
Thank you so much!
This was such a clear explanation Pablo, thank you!
Thankyou so much
Most welcome 😊
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.
the best
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?
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.
is there a way to force the images to stack in one column when resized to a mobile screen ?
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.
the same principles apply to all the elements in Figma (images, texts etc)
@@OssamaZaid thank you, I will try this one without the unsplash plug-in.
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.
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!
bro please make videos on microinteraction
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?
I was wondering if there is a way to keep the aspect ratio intact on the cards while resizing grid
medium.com/@solo_cube/figma-auto-layout-objects-on-top-of-the-fixed-aspect-ratio-elements-d709aa7f496c
@@stopeCZ thanks, i Will look into that article
@@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...
@@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.
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?
Are you able to keep the image proportions as you scale? I cannot seem to find this anywhere.
NO, I'm facingg the same problem
please create a webpage in Figma using auto layout feature.
n working
the best