Create Responsive Website Designs | Figma Tutorial
HTML-код
- Опубликовано: 28 июн 2024
- Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
👉 howtodesignbetter.com/ebook
Learn how to create 100% responsive web designs in Figma, using Auto Layout ONLY, without Plugins or Constraints. Enjoy!
If you're ready to learn more - check out the Figma Mastery course👇
howtodesignbetter.com/figma-m...
Timestamps:
00:00 - Intro
00:30 - Getting started
01:51 - Fixing Header, Hero, and Logos
05:56 - Tablet designs
08:09 - Mobile designs
11:46 - Why Auto Layout is important
12:27 - Figma to Framer? Leave a comment!
12:48 - Outro (Figma Mastery)
----------------------------------------------
P.S. If you're interested in learning UI/UX design feel free to check out my design ebooks - there are free samples available (110+ pages total).
For mobile designers 👇
howtodesignbetter.com/design-...
For website designers & freelancers 👇
howtodesignbetter.com/web-des...
My Figma Mastery video course 👇
howtodesignbetter.com/figma-m...
----------------------------------------------
Watch the previous tutorial about box model if you haven't yet! ➡️ • Figma Responsive Desig...
This will help you get a better idea about designing for development in Figma
----------------------------------------------
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week! 
Хобби
Awesome stuff! 👌 Your tutorials have truly helped me to master Figma. Thank you.
Thanks man for this, it was very helpful! I never knew that framer is very easy to work on! thank a ton!
Great video. One of a kind nowadays. Thank you Adrian
Great tutorial. I hope that you'll make next part with framer as well.
Nice tutorial and good explanation with great teaching style....
Dude you're savior 🙌🙌🙌🙌🙌🙌🙌🙌.
Thanks a lot for sharing, I truly appreciate your work and way of teaching will be looking forward for more informational videos from you.
Thanks a lot! :)
Thanks Adrian this video help us to make responsive design
This is really helpful. Thank you..
Hi Adrian :)) I absolutely loved the video🤩🤩 will you make some tutorials on how to build websites in webflow? That would be so useful !! 🙏
Extremely helpful. Thank you Adrian.
My pleasure! :)
Awesome stuff! I love the progression from box model to responsive layout...would love to see how it translate to real website in framer. Thanks Bro
Will do soon! Thanks :)
Nice video and i will love to see a follow up on this video in framer
Yes, would love a follow up on how you turn it to a real website on framer. Thanks Adrian.
I'll work on it :)
Yes please!!
Yes please!!
Trying to figure out where technical writing and UI writing fits into all of this.
yes!!. Framer too ! that's what I was searching the whole week! :) add some 3D element from spline on the header too
Cool, I'll see what I can do!
very much useful content, Thank you Adrian
Glad I could help!
Gem of a video🤟
Thanks Chirag! 🙏
Thanks!
Thank You @Adrian 😍😍
Of course!
Great content sir. Hope for more videos
More coming :)
Thanks Adrian🎉
No probs Shashi!
Great content Adrian.just a quick one though,what if you got couple number of pages will you still need to do the same to the rest of the pages to make them responsive?
Thanks for this~~~
You're welcome!
Thanks for this
Yw!
Thank you Adrian
No worries David!
thanks sir you are amazing teacher sir please full playlist series of figma amazing tips
you have great knowledge
i have continue watch your video on linkendin
and last please sir subtitle on because your video is amazing who There are some people who do not know English so they look in their language
thanks sir
🙂🙂🙂🙂🙂🙂🙂🙂🙂🙂
Thanks
Information and useful content as always.. kudos to you Adrian 🙌.
Although I would like to ask is box model design is the only way to design developer friendly interfaces?
Thanks! It's the way to go, yes; otherwise, you place every layer and section in absolute positioning, which is a mess in terms of responsive design
At the very beginning of the video, when you resize the frame to a large screen size, your content does not continue to resize past a certain point. I am struggling with responsive design right now in that on large screen sizes, my content ends up being too wide. How can I set my content to stop resizing at a certain point so that only the margins get wider instead of the entire design on large screen sizes? Thank you so much for any help you can give me on this topic!!!!
Figma lacks batch operations, in this example it could be a function called "set all containers / frames to fill" for instance. Btw, much of this resizing business could be done with variables now.
How would you achieve the result where the content adjusts when the screen width is narrowed but the content stays centered when the screen width gets wider.. Up till now I’ve only found videos where its one or the other.. Is it possible?
GUAPO :)
So wouldn't you have to tell the developer at what pixel width the layout changes? Spacing/text sizes/image sizes get weird at certain pixel widths making the design look funky.
Why you gave 30 padding both side? I want to understand the reasons.
in this video bass is high plz decrease the bass all over the quality and tutorial is very helpful thankyou
Thank you very much for help me out to the hell . Appreciate your teaching.
Would love to see how to translate this into a real wesbite using framer
What is that microphone you're using, bro?
I have one question for responsive design!
For desktop, tablet and mobile all have different sizes of fonts, images and product cards then why nobody shows that in
tutorial?
Hi Adrian. Awesome video. Quick tip. Please avoid leaving extra space where you don't have to. some people have weak vision. :)
Yeah for sure. For a real website project I would add a max-width breakpoint at 1920px for 2k+ resolutions. Figma is not yet there with responsive breakpoints so that's just one use case for smaller desktop devices :)
@@uiadrian I meant that your frame is too zoomed out
bro you look like AB d villiers
Can u make full landing page responsive tutorial it will be very helpful
There's a 3-hour long module in my Figma Mastery course about designing a full responsive LP from scratch but I'll try to create a smaller crash course later this year!
Name of your course? And from where I can get it
When resizing from Desktop to iPad or Mobile, you change the frames or auto layouts manually, you must use constraints (left + right), which will greatly help.
Everything is nested into an auto layout frame, so there are no constraints, just alignment settings. If you download the figma files from my latest tutorial and follow this tutorial you'll see it yourself :)
@@uiadrian yes but the parent should have a left and right constraints, it worked for me, just try it
Interested ✍
Good to know! I'll start working on a follow up 👍
please share this file
Exact grid in mobile app and for website???
It's standard - 1440px for web and 375 for mobile
@@uiadrian thankyou so much
you use keyboard shortcuts and you speak quickly, i'm scattered, I can't follow
You did in 10 minutes cause of experience
im so lost 😂
give me your file lik
Godbless you. Thank you