Build it in Figma: Design a responsive website navigation [Part 1]

Поделиться
HTML-код
  • Опубликовано: 1 июл 2020
  • Part 1/3. See how Rogie uses constraints and components to build a navigation that scales from mobile to desktop.
    Figma Community file used in this livestream: www.figma.com/community/file/...
    #Figma #BuildItInFigma #FigmaDesign #WebsiteDesign
  • НаукаНаука

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

  • @rishabhmittal885
    @rishabhmittal885 4 года назад +2

    I happen to get a lot of problem in understanding auto layout and responsive design, but this brilliant stream have surely solved a lot of it. Love it, great job.

  • @fajleyrabbe2930
    @fajleyrabbe2930 3 года назад +49

    8:20 Jump into/website Top Navbar Design
    11:04 vector object scaling Problem and solution
    20:40 More icon add to group button
    42:40 Constraint, Autolayout
    50:10 nested AutoLayout

  • @charles-henrilison2313
    @charles-henrilison2313 3 года назад

    Great tutorial! This is exactly what I needed, thank you guys! Please note that Figma has had a few updates since, but it still works.

  • @fipa1988
    @fipa1988 4 года назад +5

    Where can one join these live streams? :) And where can we see upcoming streams? Thank you so much! Figma changed my working life and then that changed my life in global! Cheers from Bosnia.

  • @bongtzeyong7540
    @bongtzeyong7540 3 года назад +1

    Thank you Rogie!

  • @bflynn02035
    @bflynn02035 2 года назад +3

    Helpful for sure. But would be more helpful if Rogie took the effort to practice before recording. Rambling stream-of-consciousness makes 2x longer than need be. Another problem... "Mobile First" is well accepted, Rogie designs here from "Desktop First."

  • @iflotaichi
    @iflotaichi 3 месяца назад

    great tutorial, as an old guy learning this I have to say best piece of vector software since flash 5. also weird place to put the snap to grid.

  • @sarahtara
    @sarahtara 3 года назад +1

    Thanks Rogie!

  • @htmlkurdish8755
    @htmlkurdish8755 3 года назад +1

    Well done , i have a question please answer me , when I use figma to create websites ui then when i check it i lost my responsive so can you tell me the solve?

  • @carbonwarrior
    @carbonwarrior 4 года назад +5

    Thank you for sharing the slot tip, but it's a bit complicated to follow and understand why it isn't working the first time and then when you fix it you are relieved but you keep going instead of stopping and explaining more clearly how to do it. If it was a problem for you to do it, how do you expect the viewers to understand it and apply it themselves?

    • @nehaparmar2009
      @nehaparmar2009 3 года назад

      How to fix it to 0...I can't seem to do it

  • @laillaE
    @laillaE 3 года назад +1

    Is slots no longer needed now that we have variants?

  • @vuyanziglorious9518
    @vuyanziglorious9518 3 года назад +3

    watching this right now and am learning A LOT, quick one though, I can't find the plugin you used for contrast, could you kindly share the link.

    • @rashmijha9326
      @rashmijha9326 3 года назад +1

      www.figma.com/community/plugin/748533339900865323/Contrast

  • @TuneAddikt
    @TuneAddikt 4 года назад +2

    Just out of interest why isn't there a public roadmap for Figma? Super interested to see what features can be expected in near future. Be great to know if states is something being looked at?

    • @remusb
      @remusb 4 года назад

      As far as I know, this is something they really working on right now. Can't wait to see how they do it 🥰

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

    it would be nice to add the accessibility plug-in to Figma, part of the native application

  • @nooshka
    @nooshka 3 года назад

    great tips :)

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

    Part 1: ruclips.net/video/WPRD8_L6hf0/видео.html
    Part 2: ruclips.net/video/H18PvAKtkSY/видео.html
    Part 3: ruclips.net/video/-OD6aTwG9_Q/видео.html

  • @God-T
    @God-T 3 года назад

    When you NEXT stream i really love your content are you going to be live again ?! Soon....

  • @vishnupanchal6215
    @vishnupanchal6215 3 года назад

    How did he drag & drop icons from assets? For me, I can see icons but I can't drag & drop them

  • @remusb
    @remusb 4 года назад +1

    I think in this one, Rogie had something else as its source for the microphone 🤔

  • @daisya2950
    @daisya2950 4 года назад

    i want to know whats the name of the app that you use for find the right contrast color :)

    • @DuncanGeere
      @DuncanGeere 3 года назад +1

      apps.apple.com/us/app/contrast-color-accessibility/id1254981365?mt=12

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

    How do I join your live stream??
    How do I know when you're going live??

  • @hardiksolanki4908
    @hardiksolanki4908 3 года назад

    please guys make new videos na, figma lot of potential in feartures u know that

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

    zoom recording does not exist

  • @aidilgoh1604
    @aidilgoh1604 4 года назад +1

    Slot(why?) - 26:46

    • @aidilgoh1604
      @aidilgoh1604 4 года назад

      Better explanation of slots - 35:50

  • @desandipan19
    @desandipan19 4 года назад

    Bit too fast

  • @starboy3802
    @starboy3802 4 года назад +3

    To much confusion Rogie, the Book App series were much better than this presentation.

    • @Figma
      @Figma  4 года назад +1

      Hey star boy, thanks for the comment. We're always looking for ways to improve. Could you let us know what you liked about the book app series, and what you found most confusing about this video? We'll be able to take that information into account in the future to do more/less of it. Thanks!

    • @starboy3802
      @starboy3802 4 года назад +2

      @@Figma Hi Figma! What I liked about the Book App series is the creative process Rogie presented; starting with the clear objective in mind, then analyzing screens he took for inspiration, drawing some rough wireframes, creating layouts, etc. It's the way how every good project should start. Here in this video he just jumps straight to creating navigation bars without presenting any plan, a drawing, a rough. I hope this explanation helps.

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

      I hate the book app live stream tho, I think Rogie is not too good at explaining why the way he does things such as 19:41 , if you set line height 16 but if your text size goes over 16pt how does the height be fixed??? very confusing. also the slot part is also very confusing I've rewatched few times still don't understand why he did that LOL

  • @BrialMusic
    @BrialMusic 4 года назад +3

    Him sipping that damn water every 5 mins is so annoying. Just drink half a bottle before and be done with it :))

    • @rogietheking
      @rogietheking 4 года назад +6

      I shall double my efforts on my hydration game, good sir.

    • @BrialMusic
      @BrialMusic 4 года назад +1

      @Hamza Sadouk content is ok. Lacks structure and it's chaotic at times. I understood what he was trying to with that slot but It lacked a clear explanation of what you can swap and how it relates to the icons

    • @aidilgoh1604
      @aidilgoh1604 4 года назад

      @@BrialMusic I think you can swap practically anything within the parent component. Useful for when you need to swap 1 for 1. Another way that I can find this useful is when you need a button that has an icon and text side by side - put 2 slots instead of one.

  • @mr.dabilin8803
    @mr.dabilin8803 4 года назад +1

    Pleeeease, fix the smart animation/animation. For each sneeze, I have to create a separate frame. I HAVE ALL BUGGY!!! 😩😩😩😩😩😩

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

    a bit less laugh please, it's annoying