Rebuilding YouTube With Figma (Auto Layout Tutorial)

Поділитися
Вставка
  • Опубліковано 1 січ 2023
  • Figma speed building the UA-cam homepage! This tutorial should extend your practice of auto layout in Figma as well as improve your general expertise in the program. You'll also learn extensively the use of plugins such as Unsplash, and the important use of components.
    Explore the Figma File Here:
    www.figma.com/community/file/...
    -----
    🛠 Try Figma 👇
    bit.ly/3LqgGig
    🛠 Figma For Pros 👇
    bit.ly/3V5oZmD
    🚀 Subscribe for more weekly design content
    bit.ly/2FQLrO5
    🎥 What I use in my videos!
    kit.co/arnauros/filming-setup
    📄 Bonsai Referral (try for free)
    www.hellobonsai.com/invite?fp...
    👨‍💻 Connect with me
    arnau.design
    🌎 Socials
    / arnau_design
    / arnau_design
    DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

КОМЕНТАРІ • 69

  • @ArnauRos
    @ArnauRos  Рік тому

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

  • @moalbakri
    @moalbakri Рік тому +15

    bro u are very fast!!!!!

    • @christiangrantz1526
      @christiangrantz1526 4 місяці тому

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

  • @mastergamers6991
    @mastergamers6991 Рік тому +7

    Need more figma and webfliw toturials

  • @OsvaldoOsorio
    @OsvaldoOsorio 8 місяців тому

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

    • @ArnauRos
      @ArnauRos  8 місяців тому

      I appreciate that!

  • @robinbreed2439
    @robinbreed2439 10 місяців тому

    Super cool!

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

  • @atharnadeem6947
    @atharnadeem6947 Рік тому +2

    Very Informative. Thanks

  • @StanOwden
    @StanOwden Рік тому +5

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

    • @ArnauRos
      @ArnauRos  Рік тому +1

      Havent heard of that one thanks!

    • @StanOwden
      @StanOwden Рік тому

      @@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 UA-cam thumbnail) that have the same colour in the measured area since it detects borders of gradients.

    • @t-bag7201
      @t-bag7201 9 місяців тому

      which feature of it exactly ?

  • @alibsr
    @alibsr 11 місяців тому +1

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

    • @ArnauRos
      @ArnauRos  10 місяців тому

      Glad it helped!

  • @suniljadhav1889
    @suniljadhav1889 8 місяців тому

    Really great n quick...Thanx bro

    • @ArnauRos
      @ArnauRos  8 місяців тому

      Welcome 😊

  • @isabellamoralessalis3152
    @isabellamoralessalis3152 Рік тому +3

    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

  • @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 :)

  • @l0n364
    @l0n364 Рік тому

    Arnau. Your the best. 💜

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

  • @neuniad7316
    @neuniad7316 2 місяці тому

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

    • @ArnauRos
      @ArnauRos  2 місяці тому

      just quicktime!

  • @hamzaahmad1224
    @hamzaahmad1224 9 місяців тому

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

    • @ArnauRos
      @ArnauRos  6 місяців тому

      Hey, not yet

  • @prafulsutar.uxd.
    @prafulsutar.uxd. Рік тому

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

  • @JRCme1
    @JRCme1 Рік тому +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  Рік тому

      Hey I’m not sure what you mean

  • @slipstream01
    @slipstream01 Рік тому

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

    • @ArnauRos
      @ArnauRos  Рік тому +1

      Figma is important!

    • @slipstream01
      @slipstream01 Рік тому

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

    • @slipstream01
      @slipstream01 Рік тому

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

    • @ArnauRos
      @ArnauRos  Рік тому

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

    • @ArnauRos
      @ArnauRos  Рік тому

      Thank you!! & Thank you for watching :)

  • @michellesudhakar9961
    @michellesudhakar9961 7 місяців тому

    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  7 місяців тому

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

  • @petermckinnon386
    @petermckinnon386 Рік тому

    Brilliant, fast but brilliant lol.

    • @ArnauRos
      @ArnauRos  Рік тому

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

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

  • @azunae1166
    @azunae1166 Рік тому

    The auto layout feature and frame feature is confusing.

  • @omarmosaad_
    @omarmosaad_ Рік тому

    why you aren't using any grid

    • @ArnauRos
      @ArnauRos  Рік тому +1

      Grids are hard to create in Figma without plugins :)

  • @relatableinclass
    @relatableinclass 5 місяців тому +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  5 місяців тому

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

  • @babayanos
    @babayanos Рік тому

    please make this in webflow

    • @ArnauRos
      @ArnauRos  Рік тому +1

      Will do!

    • @Tjeetu11
      @Tjeetu11 Рік тому

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

  • @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 4 місяці тому

    Brilliant but you are very fast

  • @ShahbazAhmad-ff4cs
    @ShahbazAhmad-ff4cs 4 місяці тому +1

    Explanation is too fast ! Cant even understand some parts

  • @jkoblivion4175
    @jkoblivion4175 9 днів тому +1

    Not responsive.

    • @ArnauRos
      @ArnauRos  6 днів тому

      nope! just the desktop version

  • @toschaferguson5749
    @toschaferguson5749 6 місяців тому

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

    • @ArnauRos
      @ArnauRos  6 місяців тому

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

  • @pradipkannan4714
    @pradipkannan4714 7 місяців тому

    Bro you doing too fast

    • @ArnauRos
      @ArnauRos  7 місяців тому

      Sorry for that! I have some slower videos

  • @TheSAMRIDH
    @TheSAMRIDH 3 місяці тому

    Waste of time