Deep Dive: unlock design system scalability with variables - Luis Ouriach, Jacob Miller(Config 2023) 

*Variables vs styles:* Many of you have asking about the differences between variables and styles, when to choose one over the other, and whether to plan for styles to sunset. We just published a new article to help answer those questions! Check it out here: bit.ly/3JYNJIO

PERFECT!!!

Brilliant!

Well handled, lads! 👏🏾

Font variables is a must. After the update, I've basically condensed a button set of 52 with in-depth components properties down to three buttons. With font variables, it's possible to reduce it to a single button component. 😂 After tweaking my past projects using conditionals and variables, the prototypes are cleaner and less cluttered too. Now imagine a variable for position and images, we can probably condense those carousel gallery animations down to a single image component. 😂 Aa a former dev of ten years and now full-time UX/UI designer (10 years and counting), this update is heaven sent.

Perfect!!!

Great session and amazing new features! I wish there was an option to switch between modes in the present/preview windows.

Nice seeing what is to come soon too!

Great talk! His passion is very inspiring and empowering! let’s go!!!

Awesome 🎉❤

This is amazing! 🤓

Awesome

Thank you for the fantastic guide and deep dive! Could you provide links to the things the QR codes pointed to?

Great to see this new feature Luis & Jacob! Can somebody please show us how to prototype a group of radio buttons as an reusable interactive component? 🙏 With this new feature it seems madness still having to create 10 frames with 90 connections just to prototype a component list of 10 selectable items.

Lovely❤❤❤❤❤

This is so freaking cool

very useful feature , kind of like styles feature in figma but not only for colors but for padding,size, text styles all included reduces the effor tof manually redesigning each time for different components

I love how variables work. However, I'm still a bit confuse between styles and variables. Whats the purpose of having styles if we have variables now? Any other better examples to show?

Thanks for putting this out to the world! I'm already implying new features in my workflow and it's been quite well so far! However, there's a little UX miss for me - the application of boolean variable to the layer visibility isn't as obvious as it could've been :( I haven't figured it out by myself and probable some of the users too

I created a collection with different variables on one file, but now I'm trying to edit the variables of that collection and I don't recall what was the file where I created that collection, therefore I cannot edit the variables. With components and instances, you can click on 'Go to the main component' but I don't find anything similar here. Any ideas? Thanks!

Hey Figma, please make the option to set global modes that would work across all collections!

Thanks for putting this together, Luis & Jacob! I wanted to get some thoughts on how some of these sizing/spacing examples would work in practice... Trying to understand the balance between usability and complexity. In the card demo @31:56 you have set up spacing variables for desktop and mobile. To make changes to these, the user would need to open the local variable table and try to find these specific component tokens of which there may be hundreds. Wouldn't it be easier to simply keep a desktop and mobile variant of each and allow the user to edit these values at the component level? Also, if the card layout needs to change from horizontally stacked on desktop to vertically stacked on mobile this "single component" approach falls apart. I guess I'm trying to ask when does using the "level 3" approach make sense? Seems to me semantic tokens are massive time savers but component tokens add unnecessary complexity. Any thoughts/advice are appreciated!

Figma opening files slooowly. Where have we seen that before? 🙄 Good to see some authentic stuff in these demos.

@figma this great update! How can we utilise modes to theme different brands? 1. The swap library function does not support variables/collections 2. Modes only supports configuring designs for light and/or dark mode I work for a agency that offers a white label product and are trying to implement this update but need a way to swap our template designs to a different client/theme… any solutions?

30:36 Just wondering... what is the reason for linking the previous instances to the set variables if we are going to delete them anyway?

Where is the list of plugins to import/export?

Hello! Thanks for the new features. 💜 At 29:56 when you add Spacious, Comfortable, Compact as 'modes' - if later we need Light and Dark versions of these buttons, how would you document it with variables? Thank you!

Is there a downloadable Figma file of the demo. That would be so helpful.

Hey Figma, when do you expect Extended Collections to arrive?

In your presentation you skipped border width of the notification component. Does it mean that the variables are not applicable to it?

Hey Figma, I'm loving the variables update! Question, is there a way I can apply all variables in a collection to a selected component or selected item? It takes a long time to individually apply one by one, wondering if there's an apply all variables?

Any update on typography support in variables?

What about stroke (border) number variable?

14:00 magic Demo-effect ) that always happens on key presentations

When you show the primitive colors, they are grouped by color names in the left panel. How can I do the same? Right now I can't see a way to make these groupings, all colors are in the same view :(

41:48 Any updates or ETAs on Extended Collections?

Shoutout to 2x Playback Speed 🤌🤩🚀

Really do wish there was a way to reference styles directly within variables so that I don't have to drop in a bunch of new hex values for an entire set of styles (and even then it doesn't yet cover gradients). Also want there to be a way to still utilize animations like you currently are able to between variable states like there currently is for variaNTS (i.e. smart animate opening and closing overlays, bounce / ease in + out / etc.) Until then it seems I currently will have to decide between making it visually more impressive and flexible or more efficient + aligned with dev.

Good start with variables. Unfortunately still not usable without typo, gradients, layer transparency and especially extended collections.

Isn't this like properties? Thinking about the buttons for instance

🤖👀

I guess now I have a good reason to switch to Figma

"Figmates"