How to use Figma Auto Layout wrap tutorial 2023

Sdílet
Vložit

Komentáře • 50

  • @syed.simanta820
    @syed.simanta820 Před 11 měsíci +17

    Short and simple. No time waste ❤

  • @yusuftursu9990
    @yusuftursu9990 Před 10 měsíci +6

    Adding auto stretch to longest container and it is perfect

  • @syed.simanta820
    @syed.simanta820 Před 11 měsíci +6

    Bro make playlist on autolayout like headers, left right columns, testimonials

  • @saleema6308
    @saleema6308 Před 23 hodinami

    good but you used an outer frame to wrap the cards.

  • @NighatSharminn
    @NighatSharminn Před měsícem +1

    Thanks a bunch Jonathan

  • @vijinraj5486
    @vijinraj5486 Před 9 měsíci +2

    That was helpful for beginners since I have strong knowledge of auto layout for your video

    • @jonathanwaterworth
      @jonathanwaterworth  Před 9 měsíci

      Thanks mate! What kind of video tutorials would you like to see?

  • @uifry
    @uifry Před 8 měsíci +1

    Thanks for sharing :)

  • @prashanthn8205
    @prashanthn8205 Před 10 měsíci +2

    Hii jonathan, Can you add one absolute positioned element in this each card and do the same auto layouting thing.

    • @prashanthn8205
      @prashanthn8205 Před 10 měsíci +2

      for example food cards will have Food Name or Price on the food image itself, here Food Name or Price should be made absolute positioned to fit on the food image and it should work as auto layout with multiple such cards.

    • @jonathanwaterworth
      @jonathanwaterworth  Před 10 měsíci

      Yes I just tried something similar and think this can be achieved, you just have to make sure you apply to correct 'constraints' on the side panel to make it sit where you want within the card e.g. centre, bottom right, etc..

  • @Godheals_always
    @Godheals_always Před rokem +3

    This is really helpful. Thank you

    • @jonathanwaterworth
      @jonathanwaterworth  Před rokem

      Thank you! Glad I could help 🙌

    • @sh8yt
      @sh8yt Před 11 měsíci

      ​@@jonathanwaterworththank man! I got something useful today

  • @itsnikka8293
    @itsnikka8293 Před 8 měsíci +1

    Thanks for sharing, subscribed! :)

  • @user-sc5kf4mj8q
    @user-sc5kf4mj8q Před 5 měsíci +1

    One of the best🎉

  • @nobody-bt7mu
    @nobody-bt7mu Před rokem +3

    Short and simple

    • @jonathanwaterworth
      @jonathanwaterworth  Před rokem

      Thank you! Let me know if there are any other Figma tutorials you want to see

  • @sahilbhat4493
    @sahilbhat4493 Před 11 měsíci +1

    i have added autolayout to my desktop frame and to other frames inside that but i want to add elliptical gradients in the background to beautify the design, while doing so my whole design gets messed up, is there any way to set my background with elliptical gradients and over that add other frames without messing anything in autolayout, please reply im confused since past two days

  • @veronicawong9910
    @veronicawong9910 Před 6 měsíci +1

    Not sure if I'm doing something wrong here, but is there a way to do this but then when you get to the point where your container is less than 250px (ie all of your blocks are now stacked vertically), remove the min width so the blocks can be completely fluid with the container width (which is less than 250px at this point) ?

    • @jonathanwaterworth
      @jonathanwaterworth  Před 6 měsíci

      Thanks for the question Veronica! I'm happy to be proven wrong if it there is a way, but I don't think there is, because you need the min size for it to do the stacking, but I don't think you can remove it half way
      I'll try have a look, but don't think it's possible currently in Figma

  • @TerpkeZ
    @TerpkeZ Před 2 měsíci +1

    fye

  • @rakeshreddy7079
    @rakeshreddy7079 Před 9 měsíci +1

    Bro i am unable to remember thet hingd which i have done in figma ...
    Do you have any notes kind of thing regarding
    A. Text
    B. Image with text
    C. Scrolling
    D. Carousel with cards
    I am beginner please suggest me how to remember things easily ...
    Appreciate your help .

    • @jonathanwaterworth
      @jonathanwaterworth  Před 9 měsíci

      Thanks mate, just gotta get practising, getting the reps and eve if it's passion projects on the side doesn't have to be paid will help you improve and remember things. It takes time

  • @michaelschultze3595
    @michaelschultze3595 Před rokem +1

    Thanks. Looks easy, but I have problems with it. It just does not work as expected. This has surely to do with the nesting of the single objects

    • @jonathanwaterworth
      @jonathanwaterworth  Před rokem +2

      Hey Michael, I'm happy to try to help you figure it out. Can you explain what is happening when you try it?

    • @michaelschultze3595
      @michaelschultze3595 Před rokem

      @@jonathanwaterworth Hey Jonathan. Thanks for your help.
      I have managed it now. From my point of view it is just always a lot of work when you have a lot of nested objects (with auto layout) but then have to wrap the overall construction ....

    • @jonathanwaterworth
      @jonathanwaterworth  Před rokem +1

      So true! Auto Layout is very powerful but can also become a big mess and make things more confusing!

    • @michaelschultze3595
      @michaelschultze3595 Před rokem

      @@jonathanwaterworth ❤

    • @michaelschultze3595
      @michaelschultze3595 Před 10 měsíci

      The box at the right end goes over the complete row when wrapping. But not in my example 🤔

  • @AudioDestinyHQ
    @AudioDestinyHQ Před rokem +2

    How did you select all of the boxes? Commend a?

  • @venomousuiux
    @venomousuiux Před 6 dny +1

    Can it do jamaican rap?

  • @tropicalhousemusic601
    @tropicalhousemusic601 Před rokem +1

    Tutorial please?

    • @jonathanwaterworth
      @jonathanwaterworth  Před rokem

      Hey here you go this covers the same functions but in a longer tutorial format - czcams.com/video/BOdpHU5Q-Kg/video.html
      Hope that helps :)

  • @ooogabooga5111
    @ooogabooga5111 Před 10 měsíci +1

    Its not working with components

    • @jonathanwaterworth
      @jonathanwaterworth  Před 10 měsíci

      It should work :) Do you have all the settings the same?

    • @ooogabooga5111
      @ooogabooga5111 Před 10 měsíci

      @@jonathanwaterworth So figma doesn't inherit the "fill container" property from components, so you have to manually go to each instance of the component inside the auto layout and set it to fill to make it work. Its not a bug with wrap but figma is unable to implement it.

  • @SanjaySinghYT
    @SanjaySinghYT Před 8 měsíci

    source code?