Figma Intermediate: Components

Name: Figma Intermediate: Components
Author: Justin Billmeier

Learn how to create, manage, and use Figma components

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, my name is Justin and in these lessons you will learn all about components and Figma. You'll learn how to create them, manage them, and how to get the best use from them in your designs. In this lesson you'll learn what components are, why they're important, how to create them, and how flexible they can be. Alright, so, what is a component? Components are elements that you can reuse across your designs. You can create them once and pull it from your assets to be used as many times as you need. We're talking about things like buttons, input fields, icons, navigational elements, cards. There's a wide range of how you can use them. And why are they important? Well they can help to create and manage consistent designs across projects and across teams. And when they change you can update them across the whole team or across the whole organization. Now how do you make a component? Well I have one right here. This is a button, it's one of the simplest components that you're going to find. And it's simply a text layer inside of a frame. I'm going to make a simple change to this. I'm going to make the frame an auto layout frame because by doing that it will make it adapt to whatever the text is. So if I start changing the text here it doesn't resize. So let me just quickly turn this into I'm going to right click and go to add auto layout. You could also go shift A and by doing that now if I want to change the text it will resize. Alright, now to actually make this a component like with many things in Figma there are multiple ways to do it. I'm going to click my button frame here and I can click on the create component icon here. You could also do a option command K to create the component. You could also do a right click and do it that way. So I've created my component and I can see now if I go into my assets panel I have a button here. Alright, now how do components work? So there's two aspects to a component. You have your master component which is what I just created here and you can also have component instances. So the master component is what's defining the structure and the properties of the component. But the component instances are just that. They're instances of that original component where you can make changes. So I'm going to click and drag and just simply by copying the original component. You can see over here the symbol is a little bit different in my layers panel. These are instances of that original component and I can change quite a few things. I made a little list here to look at what you can and can't change with your instances. The changes that you make are called override. You can change the text. You can change the fill which would be color. You can change the stroke, the effects. You can't really change the underlying structure which is mainly dealing with layers for the component. So for example, I could click one of my instances and change the color to let's say green. That's fine. No problem. I could also change the text to say click me. I can also change the color here of the text. I'll make that black. I'll make the fill something much lighter. That's okay too. Let's say this says submit. Let's say I make one that says save. You can even resize it and that's not really going to stop you from using it. Just the one thing that you can't do is I can't go in here and add another text layer. It's just not going to work. So I can't mess with the structure of the component at all. Now you're going to notice that the flexibility that you have here is very, very powerful. You can create these with so many different things. You can use them within your single file. You can access them easily in your assets panel. You can also create libraries with them, which we'll talk about when we get to design systems. And again, this is really, really useful for maintaining consistency across many projects. So there's a rundown on what components are, how you can use them, and an example of how to create them in the systems. We're talking about a button, but you can use them for many things. In the next lesson, we will talk about organizing and managing your components. See you there.

Intermediate Provider : Justin Billmeier 4 Lessons · 24m in English

Course Description

In this KnowledgeCity course on Figma Intermediate: Components, we’ll show you what components are and how to work with them. You’ll learn how to manage components in Figma, as well as how to incorporate components into your designs. Lastly, we’ll go over some best practices to keep in mind when working with components in Figma.

In Figma, components include features like buttons, icons, layouts, input fields, and navigational elements. In these lessons, we’ll show you how to create a new component and save it as an asset to reuse as many times as you need. You’ll also discover how components can help you create and manage consistent designs across projects and across teams. We’ll demonstrate how to update a component across a whole team or throughout an entire organization. Any time you change a component, Figma updates all the component’s instances automatically, saving you time and improving your design workflow.

What You'll Learn

Explain what components are and how they function in Figma
Create new components and save them as reusable assets
Manage components in Figma
Incorporate components into your designs
Update a component across an entire team or organization
Apply best practices for working with components in Figma

Key Takeaways

Figma components include features like buttons, icons, layouts, input fields, and navigational elements.
A component can be saved as an asset and reused as many times as needed.
Components help create and manage consistent designs across projects and across teams.
When you change a component, Figma automatically updates all of that component's instances, saving time and improving the design workflow.
The course covers creating, managing, and using components, along with best practices to keep in mind.

Frequently Asked Questions

What does this course cover?

It covers what components are and how to work with them in Figma, including how to manage components, incorporate them into your designs, and best practices to keep in mind when working with components.

What components can I work with in Figma?

In Figma, components include features like buttons, icons, layouts, input fields, and navigational elements.

How do components help with consistent designs?

Components help you create and manage consistent designs across projects and across teams, and any time you change a component, Figma updates all of its instances automatically.

What lessons are included in this course?

The lessons are Creating Components, Managing Components, Using Components in Designs, and Component Best Practices.

What are the learning objectives of this course?

The objectives are to explain what components are and how they function, understand how to create components, and discover how to manage components.