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