Variants vs variables

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

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

50% 1

In this video, we break down the differences between variants and variables (plus modes), and determine when it makes sense to use each one. Follow along with the community file here www.figma.com/community/file/...
00:38 The difference between variants and variables + modes
01:49 When do I use each one? The simple answer
02:47 When do I use each one? The more complex answer
05:32 Example 1: Button states
08:10 Example 2: Prototyping with logic
10:36 Example 3: Small visual difference vs large visual difference
12:34 Example 4: Will everything on the screen have a mode?
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

Наука

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

12 сен 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I spent an entire day trying to figure this out, thank you for the amazing demo.

@Gobothechairman 8 месяцев назад

Omg, thank you! I was really confused until now.

@r2figo 8 месяцев назад

Thank you! And thanks for the snack :D

@rickyaznmartin 8 месяцев назад

Thank you!!🎉 ❤🔥

@smart23033 8 месяцев назад

thank you!

@ytrpaz 8 месяцев назад

@Figma i hope we can set variable also for stroke and effects.

@ChandlerFaye 8 месяцев назад

Will it be possible to import a CSV to set variables? I've been doing a lot of data entry since the launch and it would be neat if I could flow content in eventually. :)

@matissoM 8 месяцев назад

Great question to post on the Figma Community Forum, I guess. 🙃

@JohnPeele 8 месяцев назад

Totally unrelated question… how do you achieve the custom mask shape for your headshot in the video? OBS?

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

Thanks for the video! All the information is clear and well explained! I have a doubt about this: If I use variables instead of variants, how a developer would know that the component have several versions? Example, like Figma did at config, 9 buttons became 3 because of variables and changes were applied on padding basically

@eugostodecereal1 8 месяцев назад

love you Figma

@vaanresvaanica 8 месяцев назад

Please share the file ! that would even more helpful

@Figma 8 месяцев назад

added a community file! www.figma.com/community/file/1284206072590997466/Variants-vs-variables

@rjabrm 8 месяцев назад

Why don't you combine them together?

@romanvernik1968 8 месяцев назад

Can you please explain for mortal ones why I can’t use variables for 80% of properties like font name, font size, stroke width, shadow attrs etc?

@AlicePackard 8 месяцев назад

Hey Roman, my understanding is that Figma is actively working on making variables compatible with the types of inputs you listed! Hopefully we'll see them by the end of 2023. I don't work for Figma so I can't say why they chose to release what they did, but my best guess as an outsider is they wanted to ease customers into this new feature with a limited set of options: color vars on just fills and strokes, but not yet shadow colors or gradient stops... numbers for dimension values and auto layout, but not yet typographic attributes like font size... and booleans and strings for prototyping and mode switching, but not yet direct binding to variants (there's a workaround with strings but i don't fully trust it's stability). This probably also allowed them to ship an open beta in time for Config, so there's no doubt a "hype" aspect too.

@romanvernik1968 8 месяцев назад

@@AlicePackard Yes, makes sense.

@md.junayedhossain7955 8 месяцев назад

See the config 23 of figma, the ceo Dylan Field literally said they are working on the typography and much more will be coming at the end of this year. One day, Styles might become obsolete, thats my two cents.

@twinnieee 8 месяцев назад

Really helpful! Do you mind sharing the file?

@Figma 8 месяцев назад

added a community file! www.figma.com/community/file/1284206072590997466/Variants-vs-variables

@welling1 8 месяцев назад

Unless the endgame is turning Figma into a no-code tool, it's adding unnecessary levels of complexity for a tool that still requires manual coding.

@platinumdynamite 8 месяцев назад

It really advances prototyping, though - when text inputs are implemented, it's going to be a lot easier to create realistic prototypes with actual interactivity rather than faking static states.