Make an Entire Layout Responsive in Figma

Make an Entire Layout Responsive in Figma - In 10 Minutes

Рет қаралды 224,566

Күн бұрын

Want to learn UI/UX? designcourse.com
-- Written tutorial: designcourse.com/blog/post/fi...
-- 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/y1lCCgHy4l...
(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?...
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
^-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!

Пікірлер: 157

@DesignCourse 2 жыл бұрын

Question: How many of you integrate Webflow as a part of your design process? Do you also use Figma?

@ayoazeez390 2 жыл бұрын

Me!😃 I use Figma

@traviaroad_7 2 жыл бұрын

Yes!!! I have use Figma

@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 2 жыл бұрын

From figma to webflow...will really love a webflow tutorial from you...

@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 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 2 жыл бұрын

Holy shit thank you.

@_Perf 2 жыл бұрын

@@MohitManoj you welcome mate ;-)

@hilmy7105 2 жыл бұрын

this is tip useful

@areejsa6576 Жыл бұрын

wow thanx

@ajottamdas Жыл бұрын

Thankyou very much. Very useful indeed.

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

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

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

@nirajpatel1868 2 жыл бұрын

This is amazing. Quite a time saver. Thank you for this tutorial.

@Norell88 2 жыл бұрын

Super content, as always. The timing is perfect. Thanks bro.

@badjazz6515 Жыл бұрын

Very useful. Straight to the point. Easy to understand. Well done.

@ct11002000 Жыл бұрын

That was so helpful. Thank you so much! I need always remember layout grid, auto layot, constraints, hug and fill container.

@mohyel-dintawfik7687 2 жыл бұрын

Great simple and easy the simplest explanation for the Responsive layout in FIGMA thank you so much !

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

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

@faloza 2 жыл бұрын

This tutorial is absolutely mental!!! Thanks a lot!!!!

@emmanueltolani7243 Жыл бұрын

I love this tutorial so much. So Easy to follow.

@nazaradana1252 Жыл бұрын

you just completely changed my life right now

@annaszumska1218 Жыл бұрын

This is the best tutorial I've seen so far

@_Shahab_ Жыл бұрын

Simple, easy, fast and understanding.! Thanks

@jab9618 2 жыл бұрын

this video is amazing, thanks for sharing these tecniques!

@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 2 жыл бұрын

Hey man good to see another person from the YT community here 🙌

@mohyel-dintawfik7687 2 жыл бұрын

oczywiscie

@KT-sb1ht Жыл бұрын

straight to point and easy tips using figma to make responsive website, Thanks

@gloomycotton 2 жыл бұрын

THIS IS SO HELPFUL OMG THANK U!

@revanthvenkat1510 2 жыл бұрын

Good one ❤️ Need more videos on responsive topic

@zacbrayy 5 ай бұрын

such a brilliant explanation, thank you!

@kitchen8__ 2 жыл бұрын

Great Quick tutorial!

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

@creatoratplay Жыл бұрын

This was really helpful. Thank you!!

@PrincePaulAdeba 7 ай бұрын

Easy steps. Easy process. Thanks a lot for this wonderful video

@scottfwalter 2 жыл бұрын

Top notch tutorial!

@streetdancerwar 2 жыл бұрын

Amazing, thanks for sharing.

@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

@itunumary7962 2 жыл бұрын

Thank You... Learnt a great deal

@9989479192 2 жыл бұрын

Super Bro... You're Awesome!

@sachiupasani4768 Жыл бұрын

tremendously helpful video

@cassius.giorgio Жыл бұрын

Wowwww great! Nice to learn, thanks for sharing

@quilon1093 2 жыл бұрын

Great tutorial!

@sirjavic Жыл бұрын

great vid dude. thanks

@VinodNanaiah Жыл бұрын

Excellent...thanks!

@anupkaushik9370 Жыл бұрын

Thanks for this responsive tutorial

@nikhilgoyal007 Жыл бұрын

Love it! thanks!

@farnazzahedi6043 Жыл бұрын

Great, thanks 🙏

@jinrilidong 2 жыл бұрын

Very useful, Thanks.

@marjan5170 2 жыл бұрын

OMG! THANK YOU SO MUCH! This is amaziiiiiiing 🤩😁😁😁😁😁😁😁

@mirakuheba3010 Жыл бұрын

this is really helpful, thanks

@nicetomeetugaming7024 2 жыл бұрын

Amazing video sir!

@user-bb6uv4kk9n 4 ай бұрын

