Figma RESPONSIVE DESIGN using Variables, Layout grids and Auto Layout | Figma 2024

[@whyzytcg8873]

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

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@HARUN-AKSU]

Finally, I found the video I've been looking for for years. Thanks Tair 💮

[@TDSunshine]

aww yay! ☀️🙏🏻💛

[@whoosgabs]

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

[@TDSunshine]

Aww so happy you find it helpful! ☀️🙏🏻💛

[@ElementoryMyDearWatson]

This was a Figma life changing experience. Can't thank you enough.

[@TDSunshine]

You're welcome ☀️🙏🏻💛

[@cristianodig]

You're such a good teacher that your videos are addictive. Seriously!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@xoWHiteHaLox]

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

[@TDSunshine]

Thanks!! I'll add it to my list ☀️🙏🏻💛

[@djashawe88923]

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. 🤗🍀👍

[@TDSunshine]

Yes! It's all about trail and error and figuring out which way works best for your project ☀️🙏🏻💛

[@lualeaof]

This is so so good and nicely explained! Thx a lot

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@KaliLamyx]

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 🙏

[@TDSunshine]

yay! Im glad yo found it helpful ☀️🙏🏻💛

[@KaliLamyx]

@@TDSunshine And today again ! Short - precise ! Thanks again

[@nehatk-p3c]

Thank you for sharing this video! The way you simplified responsive design with variables is truly impressive and easy to follow. 😊

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@agustinfernandez8972]

Love this tutorial! thank for this, explaning responsive layouts using variabless. Thank you a lot!.

[@TDSunshine]

You're very welcome! ☀️🙏🏻💛

[@arjunjacob1505]

Very very helpful and you've got a great way of explaining concepts which have taken me ages to figure out - subscribed.

[@TDSunshine]

Glad it was helpful! ☀️🙏🏻💛

[@KathBorup]

I'm so glad I discovered your channel channel it was the best thing that happened to me today (I'm a design nerd ❤💃✨).

[@TDSunshine]

aww yay! ☀️🙏🏻💛

[@Busrayalciner]

That was so useful! I keep watching and practicing, thank you so so much!

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@soy.pauvolk]

This tutorial is gold, thank you so much for teaching us these useful tricks!

[@TDSunshine]

You're very welcome! ☀️🙏🏻💛

[@mielconejo]

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!

[@TDSunshine]

Thank you so much! ☀️🙏🏻💛

[@hajrasiddiqui684]

I really appreciate you, you made my learning super easy. Stay blessed dear good job🎉🎉🎉

[@TDSunshine]

Glad I could help ☀️🙏🏻💛

[@footyflair038]

You are a blessing! I have followed your figma series and thanks to that I am now hired

[@TDSunshine]

Awww how great to hear! Congrats! ☀️🙏🏻

[@BayrakGraphic]

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

[@TDSunshine]

Thank you! I'm glad you found it helpful! ☀️🙏🏻💛

[@NevillePalmer-hn8jx]

Brilliant tutorial! I've been trying to work out how to achieve this with my designs. Very well explained.

[@TDSunshine]

Thanks! Im glad it helped! ☀️🙏🏻💛

[@gulnisamirizade2994]

You're amazing as always😍💞💕

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@haroonrasheed3763]

There are many videos on KZbin, but your work is very beautiful. I have started learning from your work again and have begun using it. Thank you "TD Sunshine 💋"

[@TDSunshine]

You are very welcome! ☀️🙏🏻💛

[@tayyabsohail8823]

This is ever video of responsive on KZbin. I saw responsive constraint with grid video on figma YT but couldn't understand well. But you well teach us. ❤

[@TDSunshine]

Glad it helped! ☀️🙏🏻💛

[@savvaskontos3671]

one of the best advanced tut !!!!!!! Subscribed :)

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@malteahrens1336]

First of all, these Videos are the best and most comprehensible videos I have ever seen. And I’ve done stupid workshops for a lot of money that brought me less. So thank you for that already. But I have a question and haven’t found a solution so far. Is there a way in Figma to link texts between two frames, i.e., on the mobile and desktop view? So if I change the text in one place, it also changes in the other place?

