Figma Oversimplified

Key Takeaways

Figma is a powerful collaborative design tool that is extremely flexible in its capabilities and is the go-to for UIUX designers and developers. It's used by designers and developers to sketch out ideas, put together presentations, and for building out full-fledged interactive designs that can be turned into real world applications. Figma has multiple products. Among these, we have the three that it's best known for. There's Figma Jam, a collaborative interactive whiteboard. Figma slides for presentations and the product that I love to use along with most other developers, Figma design. I personally use Figma with my team to design everything from custom icons to logos to these YouTube thumbnails that you see on this channel and of course to sketch out wireframes and build out the designs for my websites and mobile apps before they go into the development stage. So, because of my experience as a web developer, we're going to focus on Figma design in this video. By the way, I am working on a full in-depth one to two-hour long crash course on Figma for this channel, and it's going to cover everything I mention here and more in detail. So, if you want to check that out, it'll be linked in the video description. And for now, just think of this as the mini course that gives you a highlevel overview before you dive deeper into the next one or just as a Figma refresher. Okay, so let's get started. Figma can be used in one of two ways. You can download it locally by going to figma.com/d downloads or you can use it in your browser by going to figma.com and registering for an account. Once you set up an account, the first thing you'll see is the file browser. This is the homepage you'll see when you open up Figma as a loggedin user and from where you can manage your account, see the teams you're a part of, and any projects or drafts that you have. For the sake of this demo, let's create a new team. Any projects you have will be visible here. Let's start a new project by clicking on the plus icon. This will create a brand new design file. When you open a design file, you'll see this interface. This is where the magic happens. A design file has four key components. In the center, we have our canvas where we work on our designs. On the bottom, we have our toolbar. Here, we have the tools that we need to navigate and add things to our canvas. For shapes, we have everything from a rectangle, arrows, lines, and circles to images, which act as shapes. We can also create custom shapes with a pen tool by creating our own nodes like this, and then connecting them to officially form the shape. We can use the pen tool to draw on our canvas, which can come in useful anytime we need it. There's, of course, text here, and if we want to add comments for ourselves or anybody that we're collaborating with, we can do that as well. Now, most of these tools can be accessed through shortcuts. For the navigation tools, we can press V to use the move tool when we want to move elements around. And we can use H for the hand tool, which lets us move around this canvas. Another shortcut to temporarily use the move tool is to press spacebar, click, hold, and then move. You can also zoom in and out of the canvas by pressing command or control, and then using the scroll wheel on your mouse like this. On the right side, we have our properties panel and this allows us to control different properties of the elements within the canvas. We can control the color of our entire canvas, dimensions of our shapes, stroke color and width, fill color, and a lot more. On the left side, we have the navigation panel, and this is where we can add pages and control the layers of the items within the canvas. Anything within the canvas will appear here in the layers tab. And if we want to position an item above another within the layers, we can do so by dragging and dropping like this. The pages section within our navigation panel is for well pages. And what a page is is simply a container for organizing our work within a design file. So a new page will give us a fresh new canvas to work within. Frames are one of the key tools inside of our toolbar because they act as containers that hold elements together. So, anything that's put inside of a frame will now be a child to that frame and it'll be linked to it. We're free to create our own frames with our own custom dimensions, but we do have these preset frames like for a desktop device, one for a 16-in MacBook, and another for an iPhone 16. And these come in really useful. Plugins are great when we need features that extend beyond Figma's capabilities. One plugin I like to use is the Iconify plugin, which gives me access to thousands of icons to use within my designs. There are, of course, tons of other plugins to choose from for various use cases. All right, so layouts are where things really start to come together. We can create our layouts by dragging things into frame. However, things can get tricky when we start adjusting elements that affect other elements on the screen. This is where auto layouts come in. Auto layout allows us to use a more structured approach when we're creating our layouts. So, designs respond dynamically to different content changes. If you're familiar with CSS, this is the same exact thing as the CSS flexbox property. Let me show you what I mean by this. I'll grab this group of elements here and I'll create a new auto layout by right-clicking and then selecting add auto layout. This groups the elements together and automatically align them to the left. And as I change the size of the container, the elements will wrap and adjust to it. It's also easy to change the direction from row to column with a simple toggle here in the flow section. Under the alignment tab, we can align these items to the center, right, middle, bottom, and so on. To add spacing, I can simply increase this gap size. And if I want them to space out evenly, I can go ahead and set gap to auto. So this way, they'll spread out evenly and take up the entire width of the container. Now, let's use a more practical example. I have these elements here, and I want to create a product preview card for my online store website. Instead of dragging each element into place, I'll start by creating an auto layout to contain all these elements and group them together. So, this is easier to see, I'll go ahead and add in a fill color to this auto layout, creating more of a card effect. I want to make sure that all the elements flow downward as a column. And I also want to set the width of this layout to wrap the contents. So there's no extra space on the right or left. We can do the same for the height. So this way it hugs the items from all sides. This add to card button needs to be moved towards the bottom. And I'll do the same for the price as well. See how all the elements just respond in the auto layout. Pretty cool. Right now I need to create some layouts within my parent auto layout to organize these items within. Let's start by getting these color switchers in the right place. So I'll select each color and add a new auto layout. And let's make sure they flow to the right. I think 10 pixels should be good for the gap size. We can also create an auto layout for the price and add to cart button. So let's go ahead and do that as well. I want to make sure that this layout takes up the width of this container and also flows in a row. Then I want to space these items out evenly. I also want to create some padding in this section. I can create another auto layout by selecting all these elements inside of here. And then I'll add some padding, say 20 pixels to the top and bottom. And finally, I want to add some spacing between these three areas so they're equal. So I can create another auto layout here. And I'll add in some more padding. And in this case, it's just going to be to the bottom. Now, to top it all off, we can go ahead and add a shadow to our card. And that's starting to look pretty good. As we work on our designs, there are certain cases where we need to reuse an element over and over again. One thing we could do is simply duplicate that element. But making one small change would require us to update every instance of that element. This is where components come in to help us. A change to the master component makes it so that all the instance of this component also see that change. And this is a much cleaner approach. I'm going to use this button right here as an opportunity to teach you how to make your own components. First, I'll go ahead and move this button down here. Don't worry, we'll put this back when I'm done. This button will now be the master component and we're going to create instances from this. So to make a component, I'll go ahead and select create component. In the layers tab, you'll notice that the icon will change. This icon means that this is now a component. This component will also now appear in the assets tab. From the master component, we can now create instances to be used throughout our design. One way to do this is by simply duplicating the master component. This is now going to be an instance of that component. We can now take this instance and drag it back into our card. So these are now instances of the master component. And now we can easily modify this and change them from a single location. One of the cool things about Figma is the ability to add variants to components. So think of a button, hover, or active state. The way this would work is we would add a variant property to a component. Then we would duplicate that component and we would apply any styles we want to that new variant. So, let's go ahead and try this next. On our master component, we're now going to see this plus icon, which allows us to create a new variant of this component. Once we add a variant, we're going to get a duplicate of this component. And from here, we can go ahead and give this property a name. In my case, I'm going to go ahead and call this my hover variant. Then, to create the interaction, I'll select the prototype tab, which allows me to connect the initial button to the version of the button we want when we hover over it. So, I'll select on while hovering for the action. And for the animation, we'll just add dissolve so this looks a little bit smoother. Last thing we need to do to make this work is change up the style of the button for the hover variant. So I'll just do this by inverting the colors. So my background will be dark and my text will be white. Now I can see these results by clicking on the preview tab. And from here now when I hover over the buttons, I can see that new state. Okay. So once we've created our design, it's time to think about the next step. How do we take what we just made and turn this into a working product? Whether we're writing this out from scratch or we're using a noode or low code platform to build this out? Well, this step is going to change depending on your personal preference and the tools you're using. If you're writing code from scratch, typically what happens is you would take this design and you'd begin extracting parts of it piece by piece. In teams that I've worked on, we typically start with a theme styles. So every single project will typically have some kind of primary colors, secondary colors, background and border colors, button styles, and so on. These are all extracted and put into some kind of CSS file, usually using variables, so they can be reused throughout the project. From there, it's on to building out components. So items like buttons and cards become their own components with CSS files dedicated to any styles that pertain to those specific components. The last part entails piecing together this entire design by taking all the styles and components we built and turning them into a complete app using a modular approach. If you're using a website builder or some kind of low code tool, you can often find plugins that allow you to connect your Figma design to your specific tool. One popular plugin is Wix's Figma to Wix Studio plugin, which allows you to convert your entire design into a functional website by simply importing it into your Wix builder. Let me show you how this works. First, we're going to find the Figma to Wix Studio plugin and follow the default steps to set things up. Here, it's going to tell me that I need to copy my Figma URL and paste this into my Wix Studio account, which I already have. From Wix Studio, I'll go to my workspaces. Make sure that I'm on the sites tab. And here I'm going to go ahead and create a new site by selecting start from blank canvas. This will give me a canvas where I can begin building my website. And what I want to do here is start with a clean slate and import what I have here directly from Figma. So to do so, I'll go to the Wix logo on the top left, select tools in the drop down here, and we'll see import from Figma. I'll paste in my Figma project URL that I have copied and we'll click on connect. Here we'll see any extra steps that we need to take like importing our styles and fonts, which we should do. But for now, I'm just going to go ahead and skip this and go down here to add in my frame. We can add in our frame as an entire page. However, I only have a partial design. So, we're just going to select section. As a side note, I have noticed that people have had better luck importing sections of a page instead of an entire page. So, if you run into any issues, try to import frame by frame. And this way, if any issues happen to come up, it's a lot easier to fix things when they're not working the way they should be. So, with that being said, I'll finish this up by clicking add to site. And I'm going to give this a few minutes to build out. Okay, so that finished the import. And here is my active website from Figma. What makes Wix Studio so great is that after we import our site, we can continue editing from here similar to how you would in Figma by dragging and dropping our elements. We can add new elements from this selection like buttons, cards, input fields, and we can even use AI to make changes like making our site responsive. And this is easy as a simple click. The best part about Wix Studio is that it's an all-in-one package for building your websites. So, this means that you can create real e-commerce stores through Wix to display real products and even process payments. Once we're ready to publish our site, this can be done with a simple click and the site is ready to go. All right, so that's it for the Figma mini crash course. I hope you learned a ton. And if you're interested in diving deeper into Figma, make sure you're subscribed because I will be dropping the one to twohour long course any day now. So, make sure to check that out and I'll see you all in the next