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 - Наука
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.
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
The hero we need
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.
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.
Thank you Rogie!
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."
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.
Thanks Rogie!
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?
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?
How to fix it to 0...I can't seem to do it
Is slots no longer needed now that we have variants?
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.
www.figma.com/community/plugin/748533339900865323/Contrast
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?
As far as I know, this is something they really working on right now. Can't wait to see how they do it 🥰
it would be nice to add the accessibility plug-in to Figma, part of the native application
great tips :)
Part 1: ruclips.net/video/WPRD8_L6hf0/видео.html
Part 2: ruclips.net/video/H18PvAKtkSY/видео.html
Part 3: ruclips.net/video/-OD6aTwG9_Q/видео.html
When you NEXT stream i really love your content are you going to be live again ?! Soon....
How did he drag & drop icons from assets? For me, I can see icons but I can't drag & drop them
I think in this one, Rogie had something else as its source for the microphone 🤔
i want to know whats the name of the app that you use for find the right contrast color :)
apps.apple.com/us/app/contrast-color-accessibility/id1254981365?mt=12
How do I join your live stream??
How do I know when you're going live??
please guys make new videos na, figma lot of potential in feartures u know that
zoom recording does not exist
Slot(why?) - 26:46
Better explanation of slots - 35:50
Bit too fast
To much confusion Rogie, the Book App series were much better than this presentation.
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!
@@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.
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
Him sipping that damn water every 5 mins is so annoying. Just drink half a bottle before and be done with it :))
I shall double my efforts on my hydration game, good sir.
@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
@@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.
Pleeeease, fix the smart animation/animation. For each sneeze, I have to create a separate frame. I HAVE ALL BUGGY!!! 😩😩😩😩😩😩
a bit less laugh please, it's annoying