Create RESPONSIVE Figma Designs!

[@nurseryrhymehits9666]

Man this channel deserves 1million subscribers. No cap. Your videos are so helpful.

[@UICollectiveDesign]

Thanks for the love! Please share this vid on social where you can!

[@belabako8045]

For the designers watching this: Users don't care about your design system, or how you structure your Figma. Your job is to use research to identify their problems and then provide solutions. So don't sweat if you can't reproduce this effect with your designs, just do 3 versions and you're fine.

[@UICollectiveDesign]

This is super valid!

[@oartsoares]

Exactly what i needed to read. Thank you!

[@UICollectiveDesign]

@@oartsoares Here to serve! Please share this video where you can

[@cp3onmtv963]

Video quality is much higher than some previous vids, nice work!

[@UICollectiveDesign]

Thanks so much for the feedback!

[@skylerreeves]

You don't need a calculator @ [6:42]. Figma fields support basic math functions. e.g., for the H1 line height, just type into the field: 60*1.2 and it calculate it for you. At least I think it does-I don't have any plugins that do this and it works for me.

[@UICollectiveDesign]

Great call out!!

[@Meet1681]

amazing!

[@UICollectiveDesign]

Glad you enjoyed it!

[@borissokachev1471]

Stellar, I've been doing something similar to this since this summer, glad to see I'm on the same page as pros like you. What I do is that will make a variable collection called "Resolution" with 3 variable mods for desktop, mobile, tablet. I then populate the collection with an "Asset" group with Spacing and Font properties for each mode. "Asset" because I use those properties for Cards, Dialogs, Toasts, Modals...basically anything that changes padding, gap, or font sizes depending on the screen size. I also put H1, H2, H3 font sizes in there.

[@UICollectiveDesign]

Awesome!! I love the 'Asset' group!

[@Johnnygoto]

I'm building a new 3-tier design system. One question: is it still better to use aliases for border-width and border-radius tokens, or should I simply include them in a responsive collection linked to the brand scale? You're the best, just like your videos-thank you so much! ❤

[@UICollectiveDesign]

I tend to use Alias collection! Is this for your enterprise?

[@Johnnygoto]

@@UICollectiveDesign Yes, it's for enterprise use, they plan to support multiple brands in the future.

[@UICollectiveDesign]

@@Johnnygoto Nice these are always fun. Sounds like you have the design under control, but if you need any help with coding it, give us a shout :)

[@Johnnygoto]

@@UICollectiveDesign of course! Thank you so much for your reply! I appreciate it

[@lolacademy-yn]

Amazing wok

[@GraveRave]

Great content you guys should design a course, I'd definietly purchase!

[@UICollectiveDesign]

Thanks so much!! We did in the past but now just uploading it all for free to the community. Much more rewarding!

[@RobinRowell]

Informative video, for sure. Suggestion regarding the line-heights, when they are coded-in they should never be pixel values for accessibility reasons (google "don't use pixels for line-height"). Best practice is to use unit-less values (1.2 for those headings). The nice thing is Figma now supports percentages as line-height values so 120% can be plugged in across the board in your variables and when the developers get the file and leverage dev mode they will of course see them as percentages but easily swapped to line-height: 1.2. (120% also works in code as well, but unit-less is preferred). Cheers!

[@UICollectiveDesign]

Wow amazing comment! Totally agree!!

[@markcouvillion6762]

So instead of putting the pixel value in for line-height variables, I would just put in 120% and let Figma calculate the value based on font size? I guess that would mean you wouldn’t have things adhere to the 4px (or whatever) multiples. Are there other areas where one might want to use percentages as well?

[@RobinRowell]

@@markcouvillion6762 Not speaking with 100% certainty, but it is the only use-case thus far that I have uncovered for a design system.

[@MichelMolinaGarces]

Hey @robinrowell can you explain a bit more? How would you use percentages in the variables library? Interesting point, thank you!

[@broadcastdadgelow]

I have a couple questions... when you set the names to sm, md, lg, xl in the brand spacing variables, what happens when you want to use a lower value?, like 48 for example, as the md? Because i have the values from 25 to 600 without a name, and then 3xs starts at 700. Im a little bit confused as to how i can be consistent with the naming.

[@skylerreeves]

@@broadcastdadgelow - I think of it sort of like t-shirt sizes to give myself more range and use xxtiny, xtiny, tiny, xxsmall, xsmall, small, smedium, medium, marge, large, xlarge, xxlarge.

[@UICollectiveDesign]

Yeah that's it! I generally prefer to use 100 scale though

[@achuprasad1817]

I have a confussion when you started adding mobile typescale values. Which option you selected to know the height of h1 ?.

[@UICollectiveDesign]

I multiplied the size of the font by 1.2 to get the line height

[@bryanenyinnaya607]

A bit confused how you got the Typescale Generator

[@klokkerholm1993]

Great video / but i never understand why to make a desktop design in 1440 / when is almost always 1920 commen wide so u gonna have a large white space on each side an the client doesn’t see that ?

[@UICollectiveDesign]

Yeah depending on the design 1440 can just be a bit tighter. Not every user uses a 1920 screen either.

[@klokkerholm1993]

@ but u have limit option for max width and grid with 1440 compared to 1920 / if u see screen world wide the resolution 1920 is more present so better to design for most used. In my opinion / but I like u video and stuff just my personal take on it

[@UICollectiveDesign]

@@klokkerholm1993 You can also have a 1920 mode as well. This is just an example

[@ainaopeyemi339]

Here to take attendance

[@UICollectiveDesign]

Welcome back!!

[@shankarnarayanan4049]

My font size wouldn't change when i switch between desktop, tablet and mobile. What am i doing wrong ?

[@UICollectiveDesign]

Is the variable assigned to the font size?

[@shankarnarayanan4049]

@@UICollectiveDesign yes ! it is. wait.. do you mean assigning primitives ?

[@shankarnarayanan4049]

gotcha . assigned now . magic🪄

[@batman3490]

so are we done with design system videos? or more left?

[@UICollectiveDesign]

More left!

[@batman3490]

@@UICollectiveDesign ok thanks.how many more? haha

[@UICollectiveDesign]

@@batman3490 Not to sure!