My First Variable: Creating your first variables

Подписаться 566 тыс.

Просмотров 12 тыс.

50% 1

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

Наука

Опубликовано:

4 фев 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 25

@alaaadm2497 13 дней назад

MAN U ARE THE FIRST ONE TO UNDERSTAND THIS TOPIC FROM THE WAY U DESCRIBE IT ONE BY ONE SLOWLY THANK YOU

@samuelsmith620m 5 месяцев назад

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!

@disco_lu 5 месяцев назад

Sam! Thank you so much 🙌

@thedesign3r 5 месяцев назад

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

@AvanaVana Месяц назад

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!

@MoritzFischer 5 месяцев назад

Thank you for making these lessons. Very useful ❤🎉

@cp3onmtv963 5 месяцев назад

It's great youre making a condensed video too but please utilize time stamps!

@TheNoambhs 5 месяцев назад

That was wonderful, I had a hard time understanding variables before that and Luis did an amazing job ♥

@disco_lu 5 месяцев назад

Let me know if you have any questions!

@rifatbinjahanara8953 2 месяца назад

You're amazing :)

@nikhilchoudhary7400 Месяц назад

really good example

@johnnnyfoley Месяц назад

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 🤣

@thomasmarcozimmermann5208 5 месяцев назад

hey Luis, many thnaks for this - helps a lot :-) Would be great if you could share the file.

@eJw2742 5 месяцев назад

You should have provide the design in the video as a template, so viewers can play around premade materials.

@williamguerra 4 месяца назад

Share the file please to practice 🙏🏻🙏🏻🙏🏻🙏🏻

@Futureshucks 4 месяца назад

Trying to watch these in sequence, would be very helpful if you numbered each one in the title,

@disco_lu 4 месяца назад

There's a playlist if that's easier? ru-vid.com/group/PLXDU_eVOJTx6V9PNAxvagzaMWHDFOsYQI

@hanzzyolo8240 4 месяца назад

Figma is incredible... g.o.a.t. designer program

@muhammadqusayyubasyrendraa4244 4 месяца назад

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

@disco_lu 4 месяца назад

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

@polsterboy 5 месяцев назад

What's the advantage of setting the booleans up in modes instead of a boolean property in the card component?

@disco_lu 5 месяцев назад

It creates a much richer multi brand or theme potential when using variables! It opens the doors for prototyping too

@wakaoh05 3 месяца назад

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

@wakaoh05 3 месяца назад

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?

@disco_lu 3 месяца назад

It might be worth waiting until Figma ships the feature to allow boolean variables within boolean props!