Figma project overview - Figma Tutorial

If you're in a designer role, you'll need to share your Figma design file, or at least assets and information derived from it, with your development team. If you're in a developer role, you need to access the completed design prototype and be able to draw assets and information from that. We'll cover both of these workflows across this chapter. Before doing that though, let's have a walk-through of the completed Figma design prototype that we'll be using. Here we can see it in design mode. We have our little assets here, some components, and colors, and so forth. And then along to the side, we have our different screens for the website. So we have our home screen, our history screen, products, and water. These are also represented on the navigation for each page. Each one of these screens has two different states to allow for a bit of automated animation when the page loads. There is a begin state and then the actual home screen with everything revealed. It's the same thing for each of these other screens. Although water has a bit more complexity to it. This is the main water screen, and a user is able to click on the Nutritional Information button in order to swap out this image here with nutritional information labeled data, and also see a nice little piece of text copy down below represented like this. If we go into our prototype mode and have a look at our different interactions, we can see that most of these are driven directly from our navigation. There is a delay that occurs here which enables this initial transition. It reveals the content of each page. Lastly, if we go over to our assets here, we can see that our nav items have a hovering for each state here to change to specific states using Smart Animate. There are pretty much two different items to each of these variants. If we look inside, we have our text and then we have the little underline. And depending upon our particular variant, it's going to depend if these items are visible and what color they are. In the case of the little underline, it's only truly visible and actually changes its width in the middle state here when somebody is hovering over it. To get a better idea of this, let's go ahead and preview it once again before we move on. I'm going to click Present here and we'll move into presentation mode. We can see the content come in. When I hover over each of these items, we get that little navigation animation. And of course, when I click on one of those, it switches to that screen. We get the delay which animates in our content for each of these. For our water page, I click on Nutritional Information here and everything swaps out. Now that we're familiar with how the project is arranged, we'll next share the project with the development team using Figma workflows.