Тёмный

Make an Entire Layout Responsive in Figma - In 10 Minutes 

Подписаться
Просмотров 223 тыс.
% 6 889

Want to learn UI/UX? designcourse.com​​​​​​​​​
-- Written tutorial: designcourse.com/blog/post/figma-constraints-tutorial
-- Today, we're going to step into Figma and I'm going to show you how to structure your layouts properly using a combination of constraints and auto-layout. This will make your life as a designer much easier, as it makes creating mobile variations super fast.
Starter project file:
www.figma.com/file/y1lCCgHy4lHTBFwFoGzIRT/Responsive-Layout-Tutorial?node-id=0%3A1
(Copy the frame and paste it in a new Figma document to edit it)
Visit the following link to download (free) the “JavaScript Illustration” graphic to use in this project:
lukaszadam.com/illustrations?ref=designcousre
0:00 - Introduction
1:04 - Navigation
2:31 - Heading & Subheading
3:45 - The Cards
5:15 - The Footer
5:50 - Tablet Design
7:40 - Mobile Design
Let's get started!
#figma #responsive #ui
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: designcoursecom
Join my Discord! discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

 

26 окт 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 156   
@DesignCourse
@DesignCourse 2 года назад
Question: How many of you integrate Webflow as a part of your design process? Do you also use Figma?
@ayoazeez390
@ayoazeez390 2 года назад
Me!😃 I use Figma
@traviaroad_7
@traviaroad_7 2 года назад
Yes!!! I have use Figma
@mikhail2876
@mikhail2876 2 года назад
I use Figma for most of my projects. Webflow only works in specific scenarios aka anything that doesn't need extensive blogging features.
@cleavonamidiagbe527
@cleavonamidiagbe527 2 года назад
From figma to webflow...will really love a webflow tutorial from you...
@taariqq
@taariqq 2 года назад
This is "the" question I am interested in. There are drawbacks to Webflow! You can export the code, even in the free plan, but you can't import!!
@_Perf
@_Perf 2 года назад
_Quick tip_ : to avoid adding objects to the frame or vice versa - just hold the *space key* while moving it with your mouse.
@MohitManoj
@MohitManoj 2 года назад
Holy shit thank you.
@_Perf
@_Perf 2 года назад
@@MohitManoj you welcome mate ;-)
@hilmy7105
@hilmy7105 2 года назад
this is tip useful
@areejsa6576
@areejsa6576 Год назад
wow thanx
@ajottamdas
@ajottamdas Год назад
Thankyou very much. Very useful indeed.
@EricMalek
@EricMalek Год назад
your hard work is beyond appreciated! I remember the days when we had to read books for our information and the questions weren't always addressed. Great stuff!
@nirajpatel1868
@nirajpatel1868 2 года назад
This is amazing. Quite a time saver. Thank you for this tutorial.
@jswanson859
@jswanson859 2 года назад
Great simple tutorial. I needed this right now. I also like when you keep the mistakes in on the phone version. Because, that's what happens sometimes and you have to figure out what went wrong. It's all part of the process.
@FilippoVicari
@FilippoVicari 2 года назад
I always looked at that portion of Figma without understanding how it worked, now it's everything clear. Than you very much! Btw I sincerely recommend the UI/UX course, I'm half way through and I alredy achieved many significant progress, so thank you very much Gary!
@Norell88
@Norell88 2 года назад
Super content, as always. The timing is perfect. Thanks bro.
@badjazz6515
@badjazz6515 Год назад
Very useful. Straight to the point. Easy to understand. Well done.
@mohyel-dintawfik7687
@mohyel-dintawfik7687 2 года назад
Great simple and easy the simplest explanation for the Responsive layout in FIGMA thank you so much !
@ct11002000
@ct11002000 Год назад
That was so helpful. Thank you so much! I need always remember layout grid, auto layot, constraints, hug and fill container.
@faloza
@faloza 2 года назад
This tutorial is absolutely mental!!! Thanks a lot!!!!
@jab9618
@jab9618 2 года назад
this video is amazing, thanks for sharing these tecniques!
@gayathrip1444
@gayathrip1444 4 месяца назад
Awesome!!!. This is the first video that i could understand and finish completely after going through so many failed videos. This one is very understandable. Thank you so much!!
@emmanueltolani7243
@emmanueltolani7243 Год назад
I love this tutorial so much. So Easy to follow.
@annaszumska1218
@annaszumska1218 Год назад
This is the best tutorial I've seen so far
@ahmed3261
@ahmed3261 Год назад
Love how you just go straight to the point ! Thanks buddy. Can you share some tips of how to choose the best grid systems?
@nazaradana1252
@nazaradana1252 Год назад
you just completely changed my life right now
@_Shahab_
@_Shahab_ Год назад
Simple, easy, fast and understanding.! Thanks
@MalewiczHype
@MalewiczHype 2 года назад
I have a couple of problems with how auto-layout well ... auto-layouts stuff ;-) For a lot of the things we do we use optical alignment (even if developers have a little extra work) and auto-layout often aligns text in containers not completely "in the center", especially vertically. Constraints are however VERY useful in all design tools. :-) But of course for quick mocks for developers it's a great way and the tutorial is super helpful 🙌
@abeerqamer9017
@abeerqamer9017 2 года назад
Hey man good to see another person from the YT community here 🙌
@mohyel-dintawfik7687
@mohyel-dintawfik7687 2 года назад
oczywiscie
@gloomycotton
@gloomycotton 2 года назад
THIS IS SO HELPFUL OMG THANK U!
@scottfwalter
@scottfwalter 2 года назад
Top notch tutorial!
@zacbrayy
@zacbrayy 4 месяца назад
such a brilliant explanation, thank you!
@kitchen8__
@kitchen8__ 2 года назад
Great Quick tutorial!
@cassius.giorgio
@cassius.giorgio Год назад
Wowwww great! Nice to learn, thanks for sharing
@creatoratplay
@creatoratplay Год назад
This was really helpful. Thank you!!
@quilon1093
@quilon1093 2 года назад
Great tutorial!
@redqueengaming6
@redqueengaming6 Год назад
A very nice video, thank you for making it so easy to learn with things that actually work and the video was short. Also it was good that things went wrong at the end of the video lol
@KT-sb1ht
@KT-sb1ht Год назад
straight to point and easy tips using figma to make responsive website, Thanks
@sirjavic
@sirjavic Год назад
great vid dude. thanks
@streetdancerwar
@streetdancerwar 2 года назад
Amazing, thanks for sharing.
@revanthvenkat1510
@revanthvenkat1510 2 года назад
Good one ❤️ Need more videos on responsive topic
@PrincePaulAdeba
@PrincePaulAdeba 6 месяцев назад
Easy steps. Easy process. Thanks a lot for this wonderful video
@nikhilgoyal007
@nikhilgoyal007 Год назад
Love it! thanks!
@itunumary7962
@itunumary7962 2 года назад
Thank You... Learnt a great deal
@mohitsharmaee7155
@mohitsharmaee7155 Год назад
I was trying to fix a problem from past 3 hours . This video helped me. My dumbass was missing 'fill container ' option and messing up responsiveness . This video helped me. Thanks Man. Subed.
@VinodNanaiah
@VinodNanaiah Год назад
Excellent...thanks!
@9989479192
@9989479192 Год назад
Super Bro... You're Awesome!
@matteoceredi559
@matteoceredi559 2 года назад
Thank you for sharing this kind of content!! HIGH CLASS as always! ✈
@nicetomeetugaming7024
@nicetomeetugaming7024 2 года назад
Amazing video sir!
@sachiupasani4768
@sachiupasani4768 Год назад
tremendously helpful video
@jinrilidong
@jinrilidong 2 года назад
Very useful, Thanks.
@farnazzahedi6043
@farnazzahedi6043 Год назад
Great, thanks 🙏
@mirakuheba3010
@mirakuheba3010 Год назад
this is really helpful, thanks
@marjan5170
@marjan5170 2 года назад
OMG! THANK YOU SO MUCH! This is amaziiiiiiing 🤩😁😁😁😁😁😁😁
@anupkaushik9370
@anupkaushik9370 Год назад
Thanks for this responsive tutorial
@nashleygaile8174
@nashleygaile8174 Год назад
Awesome content! It's actually helpful when you mess things up a bit. So we'll know what to do when that happens to us :>
@mhgroundstudio
@mhgroundstudio 2 года назад
Really Great 💞
@chriscarton4728
@chriscarton4728 2 года назад
Awesome awesome stuff.
@user-bb6uv4kk9n
@user-bb6uv4kk9n 3 месяца назад
Great thanks!
@kuldeepjaswal4655
@kuldeepjaswal4655 7 месяцев назад
very nice video..cheers!
@emmanueltolani7243
@emmanueltolani7243 Год назад
Super helpful
@abuzarkhan238
@abuzarkhan238 2 года назад
you are awesome bro..
@TK-wp3iw
@TK-wp3iw 3 месяца назад
Thank you 😢❤
@hitmonRay
@hitmonRay Год назад
is it better to start designing for various screen sizes at the wireframe level? Or is it better to complete the first design up to high-fidelity and then work on other screen sizes?
@tanmai5785
@tanmai5785 2 года назад
Super!
@theisoj
@theisoj 2 года назад
Thanks 👍
@traviaroad_7
@traviaroad_7 2 года назад
High Level Tutorial
@yasirarafat4188
@yasirarafat4188 Год назад
thanks for help.
@soumiabelarbi3102
@soumiabelarbi3102 Год назад
Hello , thanks for the tutorial, just one question please, How about the icons when they are grouped what other elements and I do auto layout they lose their shape! what should I do?
@santi7085
@santi7085 2 года назад
Tip: there is no necessary to frame the selections when you already have 2 or more autolayout frames, just Shift+A to make another one
@thomasd1076
@thomasd1076 Год назад
Anyone find an updated version of this? Having some trouble since the figma updates, make this video a bit outdated.
@mouradhamoud1495
@mouradhamoud1495 2 года назад
Thank you
@JanenarongKundernENEE
@JanenarongKundernENEE 2 года назад
wow awsome
@Ninjajitsu562
@Ninjajitsu562 Год назад
i love you mate
@matthewhyslop5213
@matthewhyslop5213 2 года назад
In this video none of the objects are rescaling in size. When designing a mobile app this is what you want to do. When I switch between frame sizes for iPhone 13 to iPhone SE etc. I want wireframes to be able to scale proportionally with objects changing size proportionally and everything repositioning so it always looks the same between different phone screens. I can only achieve repositioning using auto layout and constraints, but not changing anything in size. As far as size adjustment, I am able to maintain an aspect ratio on images and objects using auto layout and variants, but I am not able to do what I want to the full extent. I want it so what you see on an iPhone 13 Pro Max is the same as what you see on an iPhone SE, with everything adjusting size and position. Just like when you use the scale feature. But I want wireframes to do that automatically as I switch between frame sizes. Help. HOW do I do this?
@soofiakarolina
@soofiakarolina Год назад
Have you found a solution on this problem Matthew?
@Sponsi_PL
@Sponsi_PL Год назад
A little complex... BTW If you want to change the texts, every object is on its own? Or can you use components and then have the possibility to quickly change content of the boxes?
@NadaMartin
@NadaMartin Год назад
hi! what if my top navigation is in the group? cause i need to add shadow on it. so i couldnt ungroup that and try ur tutorial. any suggestions for this ? thankyou!
@anthonycarey7209
@anthonycarey7209 Год назад
Watching this and trying to auto layout my own design and most of th pertinent features from the update in this video NO LONGER EXIST in Figma. I can't find a single video anywhere on youtube that uses the most recent update. Can anyone help?
Год назад
I still have a question: the text inside card and the yellow icon are also in fill container? in hug? I a still confused with that. Thank you so much Gary!!! I am learning a lot from you!
@taariqq
@taariqq 2 года назад
Notice the Smashing mag article in the tab "useful figma plugins" :)
@dominikknapik7990
@dominikknapik7990 5 месяцев назад
Is it possible to have three containers stack vertically when you collapse to smaller frame.
@user-xt5tb7pt2u
@user-xt5tb7pt2u 7 месяцев назад
Is there any way to do all this without having to duplicate another frame? I've been using Axure RP for 3 years so I guess I'm spoiled on a responsiveness toggle. But, I wonder why figma doesn't have the same kind of quick click between sizes within the a frame.
@proventurkey
@proventurkey Год назад
How can I export this as HTML and CSS code including the breakpoints?
@zahidshaikh3122
@zahidshaikh3122 2 года назад
nice TV Collection
@mustafahammouz6018
@mustafahammouz6018 2 года назад
8:59 You can click and hold the element you want to add to an artboard then hold SPACE so you can added in top of any frame without having this issue in 8:59
@fcallophoto
@fcallophoto 2 года назад
For a very long time I've been doing this in my projects until I found the Breakpoints plugin which works exactly the same, the only difference is the plugin automatically changes the responsiveness of the frame. You set the breakpoints and then it "automatically" changes them. Yes, "automatically" because you still need to do what's shown here in the video. The day a plugin makes automatic responsive designs using responsive criteria, that's it, I'm out.
@tamargachechiladze8817
@tamargachechiladze8817 2 года назад
name of this plugin PLS
@omerats96
@omerats96 2 года назад
@@tamargachechiladze8817 Breakpoints bruh
@condemime1
@condemime1 2 года назад
thanks
@yoyoz333
@yoyoz333 2 года назад
the features and UI with constraints have changed in 2022, so some of your instructions aren't available anymore. Any idea on this?
@ed1nh0
@ed1nh0 Год назад
0:10 Dude that finger on screen!! hahahahahaha that's me all time!
@raziuldev
@raziuldev 2 года назад
Things are simple but only if you know 😍
@alexlindroos828
@alexlindroos828 Год назад
This doesn't seem to work the same way after a few hefty updates from Figma. Both the hug/fill procedure is different, and when duplicating the cards for the tablet version it just squeezes in another set of cards below, which in turn makes the six cards half the size vertically as they all share the same auto-layout constraints size wise. Good stuff anyways, but an updated tutorial would be solid if you have the time!
@sirrooster1541
@sirrooster1541 Год назад
Same for me. When I try doing anything he said in the video, my rectangles just get huge or my text overflows.
@thomasd1076
@thomasd1076 Год назад
Did you find a video that helped you post update? Struggling with the same thing.
@thomasd1076
@thomasd1076 Год назад
@@sirrooster1541 Did you find a video that helped you post update? Having trouble with the same thing.
@sirrooster1541
@sirrooster1541 Год назад
@@thomasd1076 It's been so long I don't even remember, sorry.
@smilli6415
@smilli6415 2 года назад
every time I use auto layout it aligning my text to left from centre.. how can this be fixed thanks
@murphyandmurphybrand
@murphyandmurphybrand Год назад
So do you have to create a new artboard for each device? Can you not create one artboard that's responsive?
@toha127
@toha127 Год назад
Cant you apply auto layout without framing first?
@mr.chinaski2613
@mr.chinaski2613 2 года назад
There is a plugin for this as I remember where you can set "thresholds" for sizes and it changes the content autamically after you reach the size.
@abeerqamer9017
@abeerqamer9017 2 года назад
Breakpoint is the name i think
@jordanroywhite
@jordanroywhite Год назад
@@abeerqamer9017 Thanks! I've been looking for a way to do this!
@kiddozcollection
@kiddozcollection 2 года назад
I can get it to this point. Where it's responsive.. but when I change to the different prototyping it loses it responsiveness. Is this normal? And do I need to worry about it before I hand off to a coder?
@N7__7
@N7__7 Год назад
Bro is a big fan of fabriziorom "HERE WE GO 🚨"
@simonblanco6716
@simonblanco6716 Год назад
why when I set a auto layout min 2:47 the hug and constraints and resizing doesn't show up in my figma
@kaurmanjot
@kaurmanjot Год назад
I am currently learning web development. Should I learn designing on figma or go with backend development ❓
@simonwills8196
@simonwills8196 Год назад
Hi Garry no matter what I do I can't seem to get the constraints and resising menu to appear (Scaffolding a New Economy/join us........ ) If you have time to respond I would be gratfull 😊
@dadou9590
@dadou9590 2 года назад
You can hold space why moving an element on top of a frame so it doesnt move into the frame
@sarariosochoa2264
@sarariosochoa2264 Год назад
Heyyy hahahah good solution, thanks for the video! min 10:29
@marcobarrella7657
@marcobarrella7657 2 года назад
amazing tutorial 🥲
@oakword0442
@oakword0442 Год назад
💜💜💜💜💜
@altifyx_
@altifyx_ 8 месяцев назад
i don't have the constraints option
@tailofahippopotamus9775
@tailofahippopotamus9775 2 года назад
I've stopped using groups. Apart from being responsive using frames makes it so much easier to make changes to the layout.
@justingolden21
@justingolden21 2 года назад
One of your better vids, and you have a LOT of good ones : )
@slashslash92
@slashslash92 2 года назад
LOOOOL 0:09
@thedesignguy1241
@thedesignguy1241 Год назад
I swear my Figma controls are different... It really throws me for a loop, especially while still considering myself a "n0ob" with the software.
@SzabatDesign
@SzabatDesign 2 года назад
January 4th is my birthday 🥳 Can I count on a discount for the course on this occasion? 💪