My First Variable: Creating your first variables
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Follow along with the playlist: • My First Variable
In this video, we will start creating variables!
Luis will show you :
1) Where variables live within a file
2) How to create color, boolean, text, and number variables
3) How to use modes to manage theming and densities
____________________________________________________
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
MAN U ARE THE FIRST ONE TO UNDERSTAND THIS TOPIC FROM THE WAY U DESCRIBE IT ONE BY ONE SLOWLY THANK YOU
These are some great tips for best practices around organizing and using variables in Figma.
I actually had no idea that each collection could have its own mode-that is incredibly useful. I assumed that the modes stayed the same across all collections since there is a limit to their number without an organizational account/plan, and never looked into the issue. This always limited my use of modes in my work-I can’t wait to put them to better use now!
Luis, thank you so much for creating this playlist! You've concisely shared everything I have learned (mostly from you 😋) about variables in the last 9 months in less than hour. Bravo and thank you for your dedication to the community!
Sam! Thank you so much 🙌
@@disco_lu
Hey Luis, thanks for making this video. You explained everything with much ease and calm.
I was hoping you'd click into the text for the spacing mapping, but you already added them as styles so i couldn't get the name. What's the name of the typeface, it looks so neat?
Thank you for making these lessons. Very useful ❤🎉
That was wonderful, I had a hard time understanding variables before that and Luis did an amazing job ♥
Let me know if you have any questions!
It's great youre making a condensed video too but please utilize time stamps!
really good example
Share the file please to practice 🙏🏻🙏🏻🙏🏻🙏🏻
Hey figma! This is just awesome it would be great if you can provide the working file to follow along
You're amazing :)
What's the advantage of setting the booleans up in modes instead of a boolean property in the card component?
It creates a much richer multi brand or theme potential when using variables! It opens the doors for prototyping too
@@disco_lu I understand making it richer for multi-branding, but all doors for prototyping are already in play with my current set of variants for my components
Trying to watch these in sequence, would be very helpful if you numbered each one in the title,
There's a playlist if that's easier? th-cam.com/play/PLXDU_eVOJTx6V9PNAxvagzaMWHDFOsYQI.html
You should have provide the design in the video as a template, so viewers can play around premade materials.
@eJw2742
You can make a simple card in less than 5 minutes by your own.
If u find that to complicated, than variables aren't the topic yet 4u.
hey Luis, many thnaks for this - helps a lot :-) Would be great if you could share the file.
Hi Luis this is a very interesting feature👍🏻. However, for the starter you can only use 1 variable mode. So to create day mode and night mode we have to create 2 collections, which is not efficient. Is there any other alternative? or please correct me if I forgot another tutorial.
Thank You
That's right unfortunately. It might be worth still using styles and "swap libraries". You can set the style's value to be the variable
Why not Design & Wine? 😀
Figma is incredible... g.o.a.t. designer program
I'm still struggling to understand what to do with the plethora of variants and full-page templates, which are themselves variants, used in our design files. Adding these boolean variants would have been good at the start, but if I want to convert all of these boolean variant properties into variables will I end up breaking tons of our page templates?
It might be worth waiting until Figma ships the feature to allow boolean variables within boolean props!
Thanks - super helpful. I only wish you'd vertically centre-aligned the word DESIGN and the word WHINE within those pills, my designer brain can't handle it 🤣
@johnnnyfoley
Align your designer brain to appreciate
free content, and not always complain :)
its so hidden, right-click the eye icon to add a variable? come-on Figma