Perfecting Spacing in Figma: Create a Design System using Spacing Variables - A Step-by-Step Guide

[@Nothing-cx4jt]

Finally got the best figma resource the quality and topic I was looking for

[@1980nikolov]

Amazing video, exactly what I was looking for. Thank you very much!

[@adelanaofficial]

Thank you for making this video and every other video in the series. 💙

[@undesign_]

No problem 😊 Glad you liked it. Please subscribe for more and share video to friends if you want

[@damarisvicencio7420]

Thanks for all of these videos !!! You're a star!

[@FuturaKreative55]

Awesome thanks so much. Most helpful : )

[@YannickGarciaDelEstad]

Very helpful! you've got a new suscbriber

[@belowdelancey1025]

super straight forward - appreciate the info!

[@undesign_]

Glad you liked it! Thanks a lot

[@ytRap007]

thanks do you have also for text style?

[@AryanaRamirez-b3c]

Thank you so much for your explanation and pov of variables!!!

[@undesign_]

You're very welcome! Glad you liked the video

[@lorenzobrandimarte1427]

Thank you for the video! These values can be used for websites too or is just for apps?

[@camilagiannini9021]

Awesome video! Do you know if these work with modes as well? Say, I want to make desktop tablet and mobile spacings with tokens, and of course to set different values for each 🤔

[@uifry]

Amazing !!

[@undesign_]

Thank you! Cheers!

[@lillylightlove4229]

Very done

[@OscarObians]

Thanks for showing this. Do you know of a way to copy all these variable settings to a new file, so we don't have to start from scratch for each new file or project?

[@undesign_]

My pleasure! Actually when you duplicate these files, you should add them to your team’s library, then you’ll be able to use all this while working in the team’s file. Variable is a paid feature as of now!

[@yamilafritzler1224]

it's unclear to me if the tokens you created for spacing here are global or alias. Don't you need to crate first the global tokens with raw values and then add a semantic name and create an alias token that is attached to that raw value in the global tokens?

[@nazmanaznin4989]

Plz make a vedio on mobile wireframe

[@soldier4082]

just tell me plz are "Variables"

[@undesign_]

Variable is a new feature on Figma which just introduced about a month ago. You can store numbers, colors, booleans and text and use them in your design everywhere. If you want to change these elements, you don't need to do them manually like before. You just edit the variables and elements get updated all over the design! It's lovely