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! 🤓
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!!
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. 🤗🍀👍
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?
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! ☀️🙏🏻💛 th-cam.com/play/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI.html
This is ever video of responsive on TH-cam. 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 TH-cam, 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!!
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 🙏
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.)
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!
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 ☀️🙏🏻
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
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 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 ☀️🙏🏻💛
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* - th-cam.com/video/Akj0TvfUlmc/w-d-xo.html ☀️🙏🏻💛
3 หลายเดือนก่อน
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.).
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 🤔
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 ☀️🙏🏻💛
3 หลายเดือนก่อน
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"! ☀️🙏🏻💛
3 หลายเดือนก่อน
@@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 ;)
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. ☀️🙏🏻💛
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☀️🙏🏻💛
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. ☀️🙏🏻💛
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! ☀️🙏🏻💛
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! 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. ☀️🙏🏻
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. ☀️🙏🏻💛
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 - th-cam.com/video/fB-4ikrt3mk/w-d-xo.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?
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. ☀️🙏🏻
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?
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 ☀️🙏🏻💛
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?
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 ☀️🙏🏻💛
![F.HERO Ft. JSPKK x ลำไย ไหทองคำ x M-PEE - ไม่สนิทบิดหมด (Thai Riders Anthem) [Official MV]](http://i.ytimg.com/vi/kPJZ0UihBfk/mqdefault.jpg)
![⭐️( ลอยกระทง 2024 ) Ver. แดนซ์ Remix BY [ ดีเจกิต รีมิกซ์ ]](http://i.ytimg.com/vi/rMWOLhgXUHc/mqdefault.jpg)
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! 🤓
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! ☀️🙏🏻💛
hey..your videos are really helpful and detailed...and great way of explaining...want more detailed videos..on design system and best practices..
Very good explained. 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 ☀️🙏🏻💛
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?
@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... ☀️🙏🏻💛
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! ☀️🙏🏻💛
th-cam.com/play/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI.html
That was so useful! I keep watching and practicing, thank you so so much!
You're welcome! ☀️🙏🏻💛
awesome!!! keep it up!
This is ever video of responsive on TH-cam. I saw responsive constraint with grid video on figma YT but couldn't understand well.
But you well teach us. ❤
Glad it helped! ☀️🙏🏻💛
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! ☀️🙏🏻💛
This tutorial is gold, thank you so much for teaching us these useful tricks!
You're very welcome! ☀️🙏🏻💛
Love this tutorial! thank for this, explaning responsive layouts using variabless. Thank you a lot!.
You're very welcome! ☀️🙏🏻💛
There are many videos on TH-cam, 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! ☀️🙏🏻💛
You are a blessing! I have followed your figma series and thanks to that I am now hired
Awww how great to hear! Congrats! ☀️🙏🏻
You're such a good teacher that your videos are addictive. Seriously!
Thanks! ☀️🙏🏻💛
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 ☀️🙏🏻
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 ☀️🙏🏻💛
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
This is so so good and nicely explained! Thx a lot
You're welcome! ☀️🙏🏻💛
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're amazing as always😍💞💕
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!
Thank you so much! ☀️🙏🏻💛
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!
Brilliant tutorial! I've been trying to work out how to achieve this with my designs. Very well explained.
Thanks! Im glad it helped! ☀️🙏🏻💛
Best responsive design video! 🤩
aww 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
one of the best advanced tut !!!!!!! Subscribed :)
Thanks! ☀️🙏🏻💛
🙏🏽 thank you, very useful as usual!
☀️🙏🏻
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 🫡😇
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! ☀️🙏🏻💛
your videos are very informative ❣
Thanks! ☀️🙏🏻💛
Thank you ❤
You're welcome! ☀️🙏🏻💛
Such great timing (at least for me)! Thanks @TD Sunshine!
Thank you! ☀️🙏🏻💛
Great tutorial! Thanks.
You're welcome! ☀️🙏🏻💛
n1 on TH-cam by far 🙏🤝
aww thanks! ☀️🙏🏻💛
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 ☀️🙏🏻💛
You are sooo talented!
Thanks! ☀️🙏🏻
you are best of the best! thanks for all of your videos! waiting for new one
You're welcome! ☀️🙏🏻💛
great content as always ☀
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?
Thank you for your tutorials!
☀️🙏🏻💛
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! ☀️🙏🏻
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, 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* - th-cam.com/video/2DpDh1CyzPg/w-d-xo.html
good lecture, you made it look easy !!
Glad it helped! ☀️🙏🏻
You're a fucken legend! seriously big props to you!!
Thanks! ☀️🙏🏻
This is an amazing video
Thank you! ☀️🙏🏻
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* - th-cam.com/video/Akj0TvfUlmc/w-d-xo.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.).
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 ☀️🙏🏻💛
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 ;)
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 th-cam.com/video/-x2vlUx54Yw/w-d-xo.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. ☀️🙏🏻💛
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☀️🙏🏻💛
Great Video ..... I was waiting for this video Thank you sunshine ☀
You're welcome! ☀️🙏🏻💛
Awesome, thanks for sharing 👍😊
☀️🙏🏻💛
this is so helpful tnx
You're welcome! ☀️🙏🏻💛
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. ☀️🙏🏻💛
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! ☀️🙏🏻💛
Comment #2: This is really valuable lesson!
Thanks! ☀️🙏🏻💛
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. ☀️🙏🏻💛
Hey Which mouse do you use for the editing?
Hi! I use a combination of apple trackpad and victsing wireless mouse ☀️🙏🏻
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! ☀️🙏🏻
Very nice job
Thanks ☀️🙏🏻💛
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!
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 - th-cam.com/video/fB-4ikrt3mk/w-d-xo.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 👍👍
thank you bohoooowaaateeehhhh..
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. ☀️🙏🏻
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 ☀️🙏🏻💛
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. ☀️🙏🏻
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! ☀️🙏🏻
Awesome!
☀️🙏🏻
Do you have completed course where you can learn the completed project.
Hey! I have a Figma 101 complete course (th-cam.com/video/BPbJx9H4voM/w-d-xo.html
) and I'm working on a more advanced one too ☀️🙏🏻💛
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 ☀️🙏🏻💛
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 - th-cam.com/video/5EN2Stgg52g/w-d-xo.html ☀️🙏🏻💛
@@TDSunshine Just did that and it worked beautifully. Thank you so much Tair 🫶🏼
@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?
You can find the file in the video description ☀️🙏🏻
Hopefully, we have a tutorial about table
Great idea! adding to my list! ☀️🙏🏻
@@TDSunshine love ❤️
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 ☀️🙏🏻
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.
what you need to do is change from desktop first to mobile first then all your problems will be easily fixed
Great tip! ☀️🙏🏻
#livinglegend
hahah thanks! ☀️🙏🏻💛
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 ☀
☀️🙏🏻