Out of so many tutorial out there, I started re-working mine at work using your method and honestly your tutorial are the clearest I ever watched. Subscribe!!
damn gurl... I wish all tutorials out there were like yours. 1. Absolute great pacing, not super slow, usually watch them at 2x speed because people take forever to explain something basic, but not with you! 2. Absolute killer content, and suuuper well explained 3. love how you test different content to make sure we understood the overall concept P=lease keep doing more tutorials!!! You really have a talent! and thank you, I learned super quick and easy!
You have no idea how much your tutorial helps me. I'm actually learning to become UX-Designer ! I struggled so much with responsivity ! And suddenly ! All so easy ! Thank you x 1000 🙏
Thanks for the great tutorial as always! You made it look so easy, but it took me some time to understand. I finally got it, though. The key was setting the min-max values for child elements and setting the parents to wrap in auto layout, then testing to see how they behave and adjusting accordingly. Since elements are usually nested, we have to work from the inside out to see if anything breaks. 🤗🍀👍
I just LOVE every video you post! Everything is so clear and well explained! I wish you could add a video about Dashboards, grid layout it will be so helpful!!
There are many videos on CZcams, but your work is very beautiful. I have started learning from your work again and have begun using it. Thank you "TD Sunshine 💋"
This is ever video of responsive on CZcams. I saw responsive constraint with grid video on figma YT but couldn't understand well. But you well teach us. ❤
As always great video! great idea to includes grids as well. I was working weeks on something similar. I use multiples of 8px for both elements and type sizes for easy match. Added a variables to make gap between components also responsive. I also made a small top bar with buttons to change variable modes easily in Prototype view (idea that comes from one of your videos of course!). The only thing that I regret a little is I started the collection with "mobile" mode, so now I've been forced to design mobile first everything which is not so bad... (I don't know why Figma doesn't let you move the order of the collections modes and my company doesn't want to pay Enterprise licences to have "first mode preference" feature).
oooo love the little bar to change modes! great idea! I agree I feel like the variables UI needs a bit of an update to allow swapping the modes! I didn't even know about this "first mode preference"! ☀️🙏🏻💛
Před měsícem
@@TDSunshine Yeap, I was reading all Figma's variable mode help and finally found that the only way to set a prefered mode is under an Enterprise licence. Now, if I want to start designing for desktop, I use a frame as base layer with "desktop mode" set on, so there is always a trick ;)
Great tutorial as always!! Could you post a playlist explaining apple design system explaining dimensions of each components like spacing, colors, typography and how it is used in apple apps.. It's so difficult to understand apple's design system
Good Job! But What if we create separate screens for each breakpoints using constraints and auto-layout and then applying plugin make it fully responsive, because the major challenge is to set up a navigation bar and hamburger icon in mobile and tablet view. what's your thought on this?
Great question! I show how I would make that swap for the navigation in this video - *Responsive design with variables and autolayout* - czcams.com/video/Akj0TvfUlmc/video.html ☀️🙏🏻💛
Před měsícem
I found a way to do a full responsive navigation bar using boolean variables to show/hide layers and those booleans variables are under a collection with mobile/tablet/desktop modes. We called "Collection Responsive" and put everything there (from breakpoint, margins, gutters, font sizes for Heading/Title/subtitle/body, gap for text and for components, corner radious, max/min canvas, etc.).
If you have modes then you will have a little change variable modes button in the appearance section if you are on UI3 but if you are on the old UI it will be next to Layer. ☀️🙏🏻💛
Yes! so in UI3 they added little headers in the design panel. BUT there is nothing new, so you can still find all of these things in the old design panel just maybe they look a bit different or are in a different order. ☀️🙏🏻💛
Yes sorry the new UI makes things a bit tricky to find if you are on the old version. You will find the variable modes in the same section where you would apply a layer blend mode in the old UI. ☀️🙏🏻💛
This video taught me a lot of new things but these are not applicable for components and variants. My cards and carousel images do not have the option to set minimum and maximum width since they are components and variables. The text cannot be set to variables since its in a text style (you have to detach style and set variable to font size, spacing etc.)
Styles and Variables are still a bit overlapping but you can set a variable to text and then make it into a style! and you can use max and min width on components and variants as long as they are in an auto layout ☀️🙏🏻💛
Once my variables have been set, grid values applied and i try to change mode from desktop 1440 to tablet the grid values change but the frame stays at 1440. In your example the frame size changes automatically from dt, tab and mobile when switching modes. Have i missed a step?
Yes! If you select a text element and go into the extra settings (will look like ... in the old UI) you will see an option there to truncate text, meaning the text will be truncated to the size of the textbox dynamically. ☀️🙏🏻
Thank you for posting this!, I was wondering, how do you set margin, columns and gutter if you only have the free version? I see it changes automatically as you set the variable desktop, tablet, smartphone but how can I achieve something similar? Thank you
What you can do is create different variables for each and maybe group them to make it easier to differentiate. and then you can swap them manually to achieve the different breakpoints☀️🙏🏻💛
Nice. I love the way you explain it. Sometimes a bit too fast for me, but I can rewind ;-) Thanks a lot. Are u using a new Figma interface? I didn't got it :-( At 12.50 - I have no option to set the Auto Layout to auto fill 🤔
how are you getting to the appearance and the layout tab? I've tried everything, even in the beta app and cannot figure out how you got to see that in the tab. I'm on pro and enterprise. any ideas?
Figma AI is still in limited beta so it's only available to some users. You can add yourself to the waiting list in the "?" on the bottom right of a Figma file! ☀️🙏🏻
I do not have the paid version so i have not been able to follow here :(,, if someone with not paid version was able to follow all those move let me know cause i struggle lol
You can still use variables and just swap them all manually between screen sizes. I would recommend grouping them to make it easier to tell between them ☀️🙏🏻💛
Out of so many tutorial out there, I started re-working mine at work using your method and honestly your tutorial are the clearest I ever watched. Subscribe!!
Thank you! ☀️🙏🏻💛
damn gurl... I wish all tutorials out there were like yours.
1. Absolute great pacing, not super slow, usually watch them at 2x speed because people take forever to explain something basic, but not with you!
2. Absolute killer content, and suuuper well explained
3. love how you test different content to make sure we understood the overall concept
P=lease keep doing more tutorials!!! You really have a talent! and thank you, I learned super quick and easy!
Very very helpful and you've got a great way of explaining concepts which have taken me ages to figure out - subscribed.
Love this tutorial! thank for this, explaning responsive layouts using variabless. Thank you a lot!.
You're very welcome! ☀️🙏🏻💛
You have no idea how much your tutorial helps me. I'm actually learning to become UX-Designer ! I struggled so much with responsivity ! And suddenly ! All so easy ! Thank you x 1000 🙏
yay! Im glad yo found it helpful ☀️🙏🏻💛
@@TDSunshine And today again ! Short - precise ! Thanks again
You're such a good teacher that your videos are addictive. Seriously!
Thanks! ☀️🙏🏻💛
Thanks for the great tutorial as always! You made it look so easy, but it took me some time to understand. I finally got it, though. The key was setting the min-max values for child elements and setting the parents to wrap in auto layout, then testing to see how they behave and adjusting accordingly. Since elements are usually nested, we have to work from the inside out to see if anything breaks. 🤗🍀👍
Yes! It's all about trail and error and figuring out which way works best for your project ☀️🙏🏻💛
I just LOVE every video you post! Everything is so clear and well explained! I wish you could add a video about Dashboards, grid layout it will be so helpful!!
Thanks!! I'll add it to my list ☀️🙏🏻💛
Thank you so much! This tutorial was the best amongst all. Small doubt : Why did you use Number variable for font instead of T-string variable?
There are many videos on CZcams, but your work is very beautiful. I have started learning from your work again and have begun using it. Thank you "TD Sunshine 💋"
You are very welcome! ☀️🙏🏻💛
This is ever video of responsive on CZcams. I saw responsive constraint with grid video on figma YT but couldn't understand well.
But you well teach us. ❤
Glad it helped! ☀️🙏🏻💛
Best responsive design video! 🤩
aww thanks! ☀️🙏🏻💛
great content as always ☀
🙏🏽 thank you, very useful as usual!
☀️🙏🏻
🔥🔥🔥 More variables, dont forget setup cards por favor
What do you mean by setup cards? 👀
@@TDSunshine you know the planning cards you do before videos that walks through what will be completed
Brilliant tutorial! I've been trying to work out how to achieve this with my designs. Very well explained.
Thanks! Im glad it helped! ☀️🙏🏻💛
Such great timing (at least for me)! Thanks @TD Sunshine!
Thank you! ☀️🙏🏻💛
As always great video! great idea to includes grids as well. I was working weeks on something similar. I use multiples of 8px for both elements and type sizes for easy match. Added a variables to make gap between components also responsive. I also made a small top bar with buttons to change variable modes easily in Prototype view (idea that comes from one of your videos of course!). The only thing that I regret a little is I started the collection with "mobile" mode, so now I've been forced to design mobile first everything which is not so bad... (I don't know why Figma doesn't let you move the order of the collections modes and my company doesn't want to pay Enterprise licences to have "first mode preference" feature).
oooo love the little bar to change modes! great idea! I agree I feel like the variables UI needs a bit of an update to allow swapping the modes! I didn't even know about this "first mode preference"! ☀️🙏🏻💛
@@TDSunshine Yeap, I was reading all Figma's variable mode help and finally found that the only way to set a prefered mode is under an Enterprise licence. Now, if I want to start designing for desktop, I use a frame as base layer with "desktop mode" set on, so there is always a trick ;)
your videos are very informative ❣
Thanks! ☀️🙏🏻💛
Thank you for your tutorials!
☀️🙏🏻💛
nice, clearly. I have a question: How using Text stype variable on local variable? How to use match ?
Thanks! I have a video about type variables here ☀️🙏🏻💛 - *Type and Gradient Variables* - czcams.com/video/2DpDh1CyzPg/video.html
Great tutorial as always!! Could you post a playlist explaining apple design system explaining dimensions of each components like spacing, colors, typography and how it is used in apple apps.. It's so difficult to understand apple's design system
Great idea! will add to my list ☀️🙏🏻💛
Good video i have learned soo much !😇🤗, but for the future videos will be good that we see Layers in left corner panel☺Little tip.
I prefer to zoom in on the panel that is more important for each bit of the video, if its not zoomed in it's hard to see what's going on there. ☀️🙏🏻
@@TDSunshine If its more important to you I understand 🫡😇
Good Job! But What if we create separate screens for each breakpoints using constraints and auto-layout and then applying plugin make it fully responsive, because the major challenge is to set up a navigation bar and hamburger icon in mobile and tablet view. what's your thought on this?
Great question! I show how I would make that swap for the navigation in this video - *Responsive design with variables and autolayout* - czcams.com/video/Akj0TvfUlmc/video.html ☀️🙏🏻💛
I found a way to do a full responsive navigation bar using boolean variables to show/hide layers and those booleans variables are under a collection with mobile/tablet/desktop modes. We called "Collection Responsive" and put everything there (from breakpoint, margins, gutters, font sizes for Heading/Title/subtitle/body, gap for text and for components, corner radious, max/min canvas, etc.).
Awesome, thanks for sharing 👍😊
☀️🙏🏻💛
Great Video ..... I was waiting for this video Thank you sunshine ☀
You're welcome! ☀️🙏🏻💛
Comment #2: This is really valuable lesson!
Thanks! ☀️🙏🏻💛
n1 on CZcams by far 🙏🤝
aww thanks! ☀️🙏🏻💛
Thanks for the video! hoow to change the frame size from desktop to tablet? ( can't find appearance section on my own?) thank you!
If you have modes then you will have a little change variable modes button in the appearance section if you are on UI3 but if you are on the old UI it will be next to Layer. ☀️🙏🏻💛
I guess this if for the new version of Figma with UI3. The "Layout " and "Appearance" is not showing on the old version. I'm on a Pro plan.
Yes! so in UI3 they added little headers in the design panel. BUT there is nothing new, so you can still find all of these things in the old design panel just maybe they look a bit different or are in a different order. ☀️🙏🏻💛
thank you bohoooowaaateeehhhh..
I dont have a "Layout" area to select breakpoint I just created, as shown in your example
Yep, me too.
You need to apply a variable first in order to see you variable modes
I found a work around as l am unfortunate not to have the UI3. This worked from me czcams.com/video/-x2vlUx54Yw/video.html
Yes sorry the new UI makes things a bit tricky to find if you are on the old version. You will find the variable modes in the same section where you would apply a layer blend mode in the old UI. ☀️🙏🏻💛
This video taught me a lot of new things but these are not applicable for components and variants. My cards and carousel images do not have the option to set minimum and maximum width since they are components and variables. The text cannot be set to variables since its in a text style (you have to detach style and set variable to font size, spacing etc.)
Styles and Variables are still a bit overlapping but you can set a variable to text and then make it into a style! and you can use max and min width on components and variants as long as they are in an auto layout ☀️🙏🏻💛
Once my variables have been set, grid values applied and i try to change mode from desktop 1440 to tablet the grid values change but the frame stays at 1440. In your example the frame size changes automatically from dt, tab and mobile when switching modes. Have i missed a step?
Awesome!
☀️🙏🏻
is there something similar to "clamp" in Figma for text?
Yes! If you select a text element and go into the extra settings (will look like ... in the old UI) you will see an option there to truncate text, meaning the text will be truncated to the size of the textbox dynamically. ☀️🙏🏻
Thank you for posting this!, I was wondering, how do you set margin, columns and gutter if you only have the free version? I see it changes automatically as you set the variable desktop, tablet, smartphone but how can I achieve something similar? Thank you
What you can do is create different variables for each and maybe group them to make it easier to differentiate. and then you can swap them manually to achieve the different breakpoints☀️🙏🏻💛
Very nice job
Thanks ☀️🙏🏻💛
I am not getting figma interface like yours.
could you please tell me.
Nice. I love the way you explain it. Sometimes a bit too fast for me, but I can rewind ;-) Thanks a lot. Are u using a new Figma interface? I didn't got it :-( At 12.50 - I have no option to set the Auto Layout to auto fill 🤔
It's in the dropdown menu _below_ the width value in the old UI, probably saying 'Fixed' before.
Thanks! yes the new UI have moved some stuff around 🤪 Hopefully we will all move to it soon and it will be easier to find stuff ☀️🙏🏻💛
#livinglegend
Hey Which mouse do you use for the editing?
Hi! I use a combination of apple trackpad and victsing wireless mouse ☀️🙏🏻
how are you getting to the appearance and the layout tab? I've tried everything, even in the beta app and cannot figure out how you got to see that in the tab. I'm on pro and enterprise. any ideas?
Figma UI3 is slowly being rolled out to all users. So make sure to check your Figma app is up to date and I'm sure you'll get it soon ☀️🙏🏻💛
I’m sorry but the link to upgrade my account didn’t work😢
It should take you to the pricing page on Figma.com where you can select a new plan ☀️🙏🏻
Hopefully, we have a tutorial about table
Great idea! adding to my list! ☀️🙏🏻
@@TDSunshine love ❤️
@TD Sunchine When we can access to figma ai ?
I have professional figma account but i don’t have the ai !!
I have the same case.
Figma AI is still in limited beta so it's only available to some users. You can add yourself to the waiting list in the "?" on the bottom right of a Figma file! ☀️🙏🏻
Is the Figma file for this video modified?
what you need to do is change from desktop first to mobile first then all your problems will be easily fixed
Great tip! ☀️🙏🏻
make one video for tables. bcz its soo confusing when trying to make products.
Tables are such a pain I agree! That's a great idea I will add it to my list ☀️🙏🏻💛
@@TDSunshine thanks actually your videos help me do a work more easy.
I do not have the paid version so i have not been able to follow here :(,, if someone with not paid version was able to follow all those move let me know cause i struggle lol
You can still use variables and just swap them all manually between screen sizes. I would recommend grouping them to make it easier to tell between them ☀️🙏🏻💛
Hey guys, dont forget to Like and subscribe TD Sunshine is just Amazing and she give us always amazing content ♥
Thanks! ☀️🙏🏻💛
great content as always ☀