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

Speakers:
Luis Ouriach – Designer Advocate, Figma
Jacob Miller – Product Manager, Design Systems, Figma

Join us for an in depth session to learn how you can level up your design system in Figma for better scalability, theming, and more using variables.

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[exgeeinteractive]

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.

[emaarbez]

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

[funglam]

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

[megaroeny]

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

[MikeDenton-zeps]

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.

[ayanbanerjee]

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

[dmitriykornilov]

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

[Underhills]

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

[evonevon]

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?

[jordan_hughes]

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!

[emaarbez]

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

[leeimkyung]

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?

[alfiematthews]

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

[hardboiled]

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

[equiz]

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 :(

[pouriyarezaie]

What about stroke (border) number variable?

[dannysvibe]

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

[warrenpayne]

Any update on typography support in variables?

[ushadesai]

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

[zsofiamihaly]

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!