Length: 1 hour, 21 minutes | Classes: 9
In UI design, elements are common parts like buttons or varieties which might be used by way of the design course of for the sake of pace and effectivity.
In Figma, you possibly can create elements tremendous simply — and as part of your commonplace workflow — to allow them to be reused later in numerous initiatives. So, minimal upfront (and one-time) effort means you may have a streamlined design expertise from right here on out. Let’s dive in!
1. Introduction
So sure, making a button and saving it as a part means you should use that very same button time and time once more throughout a number of designs. However by far the preferred facet of elements in Figma is the truth that if you happen to make a change to a saved part, this alteration shall be routinely mirrored in each single occasion of that part in your present design.
If you wish to change the colour of a button, you solely want to take action on the principle button and each occasion of this button shall be up to date.
Now to observe together with this course, you’ll need a couple of recordsdata at your disposal. Downloading the next will allow you to observe this tutorial step-by-step. After getting every little thing downloaded and ready-to-go, transfer on to the following lesson:
2. Creating a number of elements
With the supply Figma file open, you possibly can start the method of create a part. To create a part, you first want to pick the layers you need to incorporate in it. Persevering with with our button instance, you’d want to pick the textual content and form layers — or a bunch of parts — to make sure you’re correctly making a part.
A easy right-click is all it takes to create a brand new part on this vogue.
A component (or group of parts) will flip purple within the left hand menu when it is develop into a part.
3. Most important elements vs. situations
One factor that is vital to grasp about elements is said to terminology — simply so you do not confused as you progress by way of numerous Figma tutorials.
So, the primary time you create a part, that is known as the principle part. Nevertheless, anytime you create a duplicate of that foremost part, that is known as an occasion.
Notably, you possibly can’t change any attributes of an occasion — solely on the principle part.
4. Making modifications to elements and situations
You’ll be able to change the content material contained throughout the occasion of a part. That is known as a part override and describes any of the modifications you make inside a person occasion. These overrides can embody issues like:
- The content material throughout the occasion
- The fill and stroke
- Border radius
- Structure grids
- Export settings
- Layer names
- Layer and textual content kinds
5. Swapping part situations
In Figma, occasion swap describes the method the place you possibly can change out one part’s occasion with one other occasion. This may be useful in all kinds of conditions, however it’s significantly useful in menus the place chances are you’ll want to maneuver round menu choices or buttons on the fly.
6. Naming and organizing elements
A design file ought to at all times be organized and Figma offers us a ton of instruments for that. One among these is the flexibility to routinely organized elements in the event that they’re named a sure method.
Utilizing the “slash” or “” separated naming conference in Figma, which makes it so the entire elements chosen are named as “Identify You Select / part identify.” This makes it a lot simpler to positioned like gadgets in your part record. On this instance, the gadgets are organized below the class “Menu Icon.”
7. Utilizing part variants
Variants mean you can group comparable elements throughout the similar container. As an illustration, a button can have totally different states like pressed, mouse-over, or disabled. However as a substitute of making a separate part for every of these states, you possibly can create a single part with a number of variants.
Utilizing part variants leads to a a lot cleaner artboard and workflow.
8. Working with part properties
Watch video lesson [1:00:26] ↗
So now you realize that part variants will be very highly effective, nevertheless, there does come some extent the place utilizing them turns into inefficient. As an illustration, you might need a button that has dozens of variants to account for various colour choices, states, gentle and darkish mode, and so forth. However having all of those variants could make it tough to seek out the proper one you want at any given time.
The answer to this challenge in Figma is part properties. Whereas not an alternative choice to variants, they work alongside them to enormously simplify the design course of.
There are 4 kinds of part properties: occasion swap, textual content, boolean, and variant.
9. Prototyping with interactive elements
Watch video lesson [1:13:31] ↗
Prototyping is all about interplay, it is function being to indicate you the way a design would work in the true world. To make the prototypes it produces to be as near the true factor as potential, Figma permits you to create interactive elements.
Interactive elements make it potential to modify between totally different variants in a prototype.
Study Extra About Figma and How you can Use It
Now that you have a deal with on Figma elements, chances are you’ll want to develop your ability set even additional. This assortment of tutorials must maintain you occupied for a while!
