Rebuilding YouTube With Figma (Auto Layout Tutorial)

Поделиться
HTML-код
  • Опубликовано: 28 янв 2025

Комментарии • 75

  • @ArnauRos
    @ArnauRos  2 года назад

    Follow along with the cloneable! www.figma.com/community/file/1191483049085088273

  • @moalbakri
    @moalbakri 2 года назад +19

    bro u are very fast!!!!!

    • @christiangrantz1526
      @christiangrantz1526 10 месяцев назад

      Thats why am using playback speed! He is teaching the beginners and he should not be so fast

  • @alibsr
    @alibsr Год назад +1

    Thanks Bro! That was my first experience with Auto Layout and working with Figma also! Actually, with this video I redesigned the RUclips Homepage step-by-step with you.

  • @StanOwden
    @StanOwden 2 года назад +5

    1:09 To measure objects and space in between to the exact pixel it’s useful to use PowerToys for Windows

    • @ArnauRos
      @ArnauRos  2 года назад +1

      Havent heard of that one thanks!

    • @StanOwden
      @StanOwden 2 года назад

      @@ArnauRosHere is a tip for measuring inside dimensions of objects. It is useful to use it with objects (let's say you want to get the size of the RUclips thumbnail) that have the same colour in the measured area since it detects borders of gradients.

    • @t-bag7201
      @t-bag7201 Год назад

      which feature of it exactly ?

  • @mastergamers6991
    @mastergamers6991 2 года назад +7

    Need more figma and webfliw toturials

  • @atharnadeem6947
    @atharnadeem6947 2 года назад +2

    Very Informative. Thanks

    • @ArnauRos
      @ArnauRos  2 года назад

      Thanks for watching!

  • @isabellamorales.studio
    @isabellamorales.studio Год назад +6

    I think it was overall a nice tutorial but sometimes you just say "now I'm gonna to this and this" and doesn't explain that is and I had to put the video in slow motion to check your mouse and layers to understand what it was and even so sometimes I couldn't figure out. Just a little detail though

    • @ArnauRos
      @ArnauRos  Год назад +1

      Thanks Isabella, I’ll take more time to explain things

  • @suniljadhav1889
    @suniljadhav1889 Год назад

    Really great n quick...Thanx bro

  • @OsvaldoOsorio
    @OsvaldoOsorio Год назад

    Thanks for sharing your knowledge and experience. Your a very at point teacher. Well done.

  • @dariagorskaya6932
    @dariagorskaya6932 4 месяца назад

    Hey Arnau, thank you for the video! Could you please explain how did you broke down the video component and create a short video component out of those elements? Thanks in advance!

  • @JRCme1
    @JRCme1 2 года назад +1

    How would this Figma layout work in Webflow and can you get a link from that to a marketplace and of course using members.

    • @ArnauRos
      @ArnauRos  2 года назад

      Hey I’m not sure what you mean

  • @robinbreed2439
    @robinbreed2439 Год назад

    Super cool!

  • @neuniad7316
    @neuniad7316 8 месяцев назад

    Hey how do you make this video screen recording? It's awesome.

    • @ArnauRos
      @ArnauRos  8 месяцев назад

      just quicktime!

  • @hamzaahmad1224
    @hamzaahmad1224 Год назад

    Hi! Do you have a tutorial for building a youtube page layout when a video is playing? That would be really very beneficial

  • @eswag153
    @eswag153 Год назад

    why do you usually use a 8 pt system vs a 4? 4 seems more flexible?

    • @ArnauRos
      @ArnauRos  Год назад +1

      I like an 8 pt system as its easier to stay consistent, when you add more options theres more room for failures

  • @michellesudhakar9961
    @michellesudhakar9961 Год назад

    Thanks, Arnau for a wonderful video. I am using the shift-up arrow to bump it up from 8 but it goes up in increments of 10 (starting at 8, the shift-up arrow goes to 18) Any idea why? Appreciate your help, Thanks!

    • @ArnauRos
      @ArnauRos  Год назад

      If you take a look at your Figma preferences you might see nudge amount. Here you can make it whatever amount you need!

  • @prafulsutar.uxd.
    @prafulsutar.uxd. Год назад

    This was helpful but,
    Could you use the same layout to demonstrate the responsiveness in various devices using 'Breakpoint'?

  • @ash_purushotham
    @ash_purushotham Год назад

    @Arnau Ros, I am learning so much from your videos. Please make a video of how you would make this in Webflow too. (if you have not already made one)
    Cheers!

  • @azunae1166
    @azunae1166 Год назад

    The auto layout feature and frame feature is confusing.

  • @relatableinclass
    @relatableinclass 11 месяцев назад +1

    Could you attach a slower and more precise step-by-step version? This one is way too fast, and the little steps needed to be explained clearly. Even though this video is just 16 minutes, I've been on it for 5 hours trying to understand it better slowed it down to 0.5 but nothing and because of that i got stuck.

    • @ArnauRos
      @ArnauRos  11 месяцев назад

      Sorry Sophia, if theres a specific spot that you're stuck on maybe I can help

  • @l0n364
    @l0n364 2 года назад

    Arnau. Your the best. 💜

  • @desireegarcia2696
    @desireegarcia2696 Год назад

    This is great! Do you have any tutorials with mobile examples? I'm getting started with Auto Layout and I wanna do tutorials every day until it comes naturally

    • @ArnauRos
      @ArnauRos  Год назад

      Yes! Take a look at my more recent videos featuring figma :)

  • @ajaym6795
    @ajaym6795 2 месяца назад

    It took me 2 hours to design this page and still the responsiveness wasn't working (my auto-layout game is weak)

    • @ArnauRos
      @ArnauRos  2 месяца назад +1

      all good man it takes time to get good at this stuff!

  • @omarmosaad_
    @omarmosaad_ 2 года назад

    why you aren't using any grid

    • @ArnauRos
      @ArnauRos  2 года назад +1

      Grids are hard to create in Figma without plugins :)

  • @Nunuforfun
    @Nunuforfun 4 месяца назад

    wait hold on too fast! I get the feeling im going to watch this over and over and still think the same lol! ty though

  • @des7638
    @des7638 Год назад

    Def Figma webflow. And also framer Figma. Maybe take us through the plugins that port to each. Thanks man

    • @ArnauRos
      @ArnauRos  Год назад

      Hey! What are you referring to with framer Figma? Happy to build for framer too if needed :)

    • @des7638
      @des7638 Год назад

      ​@@ArnauRos So there are different Plugins to port Figma designs to both Framer and Figma. You have to build it correctly in Figma for it to work properly tho (mostly using auto layout I think). Im a webflow user recently been playing with Framer. The reason i watched this video at all was becuase i need to get better with Figma Auto layouts before i can start porting stuff over to either platform and getting good results.
      ultimately im realizing that Webflow makes sense for certain projects and that Framer will work better for other types of projects. Pros and cons to each. but it would be useful to just see you work through all of that. Lemme know if thats not super clear.
      thanks Arnau

  • @slipstream01
    @slipstream01 2 года назад

    Wow ur really really fast and good with figma makes me think if i should learn figma before anything else.

    • @ArnauRos
      @ArnauRos  2 года назад +1

      Figma is important!

    • @slipstream01
      @slipstream01 2 года назад

      @@ArnauRos i agree im on the basic level im building a basic wireframes before i start building in webflow.

    • @slipstream01
      @slipstream01 2 года назад

      @@ArnauRos love your videos btw ur content is pure gold please make more.

    • @ArnauRos
      @ArnauRos  2 года назад

      Great! Start small but keep challenging yourself and you’ll improve quickly

    • @ArnauRos
      @ArnauRos  2 года назад

      Thank you!! & Thank you for watching :)

  • @petermckinnon386
    @petermckinnon386 2 года назад

    Brilliant, fast but brilliant lol.

    • @ArnauRos
      @ArnauRos  2 года назад

      Thanks Peter! I have to include lots in a short time :)

  • @SayaruWatches
    @SayaruWatches 2 года назад

    please make this in webflow

    • @ArnauRos
      @ArnauRos  2 года назад +1

      Will do!

    • @Tjeetu11
      @Tjeetu11 Год назад

      @@ArnauRos is the webflow video of the same posted on channel?

  • @ShahbazAhmad-ff4cs
    @ShahbazAhmad-ff4cs 11 месяцев назад +1

    Explanation is too fast ! Cant even understand some parts

  • @dmppo
    @dmppo Год назад +1

    Great video but you move so fast. As a beginner it's hard to keep up

    • @ArnauRos
      @ArnauRos  Год назад

      Noted! I have more in depth videos that are a bit slower

  • @shuaiblateefat7873
    @shuaiblateefat7873 10 месяцев назад

    Brilliant but you are very fast

  • @jkoblivion4175
    @jkoblivion4175 6 месяцев назад +1

    Not responsive.

    • @ArnauRos
      @ArnauRos  6 месяцев назад

      nope! just the desktop version

  • @toschaferguson5749
    @toschaferguson5749 Год назад

    I watched three times for a class there's just too much and too quick.

    • @ArnauRos
      @ArnauRos  Год назад

      hey, sorry bout that! I videos of different speeds as well so it might be more helpful

  • @pradipkannan4714
    @pradipkannan4714 Год назад

    Bro you doing too fast

    • @ArnauRos
      @ArnauRos  Год назад

      Sorry for that! I have some slower videos

  • @drigfamous
    @drigfamous 4 месяца назад

    You got something wrong here.
    This should be called Auto Layout Speedrun, not Tutorial. When you do tutorial to show others how it's done, there is no time sake, we all came here to learn. I don't get where you are rushing.

    • @ArnauRos
      @ArnauRos  2 месяца назад

      sorry brother im limited on time!

  • @TheSAMRIDH
    @TheSAMRIDH 9 месяцев назад

    Waste of time