Master Figma in 5 minutes | Tutorial 2026

Figma is a tool for interface and graphic design. Its complexity sits somewhere between Photoshop and Canva, which makes it great for most people. You can use it for web design, mobile apps, social media posts, or simple graphic edits. And to get started, go to figma.com/d download. And after that, we can start. [music] First look at the interface. On the left side, we have the file name, pages, and layers. In layers, you will see all elements like rectangles, text, groups, and frames. On the right side, we have properties of the selected elements. This includes [music] its position, width, height, appearance, color, stroke, and effects. If we select the text, we get the typography settings. At the bottom, there is a toolbar with different tools, frames, shapes, drawing tools, and plugins. A really important thing is learning the shortcuts. They are much faster than, for example, creating a rectangle by clicking with the mouse. And you can practice shortcuts through this tutorial. Now let's talk about grids. We'll start by creating a simple card. Take a frame and there are a few ways to organize this content. First option is using a layout grid. Add some columns at merges for example 24 and align elements to the grid. But the downside is that if we delete something, it's not fully responsive. So let's return to normal and use auto layout instead. Auto layout allows us to make elements responsive. Let's apply it with shift A. I think we can improve the design of this card a little bit. As you can see, if we delay any element, the layout still works correctly and the card stays responsive. Auto layout also give us the ability to rearrange elements inside the frame without breaking the structure and in my opinion is a absolute must have when we using Figma to use auto layout. Let's make this card look nicer. Apply auto layout with shift 8 here. Set the spacing between elements to 16. And maybe add a bit more border radius. Also, let's improve the button. Add padding 32 and 16. Choose a color. I prefer black with white text. And increase the border radius to 48. We also have options like stro or drop shadow. In Figma, we can also create custom shapes. For example, create two rectangles and use bowling operations. [music] Choose different bowling operations and you can see how easily we can create more interesting elements. This is a traffic con made by me and the constructed. So you can see most graphic elements are based on simple geometric shapes at the beginning. It's easier to build illustrations from those shapes rather than drawing everything by hand. We can also modify text. If we select a text, we can change the font weight, size, alignment, and more advanced typography settings. Now, let's talk about components. A perfect example of component is a button. Let's create a simple black and white button. Once it's ready, click create component in the top right. We can add varants by clicking the plus icon. The second one will be our hover state. The third one will be press state. Select the component frame and rename the property to state and label each variant properly. Now let's use our components on the left panel. Go to assets, search for button and drag the button component into the card. Now I duplicated those cards and you can see the button is too large for them. Instead of changing every button manually, we can simply update the main component. [music] Let's change the font to 16 pixels and the update is applied everywhere. This is the biggest advantage of using components instead of designing everything separately. Components give us the chance to change [music] entire design in just a few seconds. Component also let us switch states [music] while designing. For example, we can preview how the press state of the button looks by simply selecting it from the state list. The last thing [music] is prototyping. On the right side of the interface, switch from the design tab to the prototype tab. Drag a connection from the default button to the hover variant. Change the trigger to while hovering and set the animation to smart animate. [music] Then connect the hover state to the press state. And this time, choose the onclick trigger. Now let's make a frame and change the background color. And there are two ways to preview [music] a prototype. The first one is setting a starting point on a frame. Once you do that, you can click the present button in the top right corner and Figma will open a new tab with your prototype. And you can see when you interact with it, your animations will play. The second method, and the one I prefer, is selecting the fame, then pressing shift and [music] space. This opens a quick preview directly in the editor. And that's everything. Thank you for watching. If you want more tutorials like this, for example, about component, type # component in the comments. Like and subscribe and feel [music] free to ask questions. And see you soon.