Figma Beginner: Tools & Features

Name: Figma Beginner: Tools & Features
Author: Justin Billmeier

Shape Your Designs: Exploring Figma's Tools and Features

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

Course: On-Demand

Hello, my name is Justin and in these lessons, you will learn how to design with Figma's tools. We'll work with shapes, frames, auto layout, colors and effects, and images. In this lesson, we'll dive into using shapes. By the end of this lesson, you'll know how to use shapes to start a simple design. Let's go to this page where I have a design for a simple checkout flow, for a fictional lamp company. And you'll notice in designs for apps or web pages that they're made up of shapes, text, and images. The shapes are usually rectangles. There are a lot of sections that are rectangles, buttons or rectangles. I have images inside rectangles. I have a line here as a divider and some triangles or polygons here for an options menu. But it's mostly going to be rectangles. So here are some of the simple shapes that you can work with in Figma. We have our rectangle, our lips, our polygon, our star, our line, and our arrow. And I'm going to select these shapes and you'll notice they're all a little bit different in the properties panel. The rectangle has some white dots in the corners that allows me to adjust the corner radius. If I select any lips, you'll see a white circle that is adjusting a property called ark. It makes like a pie shape. For polygons, we have something a little different. We still have corner radius, but we have a count, which as I drag on it, it allows me to add sides to the polygon, and with our star, we have yet another one called ratio, which lets me pull in the star right there on those angles. We still have corner radius, and we have, and we have count, which lets me add points to the star. The line and the arrow are very similar. We don't have to go too deep into those, but know that they have strokes and you can basically make a line and arrow by making that stroke a three and putting a triangle and cap on it. So, let's look a little bit deeper into the rectangle. For the rectangle, when I select a shape, these are these are vector shapes. And what's great about vector shapes is you can scale them infinitely. So you do not lose any quality for vector shapes when you scale them up. I can do a few things here. I can, if I hold down shift and option, I can keep the proportions as I make it larger or smaller. If I hover the cursor around the corner, I can rotate it, and you'll notice when we select a shape, we get a few different options on the top. We have edit objects, create components, and use as mask. Create component and use as mask. We're not going to talk about it right now, but let's look at edit object. So this shows us some ways that we can edit one of these shapes. When I hover over the edge of the rectangle, it turns into the pen tool. I can click there to add a point. I could drag it up. I hold shift when I drag it up to keep it aligned to the center. And I can go to the pen tool to click on it and add handles to this point. And I could adjust those if I wanted to. You can add points to different areas of the shape and customize it how you like. Now, there's something else I want to show you. When you can use shapes to create a lot of things for your design, but but I think a good demonstration of what you can do with shapes would be to create an icon. So let's do that now. I'm going to grab any lips and I'm going to make another ellipse. I'm going to make this one a little bit darker so I can tell the difference. And I'm going to have another shape here. I'm going to make a rectangle. Let's make it like that, maybe a little bit longer, maybe a little bit narrower. And I'm going to click both of these shapes together. Now, when I do that, you see we have something called Boolean groups up here. And this will allow us to combine these shapes in different ways. I can select a union, which creates a single shape. And I can do other things too. I could subtract the selection, which takes the top layer away and cuts it out of the of the shape below it. Intersect selection, which maintains the area that has overlap and exclude selection, which punches a whole where there is overlap. For this, I want to use union selection. I brought them together to make a single shape. Now I'm going to take our other ellipse, make that a little bit smaller, put that on the top. Now, you can easily move layers above or below each other on the z-index by using command brackets. So I'm going to go command right bracket and move that ellipse above the shape. So I can layer that now above the shape that I just created. And I want to align it too. We can still see that ellipse in the shape I created. I'm going to align those together with the align tools that are in the properties panel here. So I'm going to align that right there. And now I'm going to select the ellipse and the full shape that I just made. And now I'm going to subtract and I've just cut a hole in there. And you might be recognizing this icon now. I'm going to rotate it about 45 degrees. And now I can go command E to reset the bounding box. And now I have a search icon. It was very simple. So most icons are made of very simple shapes like this. So that is an introduction on how you can use shapes in your design. In our next lesson, we'll learn about frames and groups. Thanks for watching.

Beginner Provider : Justin Billmeier 5 Lessons · 28m in English

Course Description

Understanding Figma’s tools and features is crucial for creating effective and dynamic designs. Basic shapes, frames, and groups are the foundation of any design work in Figma. The auto-layout feature is a powerful tool that can significantly improve your efficiency, allowing for dynamic resizing and alignment as design elements change. The ability to work with colors, effects, and images can bring designs to life and create visually appealing interfaces, leading to endless design possibilities.

In these lessons, we will explore working with basic shapes, using frames and groups, and utilizing the auto-layout feature. Additionally, you'll get a taste of working with colors and effects, as well as adding and manipulating images in your design. By the end of these lessons, you will be able to use shapes, frames, and groups proficiently, apply auto-layout to keep your designs aligned, create and apply color and effects styles, and import and manipulate images to efficiently create dynamic and complex designs in Figma.

What You'll Learn

Work with basic shapes, frames, and groups proficiently in Figma
Apply auto-layout to keep designs aligned as text changes or elements are added or removed
Distinguish between frames and groups and use each effectively
Create and apply color and effects styles
Import and manipulate images to build dynamic, complex designs

Key Takeaways

Basic shapes, frames, and groups are the foundation of any design work in Figma.
The auto-layout feature allows for dynamic resizing and alignment as design elements change, improving efficiency.
Working with colors, effects, and images brings designs to life and creates visually appealing interfaces.
By the end of the lessons, learners can use shapes, frames, and groups, apply auto-layout, create color and effects styles, and import and manipulate images.

Frequently Asked Questions

What will I learn in this course?

You will learn to design with Figma's tools and features, working with shapes, frames, auto-layout, colors, effects, and images, including recognizing the difference between frames and groups and how to use them effectively.

What topics do the lessons cover?

The lessons cover working with basic shapes, using frames and groups, using auto layout, working with colors and effects, and adding images.

What is the auto-layout feature used for?

Auto-layout is a powerful tool that allows for dynamic resizing and alignment as design elements change, helping keep designs aligned as text changes or elements get added or removed.

Is this course suitable for beginners?

Yes. As a Figma beginner course on tools and features, it covers the foundational basic shapes, frames, and groups before progressing to auto-layout, colors, effects, and images.