[@TDSunshine]

Thanks! I'm glad you are enjoying the videos :) That's a great question! You have a few ways of approaching this. You could use variables to control your text so that way if you change the variable it will change anywhere that uses it (e.g both mobile and desktop). You could also use components for text so again if ou change the main component it will change in different places where it is used. Lastly, if you name your text nodes (aka text boxes) in specific ways I think you can use the multi edit tool to select them at the same time and edit them together ☀️🙏🏻💛

[@oelifzen]

Best responsive design video! 🤩

[@TDSunshine]

aww thanks! ☀️🙏🏻💛

[@sahilaelc3626]

🙏🏽 thank you, very useful as usual!

[@TDSunshine]

☀️🙏🏻

[@DeathGripper1337]

n1 on KZbin by far 🙏🤝

[@TDSunshine]

aww thanks! ☀️🙏🏻💛

[@nikopadayachi2594]

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?

[@TDSunshine]

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 ☀️🙏🏻

[@carlainezespost]

⁠yes this, how does one change it manually? Like create 3 different page frames and copy paste?

[@TDSunshine]

@@carlainezespost Yeah exactly

[@juttak767]

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?

[@TDSunshine]

Thanks! Make sure to change the rectangles constraints. In UI3 constraints are next to the X and Y position, click on the little button next to them and you will get the full constraints view. ☀️🙏🏻💛

[@icksv5529]

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.

[@TDSunshine]

hmmm good question! right now you can't really make dynamic breakpoints in Figma. But you can use this variable technique to create multiple ones along the way. ☀️🙏🏻💛

[@virajmovaliya4771]

Thank You So Much It will be really helpful 🙏❣

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@sourlito]

Hello, I followed your steps. I then created some variables for the footer. I created it using the same steps you shown in this video. After making sure the footer is fully responsive on all 3 modes. I converted it into a component. But when I insert in the landing page frame and resize frame accordingly, the footer does not resize and the variables are not changing. What I did? With in the collection (breakpoints), I created breakpoint for the footer spacing H and V padding. What am I doing wrong?

[@TDSunshine]

hmm it's hard to troubleshoot without seeing it but maybe something in the component is blocking it from changing. Also if you had the instance set to a specific mode and not "auto" when you change the frame that its in to a different mode it wont change. ☀️🙏🏻💛

[@sourlito]

@TDSunshine I'll double check. Thank you, love your tutorials

[@sourlito]

@@TDSunshine I figured it out. When creating responsive components, its ok to use the variables to check all device sizes, but one must disconnect those variables, in order for it to work with in the full frame, such as home, landing page etc.

[@capellaguitar]

Wow! This video is amazing! You're great, thanks so much for sharing your knowledge!

[@TDSunshine]

Glad you enjoyed it! ☀️🙏🏻💛

[@AnkitParmar-k8d]

hey..your videos are really helpful and detailed...and great way of explaining...want more detailed videos..on design system and best practices..

[@TDSunshine]

Thanks! will do ☀️🙏🏻💛

[@amybeke]

I really enjoyed this video, learnt alot thanks!

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@bjorngrauers]

great content as always ☀

[@TDSunshine]

Thanks! ☀️🙏🏻

[@ravipadhi12]

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!

[@TDSunshine]

Thanks! haha yes I know Im a fast speaker sometimes 🙈 ☀️🙏🏻💛

[@HumaIshtiaqHuma]

your videos are very informative ❣

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@dariadenisenko3829]

you are best of the best! thanks for all of your videos! waiting for new one

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@alexeinordic8774]

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 😊

[@TDSunshine]

Thanks! I have a whole playlist with variable videos and I'm filming a few more right now! ☀️🙏🏻💛 kzbin.info/aero/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI

[@gatw1977]

Thank you so much !

[@TDSunshine]

☀️🙏🏻💛

[@riveroflifeunited]

I dont have a "Layout" area to select breakpoint I just created, as shown in your example

[@marziz]

Yep, me too.

[@ViruX93]

You need to apply a variable first in order to see you variable modes

