Create a Masonry Grid with Auto Layout - Figma Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 50

  • @SketchTogether
    @SketchTogether  4 ปีที่แล้ว +1

    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
    @michellezhu1559 3 ปีที่แล้ว +2

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

  • @vanessavanbleisem4795
    @vanessavanbleisem4795 3 ปีที่แล้ว

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

  • @mariavillar6921
    @mariavillar6921 3 ปีที่แล้ว

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

  • @artenman
    @artenman ปีที่แล้ว +1

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

  • @zoshuacolah
    @zoshuacolah 4 ปีที่แล้ว +1

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

  • @ИльяСейфетдинов
    @ИльяСейфетдинов 4 ปีที่แล้ว

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

  • @jswanson859
    @jswanson859 4 ปีที่แล้ว +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.

  • @Underhills
    @Underhills 2 ปีที่แล้ว +1

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

  • @wongeubing
    @wongeubing 3 ปีที่แล้ว

    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.

  • @whatsnewnow4469
    @whatsnewnow4469 3 ปีที่แล้ว

    Super cool video. I love the way u teach.

  • @viktoriacarralesraichynets1851
    @viktoriacarralesraichynets1851 2 ปีที่แล้ว

    Awesome explanation! Thanks!

  • @RizaHariati
    @RizaHariati 3 ปีที่แล้ว

    The projects really fun to do. Thanks Pablo

  • @niloufarkazemii2095
    @niloufarkazemii2095 3 ปีที่แล้ว

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

  • @bhaktimagar4887
    @bhaktimagar4887 10 หลายเดือนก่อน

    This is amazing
    I have tried this
    Thank you so much

  • @kierankelly1629
    @kierankelly1629 3 ปีที่แล้ว

    Clear and Concise, thanks

  • @suzettegibson350
    @suzettegibson350 2 ปีที่แล้ว

    Excellent, clear lessons! Thank you so much!

  • @jeeyuuni
    @jeeyuuni 3 ปีที่แล้ว

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

  • @ChristianBaptiste
    @ChristianBaptiste 4 ปีที่แล้ว

    Another great video Pablo!

  • @Downgrde
    @Downgrde 2 ปีที่แล้ว

    Great teacher, thank you!

  • @alyshiah5085
    @alyshiah5085 3 ปีที่แล้ว

    This was such a clear explanation Pablo, thank you!

  • @ricardocastillosandoval9383
    @ricardocastillosandoval9383 2 ปีที่แล้ว +1

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

  • @kathyz8550
    @kathyz8550 2 ปีที่แล้ว

    Awesome, thanks! So helpful.

  • @arnaudakotonou6254
    @arnaudakotonou6254 ปีที่แล้ว

    Amazing content

  • @Adlip_Kun
    @Adlip_Kun 5 หลายเดือนก่อน

    Thank you so much

  • @florakis
    @florakis 3 ปีที่แล้ว

    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?

  • @waveandersson
    @waveandersson 4 ปีที่แล้ว +1

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

    • @stopeCZ
      @stopeCZ 4 ปีที่แล้ว +1

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

    • @waveandersson
      @waveandersson 4 ปีที่แล้ว

      @@stopeCZ thanks, i Will look into that article

    • @waveandersson
      @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
      @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
      @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?

  • @Carroty_Peg
    @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!

  • @emirece1873
    @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.

  • @kartikmalviya9230
    @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.

  • @joshuavizzacco5691
    @joshuavizzacco5691 3 ปีที่แล้ว

    Are you able to keep the image proportions as you scale? I cannot seem to find this anywhere.

  • @aj20ad
    @aj20ad 3 ปีที่แล้ว

    Thank you so much!

  • @JoelNUIT
    @JoelNUIT ปีที่แล้ว

    Thankyou so much

  • @gauravidesigns
    @gauravidesigns 4 ปีที่แล้ว

    bro please make videos on microinteraction

  • @aniketjoshi7518
    @aniketjoshi7518 3 ปีที่แล้ว

    please create a webpage in Figma using auto layout feature.

  • @unsafecontent
    @unsafecontent 4 ปีที่แล้ว

    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
      @anitius101 4 ปีที่แล้ว

      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.

  • @stanmx
    @stanmx 4 ปีที่แล้ว

    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
      @oss4maz 4 ปีที่แล้ว +1

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

    • @stanmx
      @stanmx 4 ปีที่แล้ว

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

  • @tadswiech3043
    @tadswiech3043 3 ปีที่แล้ว

    the best

  • @hoons6949
    @hoons6949 2 ปีที่แล้ว

    n working

  • @tadswiech3043
    @tadswiech3043 3 ปีที่แล้ว

    the best