 Welcome to this workshop and I'd like to guide you through the process of creating a Figma account and what is going to happen as soon as you click on create account and all that stuff. So I've just went through the process of clicking on sign up and then choosing Google to sign up with and as soon as you have acknowledged all these sign up things on your phone, then you can now start continuing the sign up process. So my name is Mattias Mali, let's say I do design, I do not want Figma's mailing list and I create an account. You will start thinking for a little while and then it will refer you to your Figma home screen so that is where you enter and where you come in. So a short tutorial will pop up, you can choose to follow this but for now we will just click the cross and see what is on the page here. So on the left you will have an overview of all the projects and teams that you're going to be working with. It will by default show you your recent files that you've been working on. So let's first create a new team so we can start on this workshop. So we click on the button new team here and we'll just call it the recipe team since that is what we are going to make. Click create team and your team will now be created. If you are collaborating with multiple people you can add their email addresses and they will send an email or be invited to your workspace right away. We will skip that for now and then we have to choose our plan. Since we are just trying out the software right now I think it's very good to just go for the free one but as soon as you start really actively collaborating it's a very good choice to go for the professional plan. So let's pick choose starter and another tutorial pop up will be shown right away. We will close that for now and as you can see we now have a team on the left side here and we can see the members that are in there so in this case it's just me. And let's create a new project within this team in order to get started. So let's call the project the recipe app and click create project. Now we have created our first project and Figma is immediately trying to help us again by showing this tutorial. Let's close that for now as well. So within this recipe team we now have a project called recipe app and we can import files but we can also create a new one from scratch. So if we just click new file a new file will be created that we can start working on and that is what we will be doing in the next lesson. You have your Figma account all set up and now it's time to create our first file. So if you have your teams and projects ready you can now open the project within that specific team on the left side and as you see there are no files here yet you can import your files here but we can also click on new file in the top right corner. As soon as we do that you will see that a new page is loaded where you can now start creating your art. I will quickly go through all the different parts of this screen. So on the top you will have the toolbar where you have a basic menu item where you can go through all sorts of settings. In reality you will hardly ever use this. Then there is the different selection tools that you have. There is the frame tooling also known as artboards in for example illustrator. Then there are the shape tools which allow you to make rectangles or lines or ellipses polygons etc. There is the pen tool, there is the text tool and then there is also the comments tool. And on the top right we have our own avatar or icon, a share button with which we can allow others to see the artboard that we created, a play button to start previewing our prototype, some zoom options as well. And on the left side here we have a pane in which our layers will show up later. We can also switch that to an assets view, it's like a different tab and here you have an overview of all the components that have been made. The center area over here is the area where we will start creating our design. And on the right side we have a panel which is containing three different tabs, design, prototype and code. The design tab is primarily used to set properties for all different shapes and art that you have been making. The prototyping tab will be used in order to make your designs interactive and the coding tab will allow you to quickly see the CSS code or for example the Android code for the design that you have been creating. If at any point you find yourself lost or something there is also a question mark on the bottom right which you can click to quickly get to some help and resources. We have our new file ready, we can now start adding some designs into that. And in order to do that we first need a sort of clean sheet of paper on which to work that is called the artboard. So if you press the letter A on your keyboard you will enter the frame mode or the artboard mode where you can create a new artboard. On the right side you see there are some defaults that will pop up that you can use in order to create your artboard. For example if you click iPhone 8 you will see there is immediately a size iPhone 8 artboard on your screen. For now let's delete this and create one of our own dimensions. So let's just click and drag until we have a nicely sized artboard. Good thing to do right away is to rename the artboard to what you are going to make. So for this one we can double click on the title of the artboard as you can see the text is now selected here. You can also press command R or control R in order to get into rename mode. So for now let's just call it test it doesn't really matter what you call it but it's good for you to know that these options are there. Next what we are going to do we are going to put some very basic shapes on top of that. So let's get to the shape tool, choose rectangle and click and drag in order to make this rectangle appear on the screen. Let's also add a little ellipse here and click and drag and make sure to do it on the right side of the rectangle otherwise you will miss what I'm going to point out. So you'll see that when you click and drag it becomes sort of elliptic and what we want we want it to be perfectly circular. So we hold the shift key while we click and drag and then we let go and then we have a perfectly dimensioned circle. These shapes can be given different properties. So on the right side there is a property area where you can see I now have the circle selected and the circle is 128 by 128 pixels. Let's do some basic settings for now so let's change the color. So as we see here we can set the color to for example red. We can drag the U slider around here and make it green. If we click outside of this area or click on the cross the settings will be applied and we can go change the color for our rectangle. What we can do here for example is set the color but not choose a solid color but choose a linear gradient which usually makes scenes more appealing. So if we click here we can now choose radial or linear so let's go with linear for now and as you can see and gradient is immediately applied. We can change all the different steps within that gradient so we can add steps in between and say here it should be red and here for example it should be more yellowish. So that's how we can create this gradient up there. As you can see it fades into this transparent method. That happens because at the end here we have one set to 0% transparency. It's also being auto adjusted for the other one so make sure if you're making a gradient that you always have the right transparency set for your image. Then what we can do with these shapes we can align them together. So if we click on the rectangle that we made for example we can now use the alignment tools at the top in order to align it. So we can left align this one, center, right, top, middle or bottom. For now let's do center and center so we have a perfectly aligned rectangle there. For the circle we will do the same we will also align it to the center and now we have a nice sort of weird flag going on here. Now what we're going to do we're going to do some very basic boolean operations which means that we are going to combine these two shapes. So now we have just a circle selected and if we hold the shift key and click on the rectangle you will see that we now have both layers selected as you can see here and also a new option appeared on the top right here. These are the boolean operations and this allows us to combine different shapes into a new shape. So for now let's go through them quickly so we have union which basically means these shapes will be put together into one new big shape. Subtract which means the layer on top will be removed from the layer on the bottom. Intersect which means the intersection will be kept and exclude which means the intersection will be excluded. So for now let's do subtract and we'll see that the circle has been removed. Same goes for the color because it's been removed from the rectangle of course and we now have a new shape that we can use in our design. On top of that we can still access the original circle that was below that. So if we go to our layers panel on the left and we open the layer here we'll see that the circle is still here. So if we click the circle and move the circle around we can still edit the shape while keeping the single layer nature of the boolean operated shape. So we can still move this around. It is a very powerful feature to know and you will be working with this a lot I think in the future. Now that we have our basic shape it might be nice to add some little text to it. So we're going to move the shape a bit to the left and press the T button or on the toolbar on top text to create a new text area. Now to create some text we can just click in the area anywhere we want and it will automatically create sort of an open space for a sentence that we can type. So if I type sentence here this blah blah blah. We will just have a sentence there and when we click outside of that text area again it will be made into a layer that we see over here. Another thing we can also do is we can create by clicking and dragging an area where we will automatically when we come to the end of the line it will automatically jump to a next paragraph. This might be useful when you are going to create text that has to be contained within a specific box for example. Now when we have a text layer we can do various things with it. So we can set for example the font weight we can say it has to be bold we can increase the size decrease the size over here. We can of course click the arrow but a quicker thing to usually do is you select the size and then hold shift and press the up arrow in order to increase it by steps of 10 or decrease it by steps of 10. So then we have a nice piece of text. We can align it of course horizontally on the right on the left and all that but as you can see with the text area that I made here when I center it it doesn't really change because the text box was actually sizing while I was typing whereas with this one if I would center it it is now properly centered or aligned to the right. That is an important thing to know of course there are some more settings here that allow you to do very advanced text editing but that is not important for this quick tutorial. More important is the amount of fonts that we have within Figma. So Figma allows us direct access to all the fonts in the Google Fonts library. So if we open fonts.google.com we will now find an enormous amount of fonts that are available to us and that we can use in our designs. So if we type something here so we want a cupcake company which might be the title of some logo that we're going to make. We can search for fonts by choosing for example only Serif fonts remove the monospacing say I want a number of styles like three styles I close this and I say okay I want Roboto Slab for example then I can just select the text here click here start typing Roboto space slab and just press enter and then we have that font included in our design. Very powerful and very good to know that these are available and the same goes as we did with the other layers we can of course apply different colors to our text. We can also create a text stroke so outside of the text the default is outside we can create a stroke to sort of fill all the space around the text. Now it becomes some very aggressive metal logo maybe we don't want that and we can easily remove the stroke again by pressing the minus button here and furthermore for text you can of course also apply shadows and other things to that as well. So that is in very short what the text tool can do for you. So now that we have learned how to make simple shapes apply some colors apply some style to it a text and work with artboards we're now going to put this all together and create a very simple mock logo of a supposedly company that we are going to make an app for. So let's hold the spacebar and drag click and drag to a new area over here we'll press the a button and we're going to create a new artboard that will be square so we're going to hold the shift key and let's make it about let's say 450 so on the right side we can still edit the dimensions of this specific frame so 450 by 450 you see it automatically adjusts because we have constrained proportions set to on here. So now we have a nicely square frame let's put something inside so let's start with an oval a bit like this and let's put a little gradient in there so we're going to pick a radial gradient and let's go from say a bit pinky to a nice shade of blue and let's make sure that it's fully like this and let's move the center of this ball a bit to the top so now we have sort of a spherical yeah planet almost kind of thing going on here and to add a little bit to that let's get a you know how about we're just going to get a square in there and we're just going to remove part of the circle so we're going to have the square and the circle selected we'll choose the boolean operation options and we'll choose subtract now we'll have the square removed from the circle and as you can see it's slightly not like correct so I'm gonna move this slightly down like this yeah this will do for now and now let's add another circle in below there but make it slightly smaller so let's copy and paste this circle and as you can see it's already outside of that boolean operation zone and we're going to hold shift and alt and then click and drag to make it smaller but still have it contain its proportions and staying in the same position so we're going to get this radial gradient again maybe make everything slightly darker and click outside of it again and now we have sort of a yeah it's still kind of planetary so let's add a little text in there and let's call our planet blob and let's choose a nice font for that so I'm just gonna go into fonts.google.com and we're going to create you know I think a nice one would be a sensory font for display and I want it to be quite heavy weight so I'm gonna pick the thickness here and say that it should be pretty thick yeah all right so let's go for real way let's take doses it's kind of nice it has this comic feel to it so we'll type here doses and we're going to set it to extra bold and increase the size by a lot of steps by holding shift and pressing up so now we have a text there that we can put here and now if we select both circles here and press command G or control G we'll group it into one group so we can easily move it around a bit and let's say we're gonna give this text a bit of an outside stroke that's going to be white because then what we'll have so let's set it to 20 press enter and now if we move the text in here you'll see that it automatically takes out the remaining space for this layers below so now we have our nice blob logo what we're going to do now we're going to export it so we're going to select everything that we have on the screen here we're gonna press command G again in order to group it and now we have this logo yeah nicely grouped together let's rename it right away so we'll call it logo let's rename the frame as well let's call it logo frame and now we're going to export this so what we'll do we'll scroll to the bottom of the setting screen the property screen here and as you can see here there's one button called export so we'll click export and then we'll choose the size so if we export this right now this selected part as a PNG it will come out with a transparent background color we don't want that we want it to be white so we're going to select the entire frame scroll down again and I will see that export we just clicked it but now it's gone again that that is because this export is used for every single item that you click so now the export is set for this only this blob part so let's remove it here open the frame again click on export choose the size so we want it one time magnification so we'll come out as a 450 by 450 PNG click export and click save and now we'll have a export of our logo available in our own file system for this chapter we will be looking into creating an app from scratch and if you are creating an app from scratch is very important to realize what data you're going to work with so what is the information that you're trying to transform into something visual that is a topic we usually call information architecture and for the purpose of this very basic app that we're going to produce let's just quickly have a look at the information we're going to show on the app before we start actually designing it so to in order to do that properly let's just start a new file for now where we can brainstorm a little bit on what we are going to build so the idea here is that we're going to build a recipe app recipes as you know they always have ingredients they have like a time to cook and amount of servings and all those sort of things so let's just write them down quickly so I choose T to of course start a text tool again so we have our recipe app and our recipe app will have a list of recipes next to that our app will have a detailed screen with the specific recipes that you can see more information about so we'll have a detailed view of a single recipe and maybe as a nice touch we will also have a splash screen and then inside these all these screens will have the recipe in various shapes and forms and in order to start with like getting a grip on what information we're going to show so let's just say we're going to give each recipe a name so we'll have a name next to that it will also have a time to cook that might be very relevant if you need to go out to do an exercise quickly or you don't have a lot of time that might be needed to find a recipe that has a short time to cook and maybe if you have some more time you want to cook with friends and you want to find a recipe which has a longer time to cook because it's yeah nice to be around to other people for a while and then something else that might be interesting is the amount of servings that the recipe is going to give you like approximately of course next to that it always really creates the appetite if there is a nice picture of food so let's just add that in there as well picture of food and of course the recipe also has a long description in terms of instructions what you have to do so let's go instructions of course there's something missing here and that is the ingredients itself but for the purpose of this workshop I will skip the ingredients and just look into these items so it's right the ingredients here so now we have sort of a very rough and very simple very basic information architecture of what we're going to create so let's get started with the actual app now we are ready to start creating our first screen and and might be a good time to start creating a very basic splash screen so let's start by saving this document for now now it's still in your draft maybe you already assigned it to a project but now is a good time to give it a name so let's give it a name call it recipe app press enter to save it all right so let's add our first artboard or frame by pressing the a key on the keyboard and then choosing a form fit that you would like I'm going for iPhone 8 right now and we have our first template here I will immediately rename this frame into splash screen so I can easily find it later on so what we will put on this back on the splash screen is a of course the text of the app itself like the the logo I thought of some like a nice and semi cheesy name so let's call it salt we'll put a dot behind there for stylization and let's pick a nice font so we'll go to fonts at Google.com and let's search for a font that has like quite a decent weight thickness let's see Montserrat looks kind of nice it has this sort of recipe vibe over it so let's pick that one increase the font size and set it to bold because we want it to really look nice and you'll see now that the text area slightly larger than the actual text I can simply double click on one of the squares and that allows me to resize it if I double click click click then it will automatically resize to the size that we need so let's put that in the center of course you can also use the alignment tools and let's draw a nice square around it like this I'll give it a white background it will disappear now of course in the original background but the text is still behind there as you can see in the layer panel here and now if I select a square and press command and then the left square bracket it will move back one layer in the layer screen so I can up again and down and now it's behind that one and I will select the the text as well come on G to group it and here we have our logo and now for the background it would be nice if we have some sort of food imagery there so let's create a rectangle that is completely covering the artboard you can see that the red lines will automatically help you in aligning it properly and let's get some image on the background there and the way we're going to do that is by installing a plugin we could normally do this by setting adding a fill layer and choosing an image and then choosing an image from our computer to upload but for this I will show you a slightly neater trick that is it with a plugin so we go to the menu then we go to plugins and we go to manage plugins a new screen will open where we can find the the plugins that we can add to Figma and this is very powerful we click browse plugins and then we can search and the thing we're going to search for is unsplash it might already appear on the top of your screen but if it's not then at least you know how it's called you simply click install and you have it installed and if you go back to the tab or we were just now you'll see that we can now use it so I'll just remove the large rectangle here at least the image back in the image layer within that rectangle and now I will right click the layer click plugins and choose unsplash now a pop-up will appear that is from the plugin itself and here we can select any type of imagery that we want so for this one of course we want food so I'll just click food and it will go and look on the unsplash website and find an image of food I can close this and yeah this is not very much food is more like a person with a handbag this might happen once in a while you just go through it again click food and now we have this looks kind of nice we might need to rename the app to honey now but that's okay so we have this layer now if we move this layer to the back as what did we did with the logo just now so make sure we have the layer selected here command square bracket and we move it back and now we have our app splash screen and sort of a logo ready to go so now we have our splash screen it's time to look at the overview screen where we're going to have a list of all the recipes so if we press space and click and drag in order to go to the right we can press the a key again make another iPhone 8 artboard and let's rename it and call it overview so we'll have a list of all the recipes so the first thing we're going to need to create is a little header on top so let's create a rectangle that we'll put on the top bar here let's make it around 50 points if it doesn't work out right away you can always just edit it here so let's say 50 we'll give it a white background and we'll add a little bit of a drop shadow effect right there if you want to edit this drop shadow effect you can of course easily change the blur settings maybe slightly less on the why setting and let's make it a bit more light might increase this so now we have a nice header box there and now we have to put some text inside in order to show the user that they are inside the salt app so let's select this piece of text and you'll notice that when you're hovering over items that there's a blue box surrounding it if you are clicking you will always select the group containing these items so if we want to select only the text we can use the control key or the command key and if we hold that one you'll see that a line appears below the word that we have now same goes for the rectangle same goes for the image so just command click on the word I'll copy it and I'll paste it here of course it needs to be slightly smaller in size so let's degree decrease it and about 22 should be fine and now let's align it to this one so let's do the horizontal line and the vertical line you'll see that now it's being dropped down now we can group it again so we'll call it header and let's align it to the top now we have a quite neatly aligned header for our app now of course we need to make the list with the actual recipes inside here so as we just written down the recipe consists of a few items name time to cook amount of servings etc so let's create that here I'll just move the text here so we have it nicely legible so let's first start with the name of the recipe so let's make a rectangle quite like this size let's just put recipe name here then we'll create another text layer and that layer will contain the time to cook so let's say it's five to ten minutes it's a very fast recipe and then let's just double click this one again in order to have it on the right size do the same thing for the amount of servings so let's say four people and oops I need to resize this one as well so let's double click and then pull it out so it can still contain a larger text and now we're coming to a nice tricky little thing because this five to ten minutes is a bit vague like how someone going to know that that is the time to cook another time to eat or something else so let's add a nice little icon in the front here and the nice thing about Figma is that it has built-in icons because it has the material icon font so if we go to material.io slash tool slash icons you will find a website where you can find all sorts of icons that are default in the material guidelines so for example time to cook could be indicated by a clock unfortunately the clock is not there so maybe we need something like time yes so this word below here is the actual name of that icon and if we type axis underscore time in our Figma text layer so I'm going to copy paste this layer move it slightly to the left and then type axis underscore time and now I select the entire text go through the font family selection and I will type material icons press enter and now you will see we have the icon immediately inside the app which is I think a great feature so let's align it a little bit let's copy paste it and move it down in front of the servings so let's find an icon for the amount of people that you can serve with this so let's try people there is actually a nice one just called people so let's do that and now that we have this we can maybe do something about the styling here so let's set this one to the same font we had for our logo so Montserrat let's give it some weight and slightly increase the size to make it more legible and let's do the same for the fonts here choosing the right fonts is always quite difficult maybe Montserrat is actually not the best choice here so let's just go for open Sans for a bit more legible on smaller sizes and let's give the icons a different color so I just selected these two icons I'm going to here and let's make them slightly grayed out this would work and increase the size a little bit 16 16 is about okay and now let's just group these two items so we have a nice sort of settings list that maybe if we want to expand it later on with more properties so I'm just gonna shift select the excess time here as well command G to make it a group so let's call it a setting and do the same for people and for people group and let's also call it a setting now we can select both and move them around any way we want and of course we also said that we wanted to have a nice picture of the actual recipe and we're gonna use the same plugin for that as we made to use the splash screen but let's first put a nice rectangle around this to make it a real proper list item okay we have that now let's make it a white background as well add a little shadow effect will decrease the color a bit so it's slightly less like in your face type of shadow and now let's move the layer back notch by notch by notch until it's all the way in the back of the group I'm just going to select this command G again to make a new group and let's call it a list item so now we have the recipe list item let's just put an image on top as well so I'm just gonna move this one slightly up so we have some room here to place the image gonna create a new rectangle I'll move it on top there and I'll let's do it like this so now it's approximately yeah it's exactly the same size as the rectangle below and we're gonna use the plug-in again so plug in on splash and then we'll choose food hopefully something nice pops up what is this berries or tea let's try something else pineapples a piece of pizza this looks nice all right I know it's only the top of the pizza but who likes crust and who likes the actual pizza anyone of their own all right so here now we have our list item and we have a very quick sort of item that we can reuse oops we still need to put the rectangle inside the list item and now we can of course copy paste this in order to create our list let's do that quickly as you can see Figma sometimes helps you by pointing out that you have something positioned in the same dimension opposed from another item these are all these nice handy little cues that come in handy quite a lot and let's change the photo here as well so we'll go to unsplash again choose food what do we have here now spaghetti and do the same for this one just food another spaghetti Italian focused food wow pasta okay this looks good all right so that concludes the overview page and we will step into creating components in the next lesson let's have a look at components for this lesson so what we've done previously we've made a little list in our app and we can easily copy paste these groups these list items in order to create a longer list but if we want to change for example the font size here you will notice that it will not increase in the other items and there's a very nice feature called components within Figma where you can produce one item and then create instances of that item and still be able to sort of edit the styles for the parent component while also influences all the instances of that component so let's do that right now so we're just going to delete the two list items that we created below here let's just remove them I'll move this out of the way a little bit and let's refactor this into a component so actually making a component is very simple as soon as you have an item selected you can right click and click create component there's also a short key there if you want to use it I usually just use the the right mouse click and as soon as we create a component you will see that it now becomes purple and on the left side you will see there is this sort of four squares that are appearing which indicates that this is your master component master component is sort of the boss and decides what everything else will look like now as soon as I copy paste the master component in order to make extra items in that list you will see that it looks like it doesn't really appear I've had this frustration for a while now and as you can see it did actually appear in the layer list and that is just because it appeared right on top of the original master component so let's undo that for now and let's move our master component out of the way out of the artboard and let's copy it again click overview and then paste it now you will see it's immediately nicely visible and now what we're going to do we're going to try and change something in the master component so let's say we want to increase the font size of the servings and the amount of time it takes to prepare it so let's set it to 13 14 and as you see it immediately does the same for the instance of that component now if we would have to if we would be changing the font size of the title inside the instance and the instance is indicated by this empty tilted square here you will see that I'm still able to change the font size for this specific layer that person entered will commit those changes but the original master component is still the same now if I make another oops see I do it again let me just move this one up so now I'm going to create another instance of this component slightly down and let's just change the color of the master component text here and set it to red bit brownish reddish you'll see that it also changes for the both the instances but if I would change the font size now it will only change for the instance where it has not yet been overridden so you can override settings per instance of a component and still keep some other settings more generic and that is very handy because for us if we want to have different recipes with different images we really want to have every recipe with a different image and also a different name move this slightly up and go here a bit so now we have our recipe here this one still has the longer or like bigger font size text if we want to reset that to the default values we can right click on the instance and choose reset instance now we are still or we are again on track with what the master component is telling us how it should look so let's do some more details here let's move this one slightly up maybe we want the image to be slightly bigger even so let's move this one down a bit give the image a bit more room and make this rectangle slightly bigger I think this will do and as you can see if I now select the instance because I've resized this one the original sort of component size is still remembered and we can fix that by just clicking on the component and then clicking this button which resizes to fit and now you'll see that the size is back again and it's back the way it should be so now we have to create some random text and random images for our recipes that we're going to paste in this area as you can see you can also pay copy paste from an instance of a component so let's select all of these align them centered quickly and now let's add a different image for every component so we will command click on the image that we have here command shift click in order to select multiple of those so you can also make a multi-selection within different components and now we will just right click plugins on splash and click food and see what type of Italian food we'll get now as you can see food is loaded into every unique recipe let's try it one more time and we have new entries again for every recipe as you'll see now the text is still the same so we're going to use another plugin in order to also auto generate some text so we'll go to the menu again plugins manage plugins and then we'll look for this sort of infamous loram ipsum text that we can have generated so if you look for loram ipsum you'll find this plugin by david williams and click install you'll have it installed and what we can do now we can now select the recipe name we'll do that with command shift or control shift for the other names as well let's right click plugins and choose loram ipsum now we can choose two types of loram ipsum we can have it generated from multiple sentences like have a very long paragraph we can also auto generate it to the size of our text frame and if I do that now you will see that it is automatically trying to find where to fit unfortunately something is going wrong here so why don't we just manually adjust it here so now we have recipes with each a unique image and we know how to use these components as well working with lists and larger groups of components is a very nice way to quickly create a screen that looks very good but how do you make sure that they are all aligned in the same way especially if we have a list with more components in a vertical row so let's have a look at how you can quickly do that so let's just imagine that we've positioned these items in a sort of vertical list but they're all not exactly the same aligned so we're going to click and shift hold shift and then select all the different entries and when you move down into the selection you will see there is a blue button appearing there that is called the tidy up button now it's for a list that is vertically aligned but it might also appear as a nine dot sort of button that is for grids for now let's focus on the lists so as soon as we click this you will see that the the spaces between this will be aligned so that they're all the same only the horizontal line does not yet similar so for that we just click these center horizontal align and now we have it horizontally centered now if you hover this like group selection you'll see that there are some lines appearing here as soon as you hover those there is a dimension shown and that is a dimension that is used for all the spacing between these elements so we can quickly say okay it has to be 20 or for example 15 and if we want to for example say oh this recipe should be here actually we can just click this pink circle and drop it right here and that means you can rearrange your entire list very easily and very fast final page the detailed page for a single recipe I'm just going to move some things out of the way here make sure I deselect them otherwise if I create something it will be created inside this component it's going to press the a key select this one first press the a key add an iPhone 8 and we have a new screen here so let's rename it to detail and now we can add the header on top because we want to have a back button there that allows us to move back into the previous page and while I've just copy pasted it and it just spotted into my mind that I can also create a component out of this header so I can reuse it on all pages so delete it here and I'll right-click the header here click create component move it out of the artboard and I'll copy it and paste it back into the here align it to the top and now we have it component inside that overview let's do the same for our detailed page and because we want to have a back button there we need to make another text area here that has the material icon for a back button so let's go to the material icons website material.io slash icons and let's look for one with a let's say is aiming to the left so let's search for the keyword left so we have chevron underscore left so we'll create that one here so we'll create it inside the component so I'm use the text tool type chevron underscore left don't worry about the text spacing right now and choose the material icons so now we have a back button double click on the edges to make it nicely formed and it's aligned to this text right now and if you hold the alt button you can see the spacing that it has to the sides so let's say we want the spacing to be similar to what we have on the top so we need to move it 3 to the left 1 2 3 and now we have 14 14 and 14 you will see that it appears on the detail page but it also appears on the overview page but since we can overrule one single component instance let's just command click on this one here press enter to have the text selectable and then just press backspace or delete to remove the text now click outside of it and now you will see that we are reusing the same component on these two pages but we have overridden one single setting alright let's move the recipe detail actually in here so let's take the component that we have here the top one we'll use that one for a prototype as well so we copy it and we paste it into this screen and now what we're going to do is quite important because we need to keep the naming of all the list entries here in order to create a nice seamless transition later on so we're just going to keep these names and what we're going to do because we're going to slightly change the layout here because it's not going to be a tile like this but it's going to be full screen so we're going to detach this component instance so we right click and we choose detach instance now we can freely change all the aspects of this item so let's make it a full width one and you know what we will move this whole group one layer back and then we will make the background color of this instance of the header component we'll make it slightly transparent with a linear gradient so we'll have the gradient transparent side there move it slightly down let's see here I think that will do alright and then we can also remove the rectangle that we had behind there but we're not going to actually remove it let's just make it invisible so we'll choose the layer controls and we set it to 0% visibility now we're going to move this text this one this one this one and this one slightly down and slightly to the left and now let's add the actual recipe like instructions in there of course we're not going to type the entire instructions because I don't know to be honest how to make Sinectus bebendum so let's just create a new text area by pressing T create a text area that is it can be quite long doesn't really matter and then we'll just right click plugins lorem ipsum oops we didn't have our text layer properly selected so create a new text layer again we'll just deselect it for now as you can see the text layers removed as soon as it's empty so we'll put a little bit of text inside we'll deselect it and then we can right click plugins and choose lorem ipsum and we're going to auto generate in order to make it fill the entire sheet now what you find is that it still had the font of the last text that we selected that is of course not what we want so let's set it to open songs set it to a regular font and let's tone down the size a little bit 16 maybe 12 not sure why the font size is not working out sometimes you have to fiddle around a bit in order to make things work so let's go for 15 and let's also increase the line height a little bit sorry just a paragraph spacing line height to increase legibility all right and let's just redo the lorem ipsum generate and now we have our full recipe text I think I don't like that gradient after all so I'm just gonna set it to a solid white in the end and let's then just for move this one slightly down so the coffee cup is properly visible as you can see the alignment here is still a bit off and that is because our list item is still within a frame so let's reframe this one to have it contain everything and then let's resize our image to be completely on the edge all right so there we have it we have a very nice splash screen we have an overview of all the recipes that we have in our app and then we have a detailed page where someone can look up the exact instructions for that recipe so for the next lessons we will look into how we make this an interactive prototype and I'm looking forward to see you there back a very powerful feature of figmas that you can immediately view and interact with the prototypes that you have created this feature is very easy to use and these lessons will show you how to get there first let's do some very basic interactivity so let's select our splash screen and say that we want our splash screen to move into the next screen the overview screen so we'll tap the splash screen and then we will set the prototyping tab over here so normally it would be on design if you click it and then click the prototyping tab now you see that there's a little ball popping up here and we can click and drag this ball to another screen so just click and drag and when the overview screen is selected you will just let go now we have set our very first transition and if we click the play button on the top right here in figma the prototype will load and this prototype is being displayed within an sort of iPhone mocking simulator to make it look like it is really working on a phone you will see that the mouse cursor changes into this large ball and we can click and now we'll move to the next screen but what we want of course is it to be maybe automatic since it is a splash screen so when we have the splash screen selected we can change the interaction settings here so now is an on tap so as soon as I click or touch my finger it would move but let's say we want to do this after a short delay so let's say we want to do this after 1500 milliseconds we wanted to navigate to the overview page and we want this to be a dissolving matter so it slowly fades into the new screen we'll choose the ease in and ease out and we'll make it say a full second so 1000 milliseconds which is okay for now just to see how it works so now if we would restart the entire prototyping screen we can press the R button on our screen as noticed here in the in the bottom right and now after you define milliseconds you will see the transition to the list page now what we can do is add an interaction to go from our list overview to the detail page and of course we can drag this ball again but we're not going to do that because we don't want people to be able to click anywhere on the screen and go to this one no we want people to be specifically clicking on a single recipe in order to go to the next screen now the tricky part here is that we have already started using components and I will just go through it and then in the end I will change some things just to let you know how this works so let's define all these interactions to go to the next page and if you deselect then you will see the little arrows pointing to the next page you can also see where the interactions come from now if we restart our demo again we'll see that first smooth transition to the list page and now if we click anywhere outside of the screen you will see the tappable areas lighting up in blue so I can now click this one and now I will be coming I'll be moving to that detail screen I can just press the left arrow on my keyboard to go back try the next one try the next one as you can see they all work but they do not show the specific recipe that is because the page in our design is only designed like this so only with this specific image that is something to keep in mind when you're designing things but also now we had to specifically make these interactions work for all these separate components and since we are using a single component we can also define that animation once and then use it on all our components so let's do that so I'm going to remove all these interactions that we have now you can just click the ball click and drag see small cross appearing you can let go and then it is removed so we're going to select our master component click and drag move it into the detail page we're going to shortly change some animations here let's just set it to instant actually this is fine and now if we select our components you would have expected that the transition line would be there but it's not there yet and that is because we have overridden these component instances with our own settings we've already added an image of our own and some text so we need to reset our instances so let's quickly select all our instances right click and choose reset instance we will lose our images that we had before that's okay for now so let's just quickly redo our images plugins unsplash let's add some new food all right and let's add some new recipe names as well while we're at it let's use the Lore-Mipson plugin auto-generate all right so now we have some new recipes so as you can see now because we set this interaction on the component it will automatically appear for all our component instances so now if we go to our page again we can use it press the left arrow to go back on all the different component parts so let's do the same for the back button and the back button is something special because if we are on the detail page we want to use it to be able to go back to the previous list and we what we can do we can move it of course the ball to this page but maybe we want to use this header in different screens as well so we're going to use a different technique here we're going to click and drag on the arrow and then move it to this blue back button that is over here and that indicates that it will always go back to the previous page where that new one came from it is automatically applied to our components since we did not override any settings on this component so now we can really navigate through our app we can use the back button and we have some very basic but very nice navigation elements implemented in our prototype just by now there are some lists within our pages that have more text than we can actually see within our demo so it would be very nice if we could scroll all the way down here and same goes for the previous page if there would be more items that we can click upon so let's work on that so for now let's go into the design mode and we have our items here and we're just going to create some new instances of that by just you know what I'm just going to copy paste all of these and position them below the other ones and just have to make sure that they are within our overview artboard and as you can see right now they are outside of it so I'm just going to move them within the artboard so I can click and drag and there's a big black line popping up there and I can just put them inside the artboard so now they are inside the artboard I make sure that I select all of them and now I can do the click the tidy up button again to make sure that they all have the same alignment in between them you can also set the alignment here so let's increase it a bit let's say it's 20 now we have our list which is longer and if we go back to the demo page you'll see that we can still not scroll this that is because there is a specific setting that allows you to over over when there's overflow on the page that allows for scrolling so if we go into the prototyping tab we'll see a setting here called overflow behavior if we set this to vertical scrolling and go back to our demo you'll see that we can now scroll until we reach the bottom of our list one thing that you might notice already is that our header is still moving with us as well and maybe we want our header to be on top of this list so in order to do that we go back into the design tab we click our header and then we set it to fixed position when scrolling so this object will always be in the same place when scrolling the prototype so let's just set that and as you set this you will see that on the left side within your overview artboard there is a new sort of subcategory called fixed so everything within that subcategory will be fixed when scrolling so if we go back to our page now you'll see that it nicely sticks into place and we can scroll through all our recipes we can do exactly the same for our detail page so if we select that select the text that we have we'll see that it is overflowing the page so let's first do the set the fixed position for our header and now select the entire artboard prototype scrolling vertical scrolling and now if we go into the detail page you'll see that we can scroll and the header stays in the same position so our project becomes slightly more lively with every addition that we make by now now let's finalize our prototype with a nice new recently added feature to Figma which is called auto animate this animation feature allows transition between the properties of two shapes and the shapes have to be they have to have the same name so let's have a look at how we're going to organize that so first thing we have to do is we have to make sure that our component and the animation type will be set to smart animate let's just set it to 500 for now in order to see it properly and now if we would click on our item here you will see that it fades into this new item there is however one problem here and that is you'll see that the animation is now coming from the middle and that is sort of annoying so the way to fix that is to make sure that the layer name that you click upon is going to be exactly mimicked within our like final component or a final artboard so in order to arrange that let's just rename this one to list item animate and let's do the same for the top one here list item animate now if we would click this one you'll see that it morphs from the top and if we would select this one it's also going to move from the top because that is the one that's going to find so that is in short how you use the smart animate it really makes your prototype look very cool and if we would tone down on the animation speed a bit so let's say we make it 100 it looks very fluid and very cool so now we've made our app we have an app with a splash screen that fades into an overview that overview is very nicely scrollable and it allows us to select a single item and look at the details of that page we can also scroll through the detail page but we can go back to the previous page by clicking here and just looking at a different recipe if we want and that concludes these these tutorials I hope you had a great time and if you have any more questions or feedback feel free to send me a message or leave something in the comments I hope to see you around sometime