Figma Tutorial: Variants
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Figma is free to use. Sign up here: bit.ly/3msp0OV
Variants reduce the complexity of your design system, makes it easier to find components, and maps your design components more closely to code. In this video we'll teach you how to create and use variants and component sets.
Learn how to use interactive components here: bit.ly/3mhWRx4
Learn more on our Help Center:
Prepare for Variants: bit.ly/35IIIPV
Create and Use Variants: bit.ly/35FVxdH
Read the variants blog post: www.figma.com/blog/bridging-d...
Watch the Config Europe keynote highlights: • Config Europe 2020 - K...
#Figma #FigmaTutorial #Variants #Components
Timestamps:
0:00 Introduction
0:30 Define component sets, variants, properties, and values
0:58 Multi-dimension component sets, and map to code
1:47 Combine components as variants
2:05 Publish component sets to a library
2:19 Using and configuring variants
2:41 Step-by-step demo (checkbox component set from scratch)
3:22 Adding variants to a single Component
3:46 Naming syntax (property=value)
5:05 Rename values
5:29 Non-unique combination errors and how to fix it
5:40 Rename properties
6:23 Using and configuring variants from Assets panel
7:14 Add new variants to a component set
7:56 Boolean values, binary toggle switch
8:40 Adding another property / dimension
10:37 Instance swapping and component sets
11:03 Publish component sets to a library
12:08 The "slash" naming convention to create variants quickly
12:58 Use the "slash naming convention at a large scale
14:01 Outro
Fluffy by Smith The Mister smiththemister.bandcamp.com
Smith The Mister bit.ly/Smith-The-Mister-YT
Free Download / Stream: bit.ly/stm-fluffy
Music promoted by Audio Library • Fluffy - Smith The Mis... - วิทยาศาสตร์และเทคโนโลยี
![Figma tutorial: Create reusable color styles [4 of 8]](http://i.ytimg.com/vi/d01Ql9ZtVnk/mqdefault.jpg)
![Figma tutorial: Create reusable color styles [4 of 8]](/img/tr.png)
With the introduction of Component Properties, we changed how you create variants in Figma slightly.
We made a quick tutorial on how to create a new variant in 3 different ways. Check it out here: th-cam.com/users/shortsdYP8MNN4GzE
Animations With Figma th-cam.com/video/aMFUuGZ9LEs/w-d-xo.html
Can you please make an updated video? The UI has completely changed.
One day before this function arrives I was suffering inside because of the work I had to organize everything. Opening Figma the next day and seeing this update make my head explode. You guys are awesome!
FINALLY!! Historical moment.. we have come a looong way for this, through pain & tears *photoshop & illustrator 😭✨💥🎉
Adobe XD can do this. And they implemented it before Figma
Haha! Can't imagine doing this in Photoshop
@@virtual_farmer_881 Photoshop is a photo editing app not a UI design tool
@@obvinpro Mm... not so much. You can have components in XD but each variant is still its own individual component. Gets messy quickly.
@@obvinpro I have seen designers in fortune 500 use it for their UI design as recent as 5 years ago. When traditional graphic designers moved to UI design, they got their tools with them.
toggle switch is just that extra touch of detail that made this even cooler wow
Yeah, the fact that it wasn't just another dropdown really speaks to how much they've thought through this.
Figma was already a complete package! But now... NO WORDS! Very thankful to the Figma team! You guys are great!!
Thanks for the positive words, Usman! Excited to hear about how you use Variants in your work!
This feature gave me goosebumps!
we need to give this feature a category name - creating automated design systems?
I can't believe I've been plodding along without using this functionality for so long! Can't wait to begin building variants into my component libraries!
I started to learn Figma this year after working with complex softwares such as After Effects and Photoshop. I am blown away by how smart Figma is, this is an amazing, super complete software, but it is waaaay more intuitive than any other Adobe product. Amazing tool!
This feature is incredible! I'm already implementing it in my projects. Thanks for making my life easier Figma team ❤️
Very excited to see this finally released! Hopefully all of my named-in-anticipation-of-this-feature components will play nicely! 🤞
Awesome work @Figma. Much appreciated x
Figma team, thank you for changing the world of design! 😭❤️
XD was first to introduce this feature "Component States" and it works much better on XD than Figma
Photoshop has had this with the Smart Objects for a couple years now.
This is mind-blowing in its ease-of-use. I've only done variations a couple times before there were variants, and creating, organizing, and naming was a pain, plus there was a lot of menus. Variants are exactly what you'd want, and make it so easy to find the base component and to get the configuration you want for the design. Love it!
Thank you. Now the team will use the Design System in a much more practical way. You released this feature just before we released our updates to the team library. Since it works by converting the common hierarchical organization scheme, the Variants implementation becomes very simple.
Thanks for the comment Guilherme! That's exactly what the team had in mind when creating the "Combine as Variants" button. Good luck rolling out the new and improved team library to your team!
Absolutely in love with this feature! This makes it miles better than any other design software.
Simplify your design system and bring your components closer to code using Variants, and let us know how Variants helped your team in the comments.
Subscribe to our channel to be notified when we release Interactive Components, so you can use your Variants in your Prototypes!
Are there any plans to tie this feature to prototype interactions? ie: "On Click Set Property" instead of overlay
Hey @@Artcore1111, what you're describing is the Interactive Components feature mentioned in the comment above. 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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html Hope this clears things up!
hey, great video, do you guys have a video solely dedicated to file naming?
You guys are geniuses. The more time I spend discovering about your product, the more I am amazed.
I was organising components then this dropped, Thanks a lot!
We released it just for you CJ! Let us know how Variants help your process!
@@Figma it definitely will!
Ditto lol
3 dislikes are from Sketch, Adobe XD and InVision
I think they have an idea to improve this more.
InVision is pure shit, my company suffered quite a long time struggling with InVision
But Adobe XD have great prototype!
@@patriciahimawan I experienced wired and annoying interaction from XD on Windows.. it was absolutely fine on Mac. I love the speed and button interactive function on XD
What dislikes? - TH-cam 2022
i'm still blown away with how incredible Figma is. You, my dear software, are the future.
we turned 170 buttons into 1, love you guys!
still have to make the 170 buttons in the first place 😭
@@trill_lexapro yeah but we don't have to look for them all the time :D
Figma variants: one of the best innovative solutions in order to maintain a design system. I love it. 🤘Can't wait to explore now. 🤓
This is awesome. Figma is dope! Converting 84 button components into 1 was so cool.
Incredible feature, glad I learnt to use it. Thanks Figma for making a crisp and helpful video!
I have been using figma more than one year but honestly I did not know about that feature, that was amazing, thanks🙌
Great video! Clear and concise yet thorough
Am I dreaming? This just made my day! Congrats to Figma team!!
You guys are awesome!!! I think I'm still dreaming... Congrants to the Figma team for building this amazing feature.
Super happy when I saw this feature released early. Thank you SO MUCH! I've been wanting this for a long time
You're welcome, Ben!
Wow, this was insanely awesome. I’m just learning but so glad to have met Figma!
You guys are awesome!!! you know the exact pain of a designer. Indeed a big update. Thanks, team :)
Complex features explained easily and even easier to use. Bravo Figma.
This is amazing team Figma. After a long time seeing a video with no dislikes, haha. Love the community ❤️
Amazing feature! The more I'm discovering Figma, the more I'm loving it! I understand why so many designers switched from XD to Figma...
This is amazing! 😍 I was just organizing buttons and web modules today using slash naming and organizing them in a good way and then I saw notification, what a coincidence! I can do it like this tomorrow ☺️😁 woow perfect timing!
These videos are everything. Thank you figma team!
Figma just made 2020 a little better, thanks!
Miraculous Variants Update! So much easier, faster and clearer. Love it!
Super super cool and very helpful, especially for teams. That's why I've chosen Figma ) You are the best on your way guys, keeping on ...
This is amazing. Thanks Figma for this video, keep the great stuff coming!
Thanks, Unico! We're always making tutorials. Be sure to check out our new Auto layout playlist where we recently published three videos, and be sure to subscribe to our channel to be notified of future videos!
This is so fantastic. In love with Figma
Took me a while to grasp as a beginner but was really densely mind blowing!!
This is f.. AWESOME!!!
Dear Figma! Variants is amazing it quickly allows me to (re)organize my whole design system. To take this topic of (re)organisation could you make like a whole video on all tips, tricks, techniques, tools, etc that figma has to organise a large design system?
Figma is fricken brilliant. The 'Combine Into Component' feature is amazeballs.
Mind blowing 😍😍 now all we need is a support to swap these states on prototype without creating new frames. I'm finding it so hard to get a hower, mouse down, active inactive states without duplicating the frames.
Absolutely brilliant, thank you Figma.
its not up to date anymore
Oh gosh! That’s pretty awesome!! It’s so in time😍
okay, this is actually pretty sweet
Thank you to the Figma team for another excellent video!
Glad you found it helpful, Nio!
I am happily crying for this feature!
Figma has helping me so much, thank you.
Woah Figma is SO powerful! Can't wait to start using this!
love using figma!
very good narration on this too 👏
Can't wait to update my Design System and blow the minds of the developers :)
That's an awesome feature! Thanks a lot 🙏🏻
Finally! Super cool feature!
That was super informative and useful! Thank you so much!
One of the best explainer video's I saw. 🙌
Oh wow! I had Jan 21 marked on my calendar. Seems I'll be using figma a lot more
That was incredibly helpful. Thank you so freaking much.
Great video and a suuuuper useful thing. 1 thing tho. It was hilarious at 3:24 when he said "woah" like he didn't know what would happen xD
lmao
Tried it, It was AMAZING!
This is the best free software Ive seen. Respect.
Thanks so much! Took me forever to get the toggle switch situation in play
Figma looks so great - the component system is great
Good I see this now, saves so much time
WOW! Amazing video, great feature! Thanks :D
Figma you've answered my prayers!!!!
Love this kind of rundown.
Thank you so much for this video! 🥰🥰
Figam Tutorials are awsome!😍
Really amazing Figma, thanks!
Very useful and accessible. Thanks.
Super😍 Thanks Figma!
this feature is so f***ing great. already implementing it in an actual project!
That's awesome to hear Karsten! Glad it was so easy to add to your workflow!
Wow! Great thinking behind this update. This will make a huge change for improved design system setup!! 😍
One idea: could we maybe get something similar to how we handle colors? To make it easier to present Light and Dark Mode? I don't define light/dark mode on components (way too much and slow work), so I do this on the color setup. Then I currently manually switch individual colors for the screen, which is very fast, but would go even faster with a defined setup and then only have one switch/button (between theme selection) for chosen screen(s).
Great idea, Mikael! I know our various product teams are thinking about "theming" and how to solve that pain point. No plans to share, but we definitely know there's a population of Figma uses for whom that would be invaluable!
This is amazing!
who actually disliked this video? it's just unbelievable. Anyway, great iteration! Thanks Figma Team.
You just killed the game!
great explanation ;) thanks :)
Thank you so muchh!!! This is superb 😭🙏
You guys are amazing ❤️
Wow great feature, Figma has no competition
This got me excited at first, but I am disappointed that I still have to manually create different frames for each possible state in a form page in order to make a prototype work. Can't you at least make the hover state work without having to manually set each component/instance to swap to a different frame??
This is such a dope feature
this is way too awesome!
Amazing feature! Thanks
Figma is utilizing its recent funding. Well done
amazing, figma is the most powerfull and easy to use
The little "whoa" at 3:20 just kind of makes it for me
Yes, yes! **** yes!
This open up so many possibilities to auto-generate/sort components by their properties.
I imagine a new "Library view" where components are automatically sorted it grids with descriptors based on their properties (No more manual rearrange every time a new variant is added.).
I'm looking forward to an overhaul of the type system as well. We need it to be able to do the same for font weights, sizes, and so on. The current way of creating multiple variants for font weights is very cumbersome. It would be so nice to be able to just add a "property/style" to a font style.
Example: Let's say I create an H1 style which holds the majority of the styling but, then can add a "variant" of bold and light, but still keep the inheritance from the main H1 styling.
The current way of doing this is duplicating the H1 style and creating a variant with " / " but i i then decide that my letter spacing is a bit off, i the have to edit all the varients or use a plugin to batch edit. Basically we need to handle font-styles more like inDesign, where a style can be overwritten by another, but keep inheritance from a parent, and also some kind of "inline" styles for creating bolded text withing a paragraph.
Great thinking Thomas! I shared your idea with the broader Figma team. I'm sure someone is thinking about the same problem 🙂
Thank you my heroes!
OUCH that made me cry of happiness
Keen to use this but holding off until the update of the auto-layout because right now we have a lot of components that have a fixed-width version and an auto-layout version thus doing the variants right now would likely be double the work than in a few weeks. I really appreciate the thought that went into this and how to support us legacy users who already have hundreds of components. Can I ask that when the video for auto-layout gets done, that it's explicitly mentioned where the limits are? Eg. Tables or things where you want some columns/rows displaying or not based on the width/height of the container. Mocking up every breakpoint for dev is a paintpoint at the moment that the auto-layout Config demo didn't address.
Just awesome! \m/
very HELPFULL :D
So Proud !!!!!!!!!!!!!!!!!!!!!!!!!!!! 👏👏👏👏👏👏👏👏👏👏👏👏
Components with variants are such a great feature. It's frustrating though that after designing a button with non-hovered and hovered states, you cannot prototype them as such.
Figma is always one step ahead. Btw, I used to create other component states based on a normal component, so that if I want to update a label size in a button, the labels in other button states would update as well. I wonder if it is still going to work.