Figma Tutorial: Dynamic sizing and spacing Part 1

👋 Hi, Design Thinkers,
I'm Matthew Sear, your go-to expert for user-centred design, and today, we're diving deep into the transformative world of Dynamic Variables in Figma. This video is specially crafted for those who breathe UX and product design-professionals like you who are always searching for transformative, data-driven insights.
What's On The Menu? 📋
Dynamic Spacing, Sizing, and Scaling Tokens: Unlock the ultimate flexibility for your designs.
Max and Min Tokens: Learn to set boundaries that make sense.
Rounding Tokens: Finesse your designs with pixel-perfect rounded corners.
Tips & Tricks: The pro hacks you need to implement these dynamic variables seamlessly across diverse screen sizes.
#figma #figmatutorial #figmadesign #FigmaVariables #DesignTokens
#ux #ui #designsystems #designtips #design #responsivedesign

[@michaelwatson9553]

This is really confusing. I've watched the video a few times and can't really figure out where the current size variable is coming from and which function is calling which variable. Maybe it's because the naming of the libraries is generic, but I simply can't figure out how the strings are interacting with numeric elements.

[@pixellink.design]

In your number table at the top add a string call it something like current-size, in that row from each column you can add a label, (small, medium, large) make sure the spell matches directly to the components variance that should help. If not I can have a look and make a shorter video covering string and applying them to property.

[@grafikaya]

i have a question, do we really scale with variables? not padding or margin really scaling like we have 24px icon and some cases i want to use 48px can we scale with variables?

[@pixellink.design]

Yes and no, if you use vector icons with no strokes you can have it in a frame set the icon to scale and set a variable size to the height and width of the frame and that will allow you to change the size of the icon by changing modes. I'll make a video on this it's a great idea to cover.

[@diporko2486]

Please consider not using music. This kind of video content / your voice is the king. We are happy to compromise some outer noises if you have. But this music please no..

String variable cant be set in component. So if you use component from Asset you have to connect to string variable. So its not usable for DS. And other problem is that string variable works only on first Level. If you have nested component, its not possible to connect string variable. So for slot components its completely inconvenient. Its really beta, i hope figma will make proggress. Even UI for selecting, creating variables is really basic and something like copy variable isnt possible.

[@pixellink.design]

Yes Figma really does need to step up on their variable system, I do find it limiting at times. On a side note I have a plugin coming up for beta soon to address some of these issues. I'll be posting info on it soon, I'll keep you posted 😊.

[@pixellink.design]

Thanks for your support Pavel 🙏