From the course: Figma: Handing off to Developers

Project introduction - Figma Tutorial

From the course: Figma: Handing off to Developers

Start my 1-month free trial

Project introduction

- [Instructor] For our test project we'll use one that was created in the previous course of mine with Sketch. Let's open the project in Sketch first, and explore what the project is. If you don't have Sketch installed, feel free to take a look at the supplied images to see what the project looks like. So if you go in the exercise files, you'll see we have a Sketch file here and we have also the images. So, if you don't have Sketch or you can't open this file, what you can do is use the images here and take a look at them and what is the flow. So in the meantime what I'm going to do is open the Sketch file here, like so. And this is what the project looks like. So this is a purchase flow based on an application for a sports company. So we have here the actual products. We can actually scroll through the different categories and select a product. Once you select a product you have the full view or the item details where you can actually purchase the item. Once you purchase it, it's going to bring that into your cart, and you can actually go through the process of purchasing the item by entering quantities, shipping information, and then your payment information, and then place the order. And you have a success view where it shows you that the order has been placed. There's also a view that we call the user area where you have the information of the user and they can go to this area by clicking on the user icon here on the left. So all these views have their own categories here. So shopping view, item detail, and so on and so forth. We also have some symbols in here. So these are the equivalent of components inside of Figma. So we have this component or this symbol that is reused across all our designs. So this is basically the background here. So if I make any changes such as deleting this particular area here. You're going to see this apply to all our designs that are using this particular background. So let's undo that and make sure we still have our icons at the top. And now we have also the inspiration for the initial designs. And these were all explored in the initial course. If you want to do this design in Sketch, feel free to take the course that I've done where we're actually exploring this. Okay, so now that you know what it looks like we're going to use a Sketch file fairly soon to import these designs inside of Figma. Let's move on.

Contents