Great thanks!

@kuldeepjaswal4655 8 ай бұрын

very nice video..cheers!

@mhgroundstudio 2 жыл бұрын

Really Great 💞

@emmanueltolani7243 Жыл бұрын

Super helpful

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

@matteoceredi559 2 жыл бұрын

Thank you for sharing this kind of content!! HIGH CLASS as always! ✈

@chriscarton4728 2 жыл бұрын

Awesome awesome stuff.

@abuzarkhan238 2 жыл бұрын

you are awesome bro..

@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

@TK-wp3iw 4 ай бұрын

Thank you 😢❤

@traviaroad_7 2 жыл бұрын

High Level Tutorial

@yasirarafat4188 Жыл бұрын

thanks for help.

@mouradhamoud1495 2 жыл бұрын

Thank you

@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

@theisoj 2 жыл бұрын

Thanks 👍

@JanenarongKundernENEE 2 жыл бұрын

wow awsome

@tanmai5785 2 жыл бұрын

Super!

@Ninjajitsu562 Жыл бұрын

i love you mate

@condemime1 2 жыл бұрын

thanks

@zahidshaikh3122 2 жыл бұрын

nice TV Collection

@taariqq 2 жыл бұрын

Notice the Smashing mag article in the tab "useful figma plugins" :)

@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 2 жыл бұрын

Breakpoint is the name i think

@jordanroywhite Жыл бұрын

@@abeerqamer9017 Thanks! I've been looking for a way to do this!

@kateryna5015 Жыл бұрын

You have the best tutorial ever! Very precise, short, clear. I watched another video for 30 minutes and you explained everything in 10 and I understood everything clearly. Thank you!!! ❤ I`m from Ukraine and try to get a job as ux/ui designer. Figma is a new tool for me. So, you help me a lot in this task. I`m very grateful that I can learn for free. 💛💙

@raziuldev 2 жыл бұрын

Things are simple but only if you know 😍

@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 Жыл бұрын

Have you found a solution on this problem Matthew?

@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 2 жыл бұрын

name of this plugin PLS

@omerats96 2 жыл бұрын

@@tamargachechiladze8817 Breakpoints bruh

@GangsterNerd1 14 күн бұрын

The middle finger killed me 😂

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

@ed1nh0 Жыл бұрын

0:10 Dude that finger on screen!! hahahahahaha that's me all time!

Жыл бұрын

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!

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

@justingolden21 2 жыл бұрын

One of your better vids, and you have a LOT of good ones : )

@dadou9590 2 жыл бұрын

You can hold space why moving an element on top of a frame so it doesnt move into the frame

@N7__7 Жыл бұрын

Bro is a big fan of fabriziorom "HERE WE GO 🚨"

@tailofahippopotamus9775 2 жыл бұрын

I've stopped using groups. Apart from being responsive using frames makes it so much easier to make changes to the layout.

@thomasd1076 Жыл бұрын

Anyone find an updated version of this? Having some trouble since the figma updates, make this video a bit outdated.

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

@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 Жыл бұрын

Same for me. When I try doing anything he said in the video, my rectangles just get huge or my text overflows.

@thomasd1076 Жыл бұрын

Did you find a video that helped you post update? Struggling with the same thing.

@thomasd1076 Жыл бұрын

@@sirrooster1541 Did you find a video that helped you post update? Having trouble with the same thing.

@sirrooster1541 Жыл бұрын

@@thomasd1076 It's been so long I don't even remember, sorry.

@SzabatDesign 2 жыл бұрын

January 4th is my birthday 🥳 Can I count on a discount for the course on this occasion? 💪

@sarariosochoa2264 Жыл бұрын

Heyyy hahahah good solution, thanks for the video! min 10:29

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

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

@calvinogood 2 жыл бұрын

10:20, change the illustration from group to frame.

@AfterTheNonSequitur 2 жыл бұрын

THANK you, that was bugging the hell out of me because it kept doing that.

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

@marcobarrella7657 2 жыл бұрын

amazing tutorial 🥲

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

@dominikknapik7990 6 ай бұрын

Is it possible to have three containers stack vertically when you collapse to smaller frame.

@user-xt5tb7pt2u 8 ай бұрын

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.

@smilli6415 2 жыл бұрын

every time I use auto layout it aligning my text to left from centre.. how can this be fixed thanks

@proventurkey Жыл бұрын

How can I export this as HTML and CSS code including the breakpoints?

@oakword0442 Жыл бұрын

💜💜💜💜💜

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