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!

[@cp3onmtv963]

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

[@UICollectiveDesign]

Thanks so much for the feedback!

[@lolacademy-yn]

Amazing wok

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

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

[@ainaopeyemi339]

Here to take attendance

[@UICollectiveDesign]

Welcome back!!

[@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.

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

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

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