Office hours: Get started with variants

Variants are here! Figma's Designer Advocates share how the features work and answer questions.

Learn more on our Help Center:

Timestamp:
0:00 Variants overview
12:00 Best practices
55:24 Community files
56:24 Q&A

#Figma #OfficeHours #Components #Variants

[mqms]

So much chunks of knowledge, what a fantastic piece of software.
Thank you for this video.

[giggles]

Oh man... yeah I wanted to get rid of all those permutations, just seems so redundant... Thank you for pointing that out #AnthonyDiSpezio. 1:20:52

[sarthakaswal]

These videos are just amazing! So much to learn from

[artificially_busy]

thanks. you are the best 🐙

p.s. timestamps are wrong. 55:24 Community files much earlier 46:00

[abhinavrv]

Great Presentation guys. Every minute is valuable

[Irakli]

43:15 where can I learn about how to preserve fills when overriding? I have my nav bar variants, but want to have only active and inactive variants, with the icon changing on an instance level. If i override the icon and change from active to inactive, it doesn’t change to the color that inactive is supposed to be.

[whatisiswhatable]

You guys should have the keyboard shortcuts show up on screen or something. Would make this way easier to follow

[abhinavrv]

Is there any way to detach component set into multiple components? @ 25:03 he used undo (cmd+Z). But what If I want to detach some old component set.

[Alberfinder]

Fantastic presentation guys, a lot of knowledge in this video. Thanks for the content!

[arzievsultan]

Guys, first of all I would like to thank you for these great features you come with.
Why icon property is Boolean type it should be list of icons.
If icon property is undefined then it means no icon. It is more natural like in react components:
<Button icon="user" type="primary"/>
<Button type="primary"/> // no icons

[isarojano]

3:40 and I got my mind blowning away! how to divide a mesure OMG I DID NOT KNOW WE COULD DO THAT!

[CuttingEdgeSchool]

so finally what was the quick way to rename all "-" into "/"

[tellstod]

Superb Video.. Lot to learn...Thank you !!!

[shrawanshrestha]

<button type="primary"> might be confusing because we already have <button type="button"> <button type="submit"> <button type ="reset">, I'll rather use variant="primary or theme="primary" but at own preference.
But the new feature variant is figma is life changer, hats off to figma team.

[TishaLeggett]

It would be super helpful if you would also mention Windows shortcut keys for those of us on PCs.

[yiwu]

Can we have virirant interaction in the prototyping process? I found it is hard to prototype button state with viriants build.

[Melanoche]

07:17 How do you make the module 'im waiting for a tab bar' and just drag and drop your components? Is it simply superposed or is it replaced by the tab?

[LeoEhrlich]

How do I swap an icon and keep the color from the component?

[chrisraymond]

Where is the file with the Best Practices page that is being referenced?

[qjay]

Can you explain the difference between using this and using Instance swap. In which situations would there be preference for one over the other.