Project Setup6:56 with Nick Pettit
Setting up a Figma Project is easy. Each project can include multiple design documents called "files" and each Project belongs to a team.
FIGMA is a free web based tool that you use in your browser so 0:00 there's no need to install any software. 0:03 To follow along, head over to figma.com and 0:06 you should see a webpage that looks similar to this one. 0:10 There are desktop versions available if you prefer that instead. 0:17 And there are also some paid plans with additional features. 0:20 However, it's free to get started. 0:25 To create an account, click Sign Up in the upper right corner and 0:27 follow their sign-up process. 0:31 Or if you already have an account, feel free to sign in. 0:34 Once your logged in you'll be greeted with a screen that looks similar to this one. 0:40 It has a few images in the middle, probably just these first three and 0:46 not these three that I have at the top. 0:51 And on the left there's a sidebar going down the side. 0:54 This whole screen is what's called the files view. 1:00 On the left side you should find a Drafts section. 1:04 And this is a place for files that haven't been categorized yet. 1:09 In the middle, each one of these rectangles is 1:13 a file with a preview image and a label. 1:18 A file is very similar to a file you might work with in a program like Photoshop or 1:23 Illustrator. 1:29 It's a single unit of visual composition within Figma. 1:30 We could create a file and just let it sit in this drafts folder. 1:35 With all these other templates and samples but lets properly categorize it first. 1:41 On left side, we can create a new team using the New team 1:48 button at the bottom left corner. 1:53 I already have a team called TreeHouse, so 1:56 I am just going to create a new team, and I'll call it my team. 2:01 But you can name yours whatever you'd like. 2:08 So I'll hit Create Team. 2:10 And it will ask you to choose a team plan. 2:13 But let's just say let's get started for free that's fine. 2:16 And on the left here you can see I have created this new team called My Team 2:20 in addition to a team I already have called TreeHouse. 2:25 In Figma multiple people can be invited to a team as team members. 2:28 And they can share Figma files among one another and 2:35 collaborate on them in real time. 2:37 Each team in Figma can have multiple projects which acts as a folder or 2:39 a container for files. 2:45 I'm going to create a project by clicking the create a project button here, 2:48 or you can also choose New Project on the left. 2:53 And as soon as you click that it will ask you to name the project here. 2:57 So I am just going to call this Photo App and hit enter. 3:03 And it will immediately take me to this new project. 3:11 Before we create a new file inside this project, 3:17 we'll need a few resources to help us out. 3:20 First, download the image files associated with this video. 3:23 We'll import these image files in a moment. 3:28 While it's downloading, click the link in the notes associated 3:31 with this video that says Facebook iOS 10 Figma. 3:36 This will duplicate a Figma file into your drafts section. 3:39 This file is from Facebook's official design resources, 3:47 and it contains reusable design elements from iOS 10. 3:52 This of course isn't the latest version of iOS, but 3:57 for the purposes of our prototyping example, it will work just fine. 4:00 Now inside of the Photo App project, click the New File button. 4:05 And this will automatically open a new file. 4:14 At the top is a toolbar where we can choose different 4:19 manipulation tools and change various settings. 4:24 On the left side is the layers pallet where we can rearrange 4:28 the stacking order of layers as well as group layers together. 4:33 Right now it's blank because there's nothing in this file. 4:38 On the right side is the inspector which provides more settings and 4:43 details about the currently selected object. 4:48 There's nothing in the file to select, so when nothing is selected, 4:52 it will select the canvas. 4:57 Which is the big area in the middle of the screen that we'll use to layout objects. 4:59 As we build the project, I'll go over the interface in more detail. 5:06 For now, at the top, let's rename this file by choosing 5:09 the arrow next to the files title and choosing Rename. 5:14 So we'll change this to something like Prototype and then hit Enter. 5:21 If you started downloading the images associated with this video 5:28 earlier the download should be just about done. 5:32 When they're finished unzip the file and inside you'll find five photos. 5:35 I could have included these in another Figma file, but 5:42 I wanted to show you how can import images on your own. 5:46 Back in the Figma file in the upper 5:49 left corner, click the menu icon, 5:54 and choose file, place image. 6:00 Then in your operating system's file browser, 6:04 navigate to where you unzipped the images. 6:08 So in my case it's in my downloads folder, under photos, and 6:11 here are those five images. 6:16 Now lets select all of them, and 6:18 you can do that by clicking the one at the top, holding down the Shift key, 6:20 and clicking the one at the bottom and then choose open. 6:25 Then in the upper left, click the button that says Place All. 6:31 And when the images are placed, they'll be at full resolution, 6:37 which is much larger than we need. 6:41 And they'll also be overlapping one another, that's fine for now. 6:44 In the next video we'll learn how to adjust these to be a more reasonable size 6:48 and then arrange them on the canvas. 6:53
You need to sign up for Treehouse in order to download course files.Sign up