Period: 1 hour, 21 minutes | Classes: 9
In UI design, elements are common parts like buttons or kinds which might be used by way of the design course of for the sake of velocity and effectivity.
In Figma, you may 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 when you make a change to a saved part, this modification will likely be robotically 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 primary button and each occasion of this button will likely be up to date.
Now to comply with together with this course, you have to a couple of recordsdata at your disposal. Downloading the next will enable you comply with this tutorial step-by-step. After getting all the pieces downloaded and ready-to-go, transfer on to the subsequent lesson:
2. Creating a number of elements
With the supply Figma file open, you may start the method of create a part. To create a part, you first want to pick out the layers you want to incorporate in it. Persevering with with our button instance, you’d want to pick out 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 trend.
A component (or group of parts) will flip purple within the left hand menu when it is turn out to be a part.
3. Predominant elements vs. situations
One factor that is vital to grasp about elements is expounded 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 primary part. Nonetheless, anytime you create a duplicate of that essential part, that is known as an occasion.
Notably, you may’t change any attributes of an occasion — solely on the primary part.
4. Making adjustments to elements and situations
You possibly can change the content material contained throughout the occasion of a part. That is referred to as a part override and describes any of the adjustments 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 types
5. Swapping part situations
In Figma, occasion swap describes the method the place you may 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 it’s possible 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. Considered one of these is the power to robotically organized elements in the event that they’re named a sure manner.
Utilizing the “slash” or “” separated naming conference in Figma, which makes it so all the elements chosen are named as “Identify You Select / part identify.” This makes it a lot simpler to positioned like objects in your part listing. On this instance, the objects are organized beneath the class “Menu Icon.”
7. Utilizing part variants
Variants mean you can group comparable elements throughout the similar container. As an example, a button can have completely different states like pressed, mouse-over, or disabled. However as a substitute of making a separate part for every of these states, you may create a single part with a number of variants.
Utilizing part variants ends in a a lot cleaner artboard and workflow.
8. Working with part properties
Watch video lesson [1:00:26] ↗
So now you already know that part variants will be very highly effective, nevertheless, there does come some extent the place utilizing them turns into inefficient. As an example, 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 troublesome to search out the proper one you want at any given time.
The answer to this problem in Figma is part properties. Whereas not an alternative to variants, they work alongside them to significantly simplify the design course of.
There are 4 forms 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 point out you ways a design would work in the actual world. To make the prototypes it produces to be as near the actual factor as potential, Figma permits you to create interactive elements.
Interactive elements make it potential to modify between completely different variants in a prototype.
Study Extra About Figma and Tips on how to Use It
Now that you have a deal with on Figma elements, it’s possible you’ll want to broaden your ability set even additional. This assortment of tutorials must maintain you occupied for a while!
