Office hours: Get started with variants
HTML-код
- Опубликовано: 7 авг 2024
- Variants are here! Figma's Designer Advocates share how the features work and answer questions.
Learn more on our Help Center:
Prepare for Variants: bit.ly/35IIIPV
Create and Use Variants: bit.ly/35FVxdH
Read the best practices guide: www.figma.com/best-practices/...
Read the variants blog post: www.figma.com/blog/bridging-d...
Watch the Config Europe keynote highlights: • Config Europe 2020 - K...
Timestamp:
0:00 Variants overview
12:00 Best practices
55:24 Community files
56:24 Q&A
#Figma #OfficeHours #Components #Variants 
Наука
So much chunks of knowledge, what a fantastic piece of software.
Thank you for this video.
Fantastic presentation guys, a lot of knowledge in this video. Thanks for the content!
These videos are just amazing! So much to learn from
Great Presentation guys. Every minute is valuable
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:
// no icons
Because then you would have to manually create button variants with different icons. Tens of thousands of variants.
More flexible work with components is available in Plasmic app
thanks. you are the best 🐙
p.s. timestamps are wrong. 55:24 Community files much earlier 46:00
Superb Video.. Lot to learn...Thank you !!!
thank you for awesome helpful demos!
Glad you're enjoying them, Chris! Be sure to subscribe to the channel to be notified of our future uploads!
You guys should have the keyboard shortcuts show up on screen or something. Would make this way easier to follow
3:40 and I got my mind blowning away! how to divide a mesure OMG I DID NOT KNOW WE COULD DO THAT!
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.
That's helpful
But, when is the 3d features are going to be available?
Okay kinda random on just the latest of SO MANY Figma videos I've wanted to watch but haven't made the time for, lots going on in like ... life, for a dev who wants to speak design too and among so many tantalizing posts over the last like year here, is there any video that's an obvious place to start for anyone already familiar with components, screens, interaction, be it a cornerstone video in y'alls opinion or a way to start an attack on the backlog at this point? Much appreesh!! Best wishes
might be confusing because we already have , 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.
100% agree
It would be super helpful if you would also mention Windows shortcut keys for those of us on PCs.
SY
Can you explain the difference between using this and using Instance swap. In which situations would there be preference for one over the other.
Can we have virirant interaction in the prototyping process? I found it is hard to prototype button state with viriants build.
Now you can with the new interactions features (in beta)!
I would like to have switchable state interactions for components on Prototype mode in one single frame, like Framer X
Hi Nelson, We'll be building upon the foundation of Variants, and bring them into your prototypes in the future via Interactive Components. We have a sneak peak of Interactive Components from our Config Europe conference last month which you can watch here: ruclips.net/video/Jeqyvp-hfmk/видео.html
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
#WheresDarkMode
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?
I think you need to make a frame which contains 'Drop target' frame (with auto-layout) and a prompt text frame below. So when you drag and drop component into the frame, it will superpose the text.
Did anyone find the batch rename shortcut to replace - with / in multiple instances in the component name?
How do I swap an icon and keep the color from the component?
If they have a similar naming scheme it should work.
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.
so finally what was the quick way to rename all "-" into "/"
Hey Ansh, you can use bulk renaming which has find and replace functionality. It also supports regular expressions if you know how to write those.
1) Select all objects
2) Command + R (Ctrl +R for Windows) to rename
3) Enter "-" in Find field
4) Enter "/" in Replace field
help.figma.com/hc/en-us/articles/360039958934-Rename-Layers#2
@@Figma to rename all not just the first one "-" into "/"... works also with find and Replace from Renameit plugin :) renameit.design/figma/
My stuff always jumped out of the intended frame. And it's so annoying because I have to constantly drag them into the right frame. Anyone is facing this issue? Or have any solution?
Where is the file with the Best Practices page that is being referenced?
Hey Chris, you can find it here: www.figma.com/best-practices/creating-and-organizing-variants/
There is no option to swap instance for example hover in prototyping mode!!!
Why switching between variants can't preserve the text layers even if they are in the same name?? is it a bug on Figma? or a bad logic?
Is there a way to add keywords to the Figma variants so that it is easy to search from the assets panel?
Hey Varun, you can add a component description in the right sidebar with the component selected, which will be searchable from the assets panel!
@@Figma Thanks you! :)
How do you recommend organizing icons?
if literals are meant to help developers when copying & pasting properties, why not use true/false instead of True/False ?
very nice, good informative #AnthonydiSpezia
3:12 tab bar variants
Any one here know about the shortcut to replace all the slashes @ 18:08
If you have multiple layers selected at once, you can rename them to open bulk rename. You can access rename from the right click menu or using (macOS) Command + R (Windows) Ctrl + R
Word of the Year 2022: Booliant
This is so confusing and counter intuitive.
This dude obliviously does not know exactly how a proper design system is constructing and how does rest of the world work.
1) Why menu items has no proper variants? for example where are active deactive states? you gave them %50 opacity but rest of the world does not do that kid
2) why tab bar has no any master component?
3) why menu item has no master component
4) why Figma's formal channel talks those kids here why figma's own channel can't show real actual usages of components here?
dude, I want to ask you something: after creating 10 menu items and 15 tab bars like this workflow and then you need to change menu items' designs? or you need to change size of tab items etc. what would you do?
"But we just show you guys just how variants works" don't. don't do that. DO THAT PROPERLY. Because on our tables, we have been struggling with details and proper structures and while we are doing that we can see actual "variants" behaviors.
Figma, don't bring weak designers, weak scenarios, weak problems here. we already know how variants works after watching your short feature videos...
This is toooooo much talking for very little information
Really an incredibly frustrating experience and an extremely superfluous video that didn't add anything...
HOWWWWW is it STILL so much drama to toggle button states in a prototype?! This is a useless feature and until I can make buttons work like buttons XD is still better🤷🏼♂️
That's helpful
But, when is the 3d features are going to be available?