[@marziz]

I found a work around as l am unfortunate not to have the UI3. This worked from me kzbin.info/www/bejne/Y6mVp5-LrZpnj9k

[@TDSunshine]

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. ☀️🙏🏻💛

[@leephom5499]

You are sooo talented!

[@TDSunshine]

Thanks! ☀️🙏🏻

[@RAVIRANJAN55555]

Great Video ..... I was waiting for this video Thank you sunshine ☀

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@dianalama2744]

Thank you for your tutorials!

[@TDSunshine]

☀️🙏🏻💛

[@k16e]

Such great timing (at least for me)! Thanks @TD Sunshine!

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@Olalekan-qc9ym]

good lecture, you made it look easy !!

[@TDSunshine]

Glad it helped! ☀️🙏🏻

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

[@TDSunshine]

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 ;)

[@seymorebizz7950]

🔥🔥🔥 More variables, dont forget setup cards por favor

[@TDSunshine]

What do you mean by setup cards? 👀

[@seymorebizz7950]

@@TDSunshine you know the planning cards you do before videos that walks through what will be completed

[@HarishChouhan]

is there something similar to "clamp" in Figma for text?

[@TDSunshine]

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. ☀️🙏🏻

[@donorbrain]

Awesome! Thank you so much

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@marziz]

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.

[@TDSunshine]

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. ☀️🙏🏻💛

[@polo6465]

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?

[@TDSunshine]

Make sure to connect the frames width to the width variable and have modes set up for it! ☀️🙏🏻

[@NadaElshazly-o5b]

I really love the content ❤

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@alimo-studios]

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?

[@TDSunshine]

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 ☀️🙏🏻💛

[@carrieli1678]

Thanks for the video! hoow to change the frame size from desktop to tablet? ( can't find appearance section on my own?) thank you!

[@TDSunshine]

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. ☀️🙏🏻💛

[@BarryHall-v7w]

Great tutorial! Thanks.

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@akahatapuntocero]

how didi you do the cards??????

[@TDSunshine]

I actually used Figma AI loads for them! ☀️🙏🏻

[@bacy]

awesome!!! keep it up!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@sainandu41]

I am not getting figma interface like yours. could you please tell me.

[@TDSunshine]

My Figma is updated to UI3, it's slowly being released to all users. ☀️🙏🏻

[@hakansalih]

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.

[@TDSunshine]

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. ☀️🙏🏻

[@oZenakos]

Top tier tutorial thanks for making

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@Stefan-kl2pw]

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?

[@Stefan-kl2pw]

maybe in dev mode? maybe its not relevant? Maybe not the right question? What would you say?

[@TDSunshine]

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 ☀️🙏🏻💛

[@paramkulshrestha2367]

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?

[@TDSunshine]

I prefer to use number variables or the font size etc because they are number values ☀️🙏🏻

[@kevape]

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

[@TDSunshine]

Yes! this one - kzbin.info/www/bejne/nHOQZZyhp9lmo80. 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 ☀️🙏🏻💛

[@kevape]

@@TDSunshine brilliant I’ll check it out and look to adapt it using change variables 👍👍

[@kevape]

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

[@malebola87]

Howdy, because of your amazing videos, I bought Figma, however, I can't see the appearance window, could you help me? Please

[@TDSunshine]

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! ☀️🙏🏻

[@mariangeldiaz1395]

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

[@TDSunshine]

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☀️🙏🏻💛

[@tutukumarpanda]

Awesome, thanks for sharing 👍😊

[@TDSunshine]

☀️🙏🏻💛

[@DeLaRic]

Very good explained. Thanks.

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@duyhuynh6816]

nice, clearly. I have a question: How using Text stype variable on local variable? How to use match ?

[@TDSunshine]

Thanks! I have a video about type variables here ☀️🙏🏻💛 - *Type and Gradient Variables* - kzbin.info/www/bejne/aHXTdZtneN6thsk

[@Anca_Webdesign]

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.

[@TDSunshine]

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. ☀️🙏🏻

[@Anca_Webdesign]

@@TDSunshine If its more important to you I understand 🫡😇

