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!!
I want to thank you for every single one of your videos, seriously, I am saving my semester and my teacher never explained figma and I was always ??? It is a very simple system but I don't even have the basics, but your videos have helped me a lot, seriously thank you very much for all the dedication. Greetings from Colombia! 🤓
Nice tutorial, very clear and simple understandable. Only one just an suggestion, if you could go little a bit slower in the video as I had to decrease video speed by 0.75. For the novice people it becomes little faster to understand. Otherwise very informative and clear to understand. Subscribed!
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. 🤗🍀👍
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 🙏
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!
I watched the video to the end and took the necessary notes about subject, so thank you very much Shine! I practiced with you and succeeded to do the same. That status made very happy me. Really, You explained so good to the subject. So i understood to logic of made responsive design and this video was referance me for other my design that i will. i wish you success in you're going to take videos. (Note : Still I'm learning to speak and write english with subtitles. If i did mistake, i'm sorry.)
This is ever video of responsive on RUclips. I saw responsive constraint with grid video on figma YT but couldn't understand well. But you well teach us. ❤
There are many videos on RUclips, but your work is very beautiful. I have started learning from your work again and have begun using it. Thank you "TD Sunshine 💋"
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!!
Hey I love this lecture! Can you pls elaborate more about variables? I have seen tons of lectures but no one is explaining it in depth. It will be really helpful if you can make one more lecture on it pls it will be nice 😊
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"! ☀️🙏🏻💛
4 месяца назад
@@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 ;)
awesome video! Super clear so it's easy to understand. I do have a question though. I don't have a subscription for figma so am not sure how to go about adding coloumn variables and margin variables so that it would auto change when I change from Desktop to Mobile. It seems I will have to manually do this? Or am I missing something?
If you don't have a professional plan you won't be able to add a mode to your variables but you can create different variables from desktop and mobile and then change manually ☀️🙏🏻
Hi Tair, thank you so much for your compact and clear tutorials. Your adjustments in the layout grid (around minute 3:30) are not available on my interface - so I can't set the type to stretch, for example. Around minute 5 you show two different behaviors of the rectangle. The rectangle in the grid behaves differently to the one in the frame without grid - in my case, both rectangle behave identically. Do you have a tip for me on how I can create the desired behaviour of the rectangle in the grid?
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* - ruclips.net/video/Akj0TvfUlmc/видео.html ☀️🙏🏻💛
4 месяца назад
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.).
Thank you so much. You make a lot of lives easier. Is there an option, where I change the width size manually and the other things are changing as well? So: When I change from desktop to mobile, then we are seeing also changes in other elements such as text sizes. But what if we don't want to change the size that way, but we want to change manually? So when we have a screen width bigger than let's just say 800, then the text size is changing automatically. Is this possible and how?
Great question! so there is a "scale" option in Figma (you can find it in the drop-down where the pointer is or just click K) and then you can change your frames size and everything inside grows accordingly, but if you want to set the values beforehand to specific sizes according to the screen size then variable modes are best ☀️🙏🏻💛
Great video 😍. Thank you.. I have a question, I'm working on a cross-platform project. That's why I use the Material Design 3 Grid layout system and some components from MD3 that I customized. Also, I didn’t use the MD3 typo and color system. I created different ones for my project. Do we need to create a specific design system to hand all this over to the developer? I don't understand how to organize it. Please make a video on this topic. It will be very helpful for such scenarios. Thank you . 🙏
Great questions! Will add it to my list :) there isn't one correct way around these things though, I think it's best to have a conversation with your devs and check what they need from you. If you are customising some MD3 components as well make sure to make that clear to them. I hope that helps ☀️🙏🏻💛
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 🤔
Thank you for your explanation. May I ask you how to do prototyping responsive design? We should do it each frames first (desktop, tablet, mobile) or we can do it just for one frames but it will relates with other frames? Or we're prototyping it each frames first (desktop, tablet, mobile) then in responsives frame it works for everything when we try it each frames? Sorry for my bad english, hope you understand what I mean. Thank you
Great question! The prototyping will carry across even if you change the mode / size. But there may be situations where you want different scrolling for different sizes so keep that in mind! ☀️🙏🏻💛
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☀️🙏🏻💛
I admit that I am just at 01:56 but how can you do it by setting in advance breakpoints that you don't know? I mean breakpoints were retrieved by "squeezing" the design, typically the largest, until it didn't, well, break, and that was a breakpoint view unrelated with the the type of device or anticipated breakpoints.
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. ☀️🙏🏻💛
Thanks! Free accounts don't allow modes so you sort of have to do it manually. I would create separate variables for the different sizes and make sure to group them (desktop/width, mobile/width, etc...) and then you assign all of them in your design and when you want to see a different screen size you will need to go in and manually replace all of them for the correct device BUT because you grouped them it will be easier to find because you can search by device name in the variable list. It's not the best but it's a workaround. ☀️🙏🏻💛
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. ☀️🙏🏻💛
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. ☀️🙏🏻💛
Hi, Im sure you did a video about how to create a dynamic e-commerce store using tokens? It had a collection page and when you clicked on a product the product page dynamically loaded that data? I think it was trainers. Could you post a link to the video here please? Thanks!!
Yes! this one - ruclips.net/video/fB-4ikrt3mk/видео.html. But I will say lots has changed since I created this. For example, you can now use "change variable mode" in prototyping and that would have been useful. Also, the UI is different since UI3 launched. The basics are still the same so still worth a watch ☀️🙏🏻💛
@@TDSunshine hey, got this working so thanks, but yes the set variable mode is a game changer, saves you doing that extra collection for the product page. So thanks again 👍👍
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?
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. ☀️🙏🏻
Hey! Is there a way to also automatically change variants when doing responsive? So if I want to use the mobile header instead of desktop for the mobile mode, can I do that with variables?
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?
dev mod kısmında sistem patlıyor :) dev mod aşamasında title font-size değerini tablet, desktop, mobile nasıl verecek? gerçi değer verebiliyoruz ancak tailwind gibi class atarsak sistem patlıyor.
Im not familiar with Tailwind but from what I know Devmode works well with variable modes and will show the actual properties and the name of the variable and the mode. ☀️🙏🏻
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! ☀️🙏🏻
hmm that didn't really tell us how Grid's work, but rather what happens when grid's are present and when they are not present. There is no prescriptive rational being shared.
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 ☀️🙏🏻💛
![Kodak Black - Versatile 4 [Official Video]](http://i.ytimg.com/vi/VcP_1Ua__vY/mqdefault.jpg)
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! ☀️🙏🏻💛
I want to thank you for every single one of your videos, seriously, I am saving my semester and my teacher never explained figma and I was always ??? It is a very simple system but I don't even have the basics, but your videos have helped me a lot, seriously thank you very much for all the dedication.
Greetings from Colombia! 🤓
Aww so happy you find it helpful! ☀️🙏🏻💛
Nice tutorial, very clear and simple understandable. Only one just an suggestion, if you could go little a bit slower in the video as I had to decrease video speed by 0.75. For the novice people it becomes little faster to understand. Otherwise very informative and clear to understand. Subscribed!
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 really enjoyed this video, learnt alot thanks!
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
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!
Thank you so much! ☀️🙏🏻💛
I watched the video to the end and took the necessary notes about subject, so thank you very much Shine! I practiced with you and succeeded to do the same. That status made very happy me. Really, You explained so good to the subject. So i understood to logic of made responsive design and this video was referance me for other my design that i will. i wish you success in you're going to take videos. (Note : Still I'm learning to speak and write english with subtitles. If i did mistake, i'm sorry.)
Thank you! I'm glad you found it helpful! ☀️🙏🏻💛
You are a blessing! I have followed your figma series and thanks to that I am now hired
Awww how great to hear! Congrats! ☀️🙏🏻
I'm so glad I discovered your channel channel it was the best thing that happened to me today (I'm a design nerd ❤💃✨).
aww yay! ☀️🙏🏻💛
Love this tutorial! thank for this, explaning responsive layouts using variabless. Thank you a lot!.
You're very welcome! ☀️🙏🏻💛
This is ever video of responsive on RUclips. I saw responsive constraint with grid video on figma YT but couldn't understand well.
But you well teach us. ❤
Glad it helped! ☀️🙏🏻💛
hey..your videos are really helpful and detailed...and great way of explaining...want more detailed videos..on design system and best practices..
That was so useful! I keep watching and practicing, thank you so so much!
You're welcome! ☀️🙏🏻💛
This tutorial is gold, thank you so much for teaching us these useful tricks!
You're very welcome! ☀️🙏🏻💛
There are many videos on RUclips, 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! ☀️🙏🏻💛
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 ☀️🙏🏻💛
This is so so good and nicely explained! Thx a lot
You're welcome! ☀️🙏🏻💛
You're such a good teacher that your videos are addictive. Seriously!
Thanks! ☀️🙏🏻💛
Very very helpful and you've got a great way of explaining concepts which have taken me ages to figure out - subscribed.
Glad it was helpful! ☀️🙏🏻💛
Brilliant tutorial! I've been trying to work out how to achieve this with my designs. Very well explained.
Thanks! Im glad it helped! ☀️🙏🏻💛
Hey I love this lecture!
Can you pls elaborate more about variables? I have seen tons of lectures but no one is explaining it in depth.
It will be really helpful if you can make one more lecture on it pls it will be nice 😊
Thanks! I have a whole playlist with variable videos and I'm filming a few more right now! ☀️🙏🏻💛
ruclips.net/p/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI
You're amazing as always😍💞💕
Thank you! ☀️🙏🏻💛
I really love the content ❤
Best responsive design video! 🤩
aww thanks! ☀️🙏🏻💛
you are best of the best! thanks for all of your videos! waiting for new one
You're welcome! ☀️🙏🏻💛
Such great timing (at least for me)! Thanks @TD Sunshine!
Thank you! ☀️🙏🏻💛
one of the best advanced tut !!!!!!! Subscribed :)
Thanks! ☀️🙏🏻💛
Very good explained. Thanks.
You're welcome! ☀️🙏🏻💛
n1 on RUclips by far 🙏🤝
aww thanks! ☀️🙏🏻💛
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 ;)
🙏🏽 thank you, very useful as usual!
☀️🙏🏻
your videos are very informative ❣
Thanks! ☀️🙏🏻💛
🔥🔥🔥 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
good lecture, you made it look easy !!
Glad it helped! ☀️🙏🏻
Thank you for your tutorials!
☀️🙏🏻💛
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?
I prefer to use number variables or the font size etc because they are number values ☀️🙏🏻
You are sooo talented!
Thanks! ☀️🙏🏻
Great tutorial! Thanks.
You're welcome! ☀️🙏🏻💛
awesome!!! keep it up!
Thanks! ☀️🙏🏻💛
great content as always ☀
Thanks! ☀️🙏🏻
awesome video! Super clear so it's easy to understand. I do have a question though. I don't have a subscription for figma so am not sure how to go about adding coloumn variables and margin variables so that it would auto change when I change from Desktop to Mobile. It seems I will have to manually do this? Or am I missing something?
If you don't have a professional plan you won't be able to add a mode to your variables but you can create different variables from desktop and mobile and then change manually ☀️🙏🏻
yes this, how does one change it manually? Like create 3 different page frames and copy paste?
@@carlainezespost Yeah exactly
Great Video ..... I was waiting for this video Thank you sunshine ☀
You're welcome! ☀️🙏🏻💛
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 🫡😇
Awesome, thanks for sharing 👍😊
☀️🙏🏻💛
Hi Tair, thank you so much for your compact and clear tutorials.
Your adjustments in the layout grid (around minute 3:30) are not available on my interface - so I can't set the type to stretch, for example. Around minute 5 you show two different behaviors of the rectangle. The rectangle in the grid behaves differently to the one in the frame without grid - in my case, both rectangle behave identically. Do you have a tip for me on how I can create the desired behaviour of the rectangle in the grid?
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 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* - ruclips.net/video/Akj0TvfUlmc/видео.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.).
Thank you ❤
You're welcome! ☀️🙏🏻💛
great video!
Thanks! ☀️🙏🏻💛
Thank you so much. You make a lot of lives easier. Is there an option, where I change the width size manually and the other things are changing as well? So: When I change from desktop to mobile, then we are seeing also changes in other elements such as text sizes. But what if we don't want to change the size that way, but we want to change manually? So when we have a screen width bigger than let's just say 800, then the text size is changing automatically. Is this possible and how?
maybe in dev mode? maybe its not relevant? Maybe not the right question? What would you say?
Great question! so there is a "scale" option in Figma (you can find it in the drop-down where the pointer is or just click K) and then you can change your frames size and everything inside grows accordingly, but if you want to set the values beforehand to specific sizes according to the screen size then variable modes are best ☀️🙏🏻💛
Comment #2: This is really valuable lesson!
Thanks! ☀️🙏🏻💛
Great video 😍. Thank you.. I have a question, I'm working on a cross-platform project. That's why I use the Material Design 3 Grid layout system and some components from MD3 that I customized. Also, I didn’t use the MD3 typo and color system. I created different ones for my project. Do we need to create a specific design system to hand all this over to the developer? I don't understand how to organize it. Please make a video on this topic. It will be very helpful for such scenarios. Thank you . 🙏
Great questions! Will add it to my list :) there isn't one correct way around these things though, I think it's best to have a conversation with your devs and check what they need from you. If you are customising some MD3 components as well make sure to make that clear to them. I hope that helps ☀️🙏🏻💛
@TD Sunshine, Missing your content. Hope you come back with new videos soon! 😊
Took a bit of a break for the summer but already working on new content! Stay tuned... ☀️🙏🏻💛
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 ☀️🙏🏻💛
This is an amazing video
Thank you! ☀️🙏🏻
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* - ruclips.net/video/2DpDh1CyzPg/видео.html
Thank you for your explanation. May I ask you how to do prototyping responsive design? We should do it each frames first (desktop, tablet, mobile) or we can do it just for one frames but it will relates with other frames?
Or we're prototyping it each frames first (desktop, tablet, mobile) then in responsives frame it works for everything when we try it each frames?
Sorry for my bad english, hope you understand what I mean. Thank you
Great question! The prototyping will carry across even if you change the mode / size. But there may be situations where you want different scrolling for different sizes so keep that in mind! ☀️🙏🏻💛
this is so helpful tnx
You're welcome! ☀️🙏🏻💛
You're a fucken legend! seriously big props to you!!
Thanks! ☀️🙏🏻
Very nice job
Thanks ☀️🙏🏻💛
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☀️🙏🏻💛
I admit that I am just at 01:56 but how can you do it by setting in advance breakpoints that you don't know?
I mean breakpoints were retrieved by "squeezing" the design, typically the largest, until it didn't, well, break, and that was a breakpoint view unrelated with the the type of device or anticipated breakpoints.
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. ☀️🙏🏻💛
Awesome!
☀️🙏🏻
Howdy, because of your amazing videos, I bought Figma, however, I can't see the appearance window, could you help me? Please
Thanks! Figma is in the process of rolling out UI 3 to all users so you should have it soon if you don't have it yet! ☀️🙏🏻
Hey Which mouse do you use for the editing?
Hi! I use a combination of apple trackpad and victsing wireless mouse ☀️🙏🏻
thank you bohoooowaaateeehhhh..
Hey this is amazing, please can you explain, if I'm using the free account how do I switch between the various design modes to see if its responsive?
Thanks! Free accounts don't allow modes so you sort of have to do it manually. I would create separate variables for the different sizes and make sure to group them (desktop/width, mobile/width, etc...) and then you assign all of them in your design and when you want to see a different screen size you will need to go in and manually replace all of them for the correct device BUT because you grouped them it will be easier to find because you can search by device name in the variable list. It's not the best but it's a workaround. ☀️🙏🏻💛
@@TDSunshine ah I see
Thanks so much for the quick reply! So so happy I found your channel!
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 ruclips.net/video/-x2vlUx54Yw/видео.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. ☀️🙏🏻💛
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. ☀️🙏🏻💛
Hi, Im sure you did a video about how to create a dynamic e-commerce store using tokens? It had a collection page and when you clicked on a product the product page dynamically loaded that data? I think it was trainers. Could you post a link to the video here please? Thanks!!
Yes! this one - ruclips.net/video/fB-4ikrt3mk/видео.html. But I will say lots has changed since I created this. For example, you can now use "change variable mode" in prototyping and that would have been useful. Also, the UI is different since UI3 launched. The basics are still the same so still worth a watch ☀️🙏🏻💛
@@TDSunshine brilliant I’ll check it out and look to adapt it using change variables 👍👍
@@TDSunshine hey, got this working so thanks, but yes the set variable mode is a game changer, saves you doing that extra collection for the product page. So thanks again 👍👍
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 ☀️🙏🏻💛
Do you have completed course where you can learn the completed project.
Hey! I have a Figma 101 complete course (ruclips.net/video/BPbJx9H4voM/видео.html
) and I'm working on a more advanced one too ☀️🙏🏻💛
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. ☀️🙏🏻
how didi you do the cards??????
I actually used Figma AI loads for them! ☀️🙏🏻
Hopefully, we have a tutorial about table
Great idea! adding to my list! ☀️🙏🏻
@@TDSunshine love ❤️
Hey! Is there a way to also automatically change variants when doing responsive? So if I want to use the mobile header instead of desktop for the mobile mode, can I do that with variables?
Yes there is! I show how to connect Variables and Variants in this video - ruclips.net/video/5EN2Stgg52g/видео.html ☀️🙏🏻💛
@@TDSunshine Just did that and it worked beautifully. Thank you so much Tair 🫶🏼
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 ☀️🙏🏻💛
Is the Figma file for this video modified?
You can find the file in the video description ☀️🙏🏻
I am not getting figma interface like yours.
could you please tell me.
My Figma is updated to UI3, it's slowly being released to all users. ☀️🙏🏻
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?
Make sure to connect the frames width to the width variable and have modes set up for it! ☀️🙏🏻
dev mod kısmında sistem patlıyor :) dev mod aşamasında title font-size değerini tablet, desktop, mobile nasıl verecek? gerçi değer verebiliyoruz ancak tailwind gibi class atarsak sistem patlıyor.
Im not familiar with Tailwind but from what I know Devmode works well with variable modes and will show the actual properties and the name of the variable and the mode. ☀️🙏🏻
@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! ☀️🙏🏻
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’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 ☀️🙏🏻
#livinglegend
hahah thanks! ☀️🙏🏻💛
what you need to do is change from desktop first to mobile first then all your problems will be easily fixed
Great tip! ☀️🙏🏻
hmm that didn't really tell us how Grid's work, but rather what happens when grid's are present and when they are not present. There is no prescriptive rational being shared.
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 ☀
☀️🙏🏻