WEBVTT 00:00:00.036 --> 00:00:06.056 >> Figma is a vector design tool that runs in the browser. 00:00:06.056 --> 00:00:15.386 Use Figma to brainstorm ideas, iterate on designs, create prototypes, 00:00:15.466 --> 00:00:18.196 and get feedback at any stage of the creative process. 00:00:18.896 --> 00:00:23.736 In this beginner's course, we're going to take you through the key stages of designing an app 00:00:23.736 --> 00:00:27.936 in Figma, from the initial wireframes to an interactive prototype. 00:00:28.276 --> 00:00:31.196 We'll cover the basics, and introduce more powerful features 00:00:31.196 --> 00:00:34.326 like auto layout, components, and prototyping. 00:00:34.326 --> 00:00:38.386 There's something for everyone, whether you're new to design or new to Figma. 00:00:38.936 --> 00:00:42.616 We won't cover all these features in depth, but we'll provide you with resources 00:00:42.646 --> 00:00:45.986 to continue your Figma education. 00:00:48.096 --> 00:00:52.666 Sign up for a free Figma account at figma.com. 00:00:52.666 --> 00:00:57.796 With the Figma account, you can create teams, shared workspaces, or you can collaborate 00:00:57.796 --> 00:01:00.246 on files and organize them in projects. 00:01:00.956 --> 00:01:04.426 Choose from a free starter team or a paid professional team. 00:01:04.786 --> 00:01:08.066 If you are a student or educator, you can get access to all 00:01:08.066 --> 00:01:10.036 of Figma's professional features for free. 00:01:10.076 --> 00:01:15.936 Visit figma.com/education/apply to verify your education account. 00:01:15.936 --> 00:01:24.606 Once you've created your team, you can invite members to collaborate. 00:01:24.606 --> 00:01:29.096 This will give them access to all the projects and files in your team. 00:01:29.096 --> 00:01:31.806 You can choose what level of access each team member has. 00:01:32.156 --> 00:01:35.236 Learn more about creating teams and inviting members 00:01:35.446 --> 00:01:40.566 by searching Teams in the Figma Help Center. 00:01:40.656 --> 00:01:43.536 We're pretty sure we've got the next million-dollar idea: 00:01:43.606 --> 00:01:45.566 a social media app for pets. 00:01:46.566 --> 00:01:50.586 We want some feedback on the general layout before we start exploring specific elements 00:01:50.586 --> 00:01:51.366 of our design. 00:01:51.816 --> 00:01:54.576 Wireframes are simplified designs that are devoid 00:01:54.576 --> 00:01:57.906 of any style, like color, type, or imagery. 00:01:58.456 --> 00:02:02.216 They allow us to map out user flows and explore different ways we structure our app 00:02:02.476 --> 00:02:06.026 without having to design any elements or add any content. 00:02:06.726 --> 00:02:12.186 We start our journey in the Figma editor. 00:02:12.276 --> 00:02:15.206 The canvas is the backdrop for all of your designs. 00:02:15.506 --> 00:02:19.366 It's where you'll add all the frames, shape, text, and images. 00:02:19.566 --> 00:02:22.866 There are no bounds to your creativity, but you should know 00:02:22.866 --> 00:02:27.616 that the canvas extends approximately 65,000 points in each direction. 00:02:28.036 --> 00:02:36.246 With the great expanse that is the canvas, we need something to put our designs in. 00:02:36.246 --> 00:02:36.856 Enter frames. 00:02:36.856 --> 00:02:41.616 Frames are the containers we place our shape, text, and image layers in. 00:02:41.616 --> 00:02:46.636 You can think of each frame in the canvas as a single screen of your design. 00:02:46.636 --> 00:02:49.886 The toolbar contains the tools we need for creating layers. 00:02:50.386 --> 00:02:52.116 Select the Frame tool in the toolbar. 00:02:53.186 --> 00:02:58.456 Frame presets in the sidebar on the right let us create frames with specific dimensions. 00:02:58.456 --> 00:03:04.066 We know that we're making a mobile app, so we'll select Google Pixel 2XL from the presets. 00:03:04.956 --> 00:03:06.736 Two exciting things just happened. 00:03:07.156 --> 00:03:11.536 Figma added a frame to our canvas and the sidebar on the left is no longer empty. 00:03:11.536 --> 00:03:15.636 Everything that we add to the canvas will also be added to the Layers panel. 00:03:15.636 --> 00:03:26.526 Let's right click on this frame and name it to Home. 00:03:26.526 --> 00:03:31.356 To explore more of the canvas, we can use two fingers on a trackpad or the scroll 00:03:31.356 --> 00:03:33.136 on the mouse wheel to pan around. 00:03:33.136 --> 00:03:38.466 We can also press and hold the space bar and click and drag to pan. 00:03:38.466 --> 00:03:40.566 Let's zoom out so we can see the entire frame. 00:03:40.566 --> 00:03:46.296 If you're using the trackpad, you can also use the pinch gestures to zoom in and out. 00:03:46.296 --> 00:03:51.206 You can also use shortcuts like Command Plus and Command Minus to zoom in or out. 00:03:51.206 --> 00:03:55.406 For granular control, adjust the zoom level in your view settings up here. 00:03:55.406 --> 00:04:02.136 Now, we're ready to add some layers to our frame. 00:04:02.136 --> 00:04:06.436 As this is a wireframe, we're going to keep it basic and use shapes like rectangles 00:04:06.436 --> 00:04:10.806 and ellipses to represent more complex aspects of our designs. 00:04:10.936 --> 00:04:14.896 We'll select the rectangle tool to create an image for a post on our app's home page. 00:04:14.966 --> 00:04:19.056 Just like frames, every layer in the canvas has dimensions. 00:04:19.176 --> 00:04:23.276 We can adjust a layer's position and dimensions at the top of the right side bar. 00:04:24.016 --> 00:04:27.496 We want our rectangle to take up most of the horizontal space in our frame, 00:04:27.796 --> 00:04:36.216 so let's make the width of our rectangle 380, and a height of 300. 00:04:36.216 --> 00:04:41.086 If we look in the layers panel again, we can see that our rectangle is within our home frame. 00:04:41.326 --> 00:04:44.176 Some layers, like frames, can contain other layers. 00:04:44.756 --> 00:04:48.696 If we move our rectangle outside of the frame, the layers panel updates, too. 00:04:48.696 --> 00:04:52.056 We're going to place our rectangle back inside of our frame. 00:04:52.056 --> 00:04:55.226 Figma will help us snap the position of the rectangle 00:04:55.226 --> 00:05:01.396 to align it to the center of the frame. 00:05:01.396 --> 00:05:06.606 Cool. Now we're going to create a shape that represents a user's profile picture or avatar. 00:05:06.606 --> 00:05:10.166 Select the Ellipse tool on the menu and click to start drawing the ellipse. 00:05:10.246 --> 00:05:14.446 If you hold down Shift as we drag, we can create a perfect circle. 00:05:15.176 --> 00:05:18.726 We'll release to create the avatar with dimensions of around 30 by 30. 00:05:19.156 --> 00:05:22.096 Holding Shift can strain the proportions of our ellipse. 00:05:22.546 --> 00:05:26.186 If we update one value in the right-side bar, the other will update, too. 00:05:26.826 --> 00:05:29.616 We can click into the width field and use the arrow keys 00:05:29.616 --> 00:05:31.706 to nudge the ellipse's dimensions to 30. 00:05:32.496 --> 00:05:34.736 Some fields in Figma accept equations. 00:05:34.736 --> 00:05:38.636 We can use equations to resize layers by adding, subtracting, 00:05:38.766 --> 00:05:41.866 multiplying, or dividing the existing value. 00:05:42.426 --> 00:05:50.316 Let's add plus 10 to the field to set the dimensions of our circle to 40. 00:05:50.416 --> 00:05:53.436 Basic shapes support both fill and stroke properties. 00:05:54.076 --> 00:05:57.886 We can see these in the right sidebar when we select both of our layers. 00:05:57.886 --> 00:06:03.576 By default, our layers have a fill of grey, but you can choose another color. 00:06:03.576 --> 00:06:08.456 Enter a hex code in the field or click the Swatch to open the color picker. 00:06:08.456 --> 00:06:11.896 We can select colors from the Palette, or apply other fills 00:06:11.896 --> 00:06:15.076 like gradients, images, and even animated gifs. 00:06:15.076 --> 00:06:19.746 We can also remove the fill entirely by clicking the minus button. 00:06:19.746 --> 00:06:24.816 We want our wireframes to appear like outlines instead of solid shapes. 00:06:25.276 --> 00:06:27.636 We can do this by adding a stroke. 00:06:27.746 --> 00:06:30.136 Strokes are outlines or borders around layers. 00:06:31.046 --> 00:06:38.556 We've learned to align layers to their frames, but we can also align objects to each other. 00:06:39.356 --> 00:06:41.996 Let's use the alignment tools to align the layers to the left. 00:06:42.166 --> 00:06:47.206 As our avatar layer is smaller, Figma will align it to the larger image layer. 00:06:47.326 --> 00:06:50.206 Now, we need a username to go with our avatar. 00:06:50.576 --> 00:06:55.776 Select the Text tool, click a spot on the canvas next to our avatar, and type in name. 00:06:55.896 --> 00:06:58.916 We'll cover adjusting text properties later in the series. 00:06:59.846 --> 00:07:03.416 We want our text layer to align to the center of our avatar. 00:07:03.416 --> 00:07:08.206 Drag over multiple layers to select them all at once and click Align Vertical Center. 00:07:08.266 --> 00:07:11.866 If we want to make small adjustments to a layer's position, 00:07:12.146 --> 00:07:15.406 we can use our arrow keys to nudge objects on the canvas. 00:07:15.496 --> 00:07:19.396 Looks good to me. 00:07:20.726 --> 00:07:25.446 Users will want to engage with each other by commenting, liking, and saving posts. 00:07:25.446 --> 00:07:30.556 Let's press R to select the Rectangle tool and create some icons for these actions. 00:07:30.556 --> 00:07:34.996 We'll use Shift again to constrain the proportions and create a perfect square. 00:07:35.116 --> 00:07:38.236 Let's aim for dimensions of 32 by 32. 00:07:38.236 --> 00:07:43.526 Instead of drawing three separate squares, we can copy the original layer. 00:07:43.526 --> 00:07:45.866 There are a few ways to copy layers. 00:07:46.096 --> 00:07:50.966 Hold down Alt or Option and click and drag on our layers to duplicate it 00:07:51.056 --> 00:07:57.506 or press Command D. Figma will maintain the same distance between objects. 00:07:57.506 --> 00:08:02.496 If we want to change the uniform spacing between them, we can select our layers 00:08:02.496 --> 00:08:05.576 and update the horizontal spacing in the right sidebar. 00:08:06.036 --> 00:08:07.626 We'll need some text below our image. 00:08:08.116 --> 00:08:09.896 Let's add that. 00:08:09.896 --> 00:08:15.436 All these layers make up a single post. 00:08:15.496 --> 00:08:20.566 We want to be sure these objects stay together. 00:08:20.626 --> 00:08:22.986 There are two ways we can group layers. 00:08:23.166 --> 00:08:27.406 We can use the keyboard shortcut, Command G, to create a group out of these layers. 00:08:28.026 --> 00:08:29.866 Groups allow us to move a collection of layers 00:08:29.866 --> 00:08:32.826 around without having to select each individual layer. 00:08:32.966 --> 00:08:36.386 We can use Groups or Frames to organize our Layers panel. 00:08:37.266 --> 00:08:41.486 While Frames and Groups look similarly in the Layers panel, they are fundamentally different. 00:08:41.486 --> 00:08:45.756 Groups are the sum of their parts and have no properties of their own. 00:08:45.756 --> 00:08:50.796 We can use Groups to organize our layers or apply properties to layers in bulk. 00:08:50.796 --> 00:08:53.756 Frames, on the other hand, can have their own dimensions and properties, 00:08:53.756 --> 00:08:56.246 some of which can affect the layers within them. 00:08:56.246 --> 00:08:59.596 We'll learn more about frames and their properties later in this series. 00:08:59.596 --> 00:09:04.126 From the right sidebar, we can convert our group into a frame. 00:09:04.696 --> 00:09:09.956 Then we'll copy this frame using the keyboard shortcut to create a second post for our feed. 00:09:10.746 --> 00:09:19.676 We'll move the other post below the other post in the frame. 00:09:19.676 --> 00:09:21.076 The feed is starting to take shape, 00:09:21.076 --> 00:09:24.576 but we're missing some crucial elements to make it look like an app. 00:09:24.806 --> 00:09:29.166 We need a status bar and a navigation menu to move between pages in our app. 00:09:29.306 --> 00:09:33.046 We could make these elements using shapes, or we could rely on components 00:09:33.046 --> 00:09:34.846 and libraries to speed up the process. 00:09:35.206 --> 00:09:37.646 Components are the building blocks of our designs. 00:09:38.136 --> 00:09:40.876 They can be basic UI elements like buttons or icons, 00:09:40.876 --> 00:09:43.906 or more elaborate compositions like toolbars and menus. 00:09:44.706 --> 00:09:47.206 Libraries are collections of components and styles. 00:09:47.746 --> 00:09:53.656 You can use libraries in Figma to create, share, and use components across your files. 00:09:53.716 --> 00:09:55.356 You might have heard of a design system. 00:09:55.836 --> 00:09:58.946 Design systems combine component libraries with standards 00:09:58.946 --> 00:10:01.526 and guidelines for implementing them in code. 00:10:01.526 --> 00:10:04.076 They're a single source of truth for designers and developers 00:10:04.296 --> 00:10:06.856 and help to create consistency at scale. 00:10:07.106 --> 00:10:09.936 Let's look for a component library in the Figma community. 00:10:09.936 --> 00:10:13.646 The Figma community is a space where creators can share resources 00:10:13.646 --> 00:10:15.716 in the form of design files and plugins. 00:10:15.716 --> 00:10:18.386 We're going to use this wireframe UI kit, 00:10:18.386 --> 00:10:20.976 so we'll duplicate the file and add it to our drafts. 00:10:22.146 --> 00:10:25.956 We could copy components from this file and paste them into our wireframes. 00:10:26.496 --> 00:10:29.296 We're going to publish these components to a library instead 00:10:29.686 --> 00:10:31.196 to make them available to our team. 00:10:31.806 --> 00:10:34.636 We'll open the file in the editor and click the arrow next 00:10:34.636 --> 00:10:37.816 to the file name and select Move to Project. 00:10:37.816 --> 00:10:42.236 As components can only be published in a team, we'll move this to a project in our team. 00:10:42.436 --> 00:10:47.856 Now, we can go to the same menu and select Publish Components and Styles. 00:10:48.006 --> 00:10:52.416 We can enter a description of our library and press Publish to share it to our team. 00:10:52.906 --> 00:10:56.296 Back in our original file, we can now access that library 00:10:56.526 --> 00:10:58.906 in the Assets panel of the left sidebar. 00:10:58.906 --> 00:11:01.306 Click the book icon to open the library's modal. 00:11:01.306 --> 00:11:04.646 Toggle the switch to enable the wireframe in our file. 00:11:05.176 --> 00:11:06.646 Let's resize the left sidebar. 00:11:06.646 --> 00:11:11.976 Hover over the edge until the cursor appears, then click and drag to resize. 00:11:12.496 --> 00:11:16.776 Okay, we need components to represent the status bar at the top of the screen, 00:11:16.776 --> 00:11:20.756 and a floating action button, or FAB, at the bottom. 00:11:20.756 --> 00:11:22.506 This generic status bar is perfect. 00:11:22.506 --> 00:11:26.066 To add this component to our file, we can click on the component 00:11:26.066 --> 00:11:29.446 in the assets panel and drag it onto the canvas. 00:11:29.446 --> 00:11:33.166 We'll position the status bar near the top of the frame and release to place. 00:11:33.286 --> 00:11:36.186 We'll align to the top and left. 00:11:36.296 --> 00:11:41.226 Let's repeat this process for the FAB and place it in the bottom and the right of the frame. 00:11:41.226 --> 00:11:48.076 Now, we have copies of these components known as instances. 00:11:48.076 --> 00:11:52.356 Instances are connected to the main component they originated from. 00:11:52.866 --> 00:11:55.046 If you make a change to the main component, 00:11:55.046 --> 00:11:58.256 Figma will also apply those changes to any instances. 00:11:58.506 --> 00:12:02.046 This saves you from having to manually update every instance when you want 00:12:02.046 --> 00:12:07.426 to change properties of your component. 00:12:07.426 --> 00:12:10.776 Our eventual application will need to adapt to different screen sizes. 00:12:11.036 --> 00:12:14.886 If we want to resize our frame now, our components don't change. 00:12:15.636 --> 00:12:20.316 We can make sure they respond to different frame sizes using constraints. 00:12:20.316 --> 00:12:23.946 At the moment, our constraints are set to the top and left by default. 00:12:24.446 --> 00:12:27.246 We want the status bar to take up the full width of the frame, 00:12:27.246 --> 00:12:30.086 so we'll keep the vertical constraints at top 00:12:30.196 --> 00:12:32.706 and set our horizontal constraints to left and right. 00:12:33.416 --> 00:12:36.266 We'll set the constraints for the fab at the bottom and right. 00:12:36.266 --> 00:12:41.886 Now, when we resize our frame, the components will respond according to their constraints. 00:12:41.886 --> 00:12:48.686 Our app is starting to come together. 00:12:48.766 --> 00:12:51.116 Let's create a frame for our menu. 00:12:51.296 --> 00:12:53.926 Select the frame in the toolbar or press the F key. 00:12:53.926 --> 00:12:57.956 We'll add another Google Pixel 2XL preset to the canvas. 00:12:58.446 --> 00:13:01.496 Let's add some text layers for each page in our app. 00:13:01.496 --> 00:13:05.366 Press T to select the text tool and click to create a new text layer. 00:13:05.896 --> 00:13:08.016 We'll type in menu item for now. 00:13:08.106 --> 00:13:13.366 We want all our text layers to be the same width, so we'll set the width to 200. 00:13:13.366 --> 00:13:15.876 We'll also increase the font size to 20. 00:13:16.016 --> 00:13:21.816 Let's duplicate this layer to create four more menu items, one for each page in our app. 00:13:21.816 --> 00:13:25.826 Hold down Alt slash Option, then click and drag to duplicate. 00:13:25.986 --> 00:13:29.156 Then, use the duplicate shortcut. 00:13:29.586 --> 00:13:34.116 Let's copy the status bar in Fab from our home page to complete our menu page. 00:13:34.286 --> 00:13:39.656 We'll Click to select the status bar, hold down Shift, then Click to select the Fab. 00:13:40.086 --> 00:13:44.186 We'll then use the shortcut Command C to copy them to our clipboard. 00:13:44.286 --> 00:13:47.276 Select our menu frame and press Command V to paste. 00:13:47.316 --> 00:13:50.486 Figma pastes them in the same position as this frame. 00:13:51.136 --> 00:13:58.166 Nice. I think there are some other ways we could lay out this menu page, 00:13:58.166 --> 00:14:00.096 so let's explore some different approaches. 00:14:00.096 --> 00:14:10.826 Okay, we have a few designs here, but I'm not quite sure which approach to take. 00:14:10.826 --> 00:14:14.756 We could set up a design critique and schedule some time on the calendar, 00:14:14.756 --> 00:14:18.136 but I wonder if anyone on the team is around to help me choose. 00:14:18.236 --> 00:14:20.946 We'll click the Share button in the toolbar. 00:14:20.946 --> 00:14:26.626 As we've already invited everyone on our team, we don't have to invite them to every file. 00:14:27.326 --> 00:14:30.376 We'll click Copy Link and drop the link in our team channel. 00:14:30.376 --> 00:14:35.496 Our team has some existing sticky note components which we love to use for feedback. 00:14:36.226 --> 00:14:39.716 I'll enable that library in this file while I'm waiting for our team to arrive. 00:14:40.886 --> 00:14:44.146 Our team members avatars are showing up in the toolbar. 00:14:44.146 --> 00:14:53.336 To jump to their location on the canvas, we can click on their avatar to enter observation mode. 00:14:53.336 --> 00:14:56.396 It sounds like our team loved the simplicity of our first design, 00:14:56.396 --> 00:14:59.456 but thought that a back button would be better than our fab. 00:15:00.366 --> 00:15:03.776 Someone suggested the menu could be underneath the rest of our content. 00:15:03.776 --> 00:15:05.576 I like that idea. 00:15:05.696 --> 00:15:10.706 Another person pointed out that the center text makes it hard for users to scan quickly. 00:15:11.066 --> 00:15:13.006 That's a great point. 00:15:13.476 --> 00:15:17.646 It looks like fellow design intern Daniel is creating a new version of the menu, 00:15:17.776 --> 00:15:20.946 which incorporates some elements of each of our designs. 00:15:20.946 --> 00:15:23.526 This looks awesome and everyone's on the same page. 00:15:23.586 --> 00:15:27.906 I'm glad we got some feedback on our wireframes before we invested 00:15:27.906 --> 00:15:30.326 in some higher fidelity designs. 00:15:30.326 --> 00:15:32.456 Now, we know which direction to go in. 00:15:32.456 --> 00:15:37.336 We'll see you in our next video where we explore color, typography and imagery.