New Figma Variables - Crash Course (Variables, Modes & Design Tokens)

Learn to use Variables & Modes in Figma & Create Design Tokens to keep designs constant but flexible. Get Started with Figma: psxid.figma.com/kh2feohwvmqd
-
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
Sign up for ProtoPie:
www.protopie.io/plans?ref=caler
My Desk Setup for Design & RUclips:
kit.co/caleredwards/my-setup
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Chapters:
0:00 Intro to Variables
0:28 Creating Variables
1:36 Grouping Variables
2:23 Design Tokens
5:28 Variables vs Styles
6:48 Other Variable Types
8:16 Number Scoping
9:28 Modes
-
Disclaimer: This video and description may contain affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
Intro to Figma Variables & Modes - Crash Course
#figma #variables #figmatutorial #designtokens #tutorial #design #tips #designsystems

[@brankhihiboldob5675]

new subscriber here!. I started watching the components and variants then this one, I loved how you teach. It's very clear and simple. Thank you!

[@apsuhos4u]

It's amusing how the design approach and front-end development, particularly in the context of CSS, have come full circle.
As a designer and front-end developer myself, it's truly eye-opening to see that discussions we had years ago, when we were first introduced to SCSS variables and semantic naming, have now made a complete loop.
Back then, we had a base palette with arrays and sub-arrays of names like primary, accent, success, warning, etc., and colors ranging from 100 to 900. We assigned hex values to each one of them. For example:
$color-primary-030: #aca997 !default;
$button-background: $color-primary-030 !default;
.c-button { background-color: $button-background; }
Of course, now we have CSS variables, and the workflow has slightly changed, but the principles remain the same. I am an advocate of the notion that designers should study CSS and use their editor and browser as their primary design tools. Figma's approach in this regard is a logical step forward, confirming the idea that designers should learn CSS, and front-end developers should learn design.

[@jswanson859]

Love it! Thanks for making it so simple. I love the token idea. I'm definitely going to be using that.

[@CalerEdwards]

Glad it was helpful!

[@AkinsRealm]

Thank you!

[@CalerEdwards]

You bet!

[@valdesigneer]

most helpful video on internet

[@CalerEdwards]

Glad it was helpful!

[@AhmedSalaha1997]

you are so good well done!

[@CalerEdwards]

Thank you :D

[@AbdulWahab-pk4jx]

Great Video ◡̈

[@CalerEdwards]

Thanks! :D

[@k2nnukas]

Thanks a lot for the explanation. Had a hard time figuring out why use tokens instead of styles. Looking forward for more advanced Figma tutorials. Probably a stupid question, but where does the color naming number come from "grey 300", etc and why is the range 300-1000? I understand it's from lighter to darker but why use that range of numbers?

[@CalerEdwards]

Hope the video helped :D
Also the numbers are tonal values that you can assign to your color palette. A very simple explanation is that you can have your primary color at lets say 500 (like blue for example) and then tints and shades of that blue color would fill in the rest of the numbers. Your tints would be 400,300,200,100,50 (50 being the closest tint to white you use in your color palette) and your shades could be 600,700,800,900 (with 900 being the closest shade to black in your color palette). You can do this for your neutrals and other colors in your design system as well. Hope that makes since and I might make a video dedicated to explaining more on this in the future :D

[@fernwehtwl]

does this mean we should replace styles with tokens? In what cases is it better to use styles?

[@syednouman7298]

No one is creating variable prototype video @celar
The community highly need it from your side. And please no ecommerce examples.
We need frameworks like you did for Atomic Design.
It helped a lot and I haven't forgotten till now.

[@polarbear8188]

is variabe paid feature?

[@CalerEdwards]

I don't think so. Modes was the only one I was aware of. So you should be able to make variables just not add different themes with modes.l