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.
Please visit config.figma.com/video-on-dem... to view ASL version of this Config 2023 session.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[@Figma]

*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

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

[@frankieS2727]

I'm a newbie in UX/UI, and I'd love to learn more on your UX/UI acumen! :) Are you on Twitter, or do you write UX/UI articles?

[@coolyoutubeluke]

Hard agree, would love to use variables for font size, weight etc

[@samuelsmith620m]

Curious, how did you handle your button states? Did you put them in as modes? I've been trying to figure out how to balance collections and modes

[@andrewmcgrath1765]

Being able to modify an image using variables (specifically the source image) would be such a designer + developer friendly thing to do. Please please please add the ability to change a source image using a variable *and support it via the API!*

[@emaarbez7351]

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

[@selinovaldes]

Well handled, lads! 👏🏾

[@funglam7395]

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

[@DuongNguyentn]

Perfect!!!

[@megaroeny]

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

[@camilovargas1722]

Brilliant!

[@uploadsadlibitum6264]

Nice seeing what is to come soon too!

[@MikeDenton-ze5ps]

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.

[@ayanbanerjee4119]

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

[@dmitriykornilov4469]

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

[@abdullahwasi_]

Took me a while to figure it out as well...

[@FarukAhmed-jo2gd]

Awesome

[@yakaspectrum]

PERFECT!!!

[@yesongkim5824]

This is amazing! 🤓

[@Rohit__4748]

Awesome 🎉❤

[@dewanbageradorsho]

Lovely❤❤❤❤❤

[@KathBorup]

This is so freaking cool

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

[@disco_lu]

Great question. For demo purposes, we consolidated the collections but in production you’d like have density tokens set up for multiple platforms. This would mean toggling a few things on the component rather than the singular options I showed

[@evonevon7287]

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?

[@Underhills]

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

[@emaarbez7351]

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

[@hardboiled2000]

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

[@ushadesai6306]

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

[@artworthi]

Shoutout to 2x Playback Speed 🤌🤩🚀

[@dannysvibe6404]

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

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

[@kingnonnnnn]

use different modes on different collections. colors normally would be changed in the primitives collection. so if you have another collection for the tokens or the components itself, you can use modes for compact, spacious etc. and different modes for the colors.

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

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

[@alfiematthews9314]

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

[@welsewool]

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

[@judychang2211]

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?

[@Xalion100]

Theres a plguin for it already out there in community!

[@judychang2211]

@@Xalion100 That's awesome the community is quick haha! It'd still be nice to have this to make the feature complete without having to install another plug-in.

[@Jdpoz]

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.

[@Xalion100]

Theres already a plugin for this!

[@Jada-li9tv]

​@@Xalion100what's the plug-in called?

[@warrenpayne5669]

Any update on typography support in variables?

[@pouriyarezaie2517]

What about stroke (border) number variable?

[@manelporto123]

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!

[@Solonomade]

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

[@_plastikman]

Where is the list of plugins to import/export?

[@AlexRest106]

41:48 Any updates or ETAs on Extended Collections?

[@henkegiaretta]

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

[@Underhills]

Thinking the same. It seems like a feature that's already covered with props. So will they sunset that?

[@jazzybeat28]

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

[@Underhills]

I would think twice. I was forced to switch from XD to Figma and I miss XD on a daily. Especially when prototyping!

[@parthoborthakur]

🤖👀

[@TheCds777]

"Figmates"