[@Shinharamia]

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

[@TDSunshine]

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! ☀️🙏🏻💛

[@c-gamesanta5716]

@TD Sunshine, Missing your content. Hope you come back with new videos soon! 😊

[@TDSunshine]

Took a bit of a break for the summer but already working on new content! Stay tuned... ☀️🙏🏻💛

[@caitdavies8372]

Thank you! :)

[@TDSunshine]

☀️🙏🏻💛

[@hamdaabdulrauf5828]

great video!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@Aijazkhan460]

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?

[@TDSunshine]

Great question! I show how I would make that swap for the navigation in this video - *Responsive design with variables and autolayout* - kzbin.info/www/bejne/d5zNYYesm7qfo8U ☀️🙏🏻💛

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

[@bilalboucebha3161]

@TD Sunchine When we can access to figma ai ? I have professional figma account but i don’t have the ai !!

[@abdullohasad3149]

I have the same case.

[@TDSunshine]

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! ☀️🙏🏻

[@sivabalan8189]

Thank you ❤

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@AlanOdogwuideh]

This is an amazing video

[@TDSunshine]

Thank you! ☀️🙏🏻

[@k16e]

Comment #2: This is really valuable lesson!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@Kittu1894]

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

[@TDSunshine]

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 ☀️🙏🏻💛

[@parveenmandal96]

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?

[@TDSunshine]

Yes there is! I show how to connect Variables and Variants in this video - kzbin.info/www/bejne/a3axY4aqnMxoaMk ☀️🙏🏻💛

[@parveenmandal96]

@@TDSunshine Just did that and it worked beautifully. Thank you so much Tair 🫶🏼

[@paavamkutty]

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

[@TDSunshine]

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 ☀️🙏🏻💛

[@carlainezespost]

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?

[@TDSunshine]

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. ☀️🙏🏻💛

[@carlainezespost]

@@TDSunshine ah I see Thanks so much for the quick reply! So so happy I found your channel!

[@alisheikh1582]

Hey Which mouse do you use for the editing?

[@TDSunshine]

Hi! I use a combination of apple trackpad and victsing wireless mouse ☀️🙏🏻

[@khalilbugti4079]

Do you have completed course where you can learn the completed project.

[@TDSunshine]

Hey! I have a Figma 101 complete course (kzbin.info/www/bejne/eIHFe6tvfZmppa8 ) and I'm working on a more advanced one too ☀️🙏🏻💛

[@77gomesthomas77]

Awesome!

[@TDSunshine]

☀️🙏🏻

[@_ABHB_]

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

[@TDSunshine]

Great idea! will add to my list ☀️🙏🏻💛

[@روانالتميمي-م9ث]

I’m sorry but the link to upgrade my account didn’t work😢

[@TDSunshine]

It should take you to the pricing page on Figma.com where you can select a new plan ☀️🙏🏻

[@rekad8181]

You're a fucken legend! seriously big props to you!!

[@TDSunshine]

Thanks! ☀️🙏🏻

[@mischugo]

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 🤔

[@fabianbolte8746]

It's in the dropdown menu _below_ the width value in the old UI, probably saying 'Fixed' before.

[@TDSunshine]

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 ☀️🙏🏻💛

[@Mahmo4ud]

i new to channel this work great

[@TDSunshine]

Thanks ☀️🙏🏻💛

[@nikasherafatmand8685]

this is so helpful tnx

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@marcuscustodio9338]

Very nice job

[@TDSunshine]

Thanks ☀️🙏🏻💛

[@HarishChouhan]

Is the Figma file for this video modified?

[@TDSunshine]

You can find the file in the video description ☀️🙏🏻

[@MujahidKhan-fh9kt]

So usfull video I love this video

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@ytRap007]

thank you bohoooowaaateeehhhh..

[@agathikatseni1314]

Yes but you have the payment option Figma. Right?

[@TDSunshine]

You can use variables in the free plan but in order to use modes you have to pay yes. ☀️🙏🏻💛

[@samduss4193]

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

[@TDSunshine]

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 ☀️🙏🏻💛