#Figma variants how to

The instance always matches the master, so any changes made to the master will cascade to every instance. Whenever we duplicate the master, we create an вЂњinstanceвЂќ of the original. For those of you coming from the world of Sketch, youвЂ™ll know components by a different name: вЂњSymbols.вЂќ Both Components and Symbols are conceptually synonymous with вЂњtemplates.вЂќ In other words, they allow us to create a master template of a design.

In order to understand Variants, you need to first have a baseline understanding of Figma Components. All without having to refine spacing or manually move other components on the page. Or an entire page adapting to the addition or subtraction of various elements. Or an advanced form naturally adjusting to additional input fields. In practice, this means that you can have simple luxuries, like a componentвЂ™s height auto-adapting to the amount of text inside it. In addition to those explicit Auto Layout controls, there are constraints to Auto Layout frames that Figma calls вЂњResizing.вЂќ Resizing allows you to dictate whether the height and/or width of an Auto Layout frame вЂњhugsвЂќ its content (i.e., its dimensions match content dimensions), fills the space of its parent container (i.e., its dimensions match the dimensions of the container it's inside), or remains set to a fixed width regardless of its content or its parent (i.e., its dimensions are manually set by you and will not change unless you change them). In the most simplistic terms, Auto Layout allows you to combine multiple layers into a single row or a single column, with each layer equidistant from the next. First Things First: What Are We Talking About? Auto Layout So is it worth it? Absolutely, and hereвЂ™s why. These tools require you to adhere to a disciplined architecture and forbid quick-and-dirty, experimental changes to frames (a.k.a artboards). But IвЂ™m not going to lie, itвЂ™ll take some getting used to.

#Figma variants how to

If youвЂ™re like me and always striving to keep up with the latest and greatest, youвЂ™re going to want to learn how to apply Auto Layout and Variants to your design systems.

It wasnвЂ™t too long ago that powerful features like Auto Layout and Variants were still on our wish list (not to mention Smart Animate, gif support, and plugins). With that said, itвЂ™s still relatively young and is always evolving.

Figma is a revolutionary cloud-based design platform that simplifies team collaboration and absolutely crushes the risk of losing your work from unwarranted crashes (IвЂ™m looking at you, Adobe).