Figma: The Absolute Beginner to Pro Class building an App

1. 0000 Figma Intro: Today I'm going to teach you everything you need to know about Figma. We will start from zero, setting up an account and getting to know the Figma structure. Throughout the entire course, we will work on a real project to create a mood tracking app from the first stroke to finish design. While setting up a wireframe and Figma, you're going to learn about all the basics such as setting up frames, adding shapes, text, and color. We will then bring the wireframe alive and set up our UI design. During the course, I will lead you through all of Figma is incredibly powerful features such as using Figma styles for color and topography. How to add and use grids. And we're going to learn about the importance of using components and the variance are must for any UX UI designer. I will show you how to use constraints to test your design on different screen sizes. We will get to know the powerful Figma community section. Once we're done, we'll make sure that our design shines in any presentation. To finish off the course, I'll show you how to create a Team Library and share your files with other designers and developers. In under 2 h of your time, you'll find out everything about Figma that you need to tackle any project. Let's get started. This class is right for you. If you're a total beginner or switching over from any other design software. This is a course by Moody Learning dot io. 2. NEW VERSION AVAILABLE!: Thank you so much for taking this course. I just want to make you aware that I just published a new version of this course. So if you jump to my profile, go to Christine Valor or you can also just search Moon Learning. And then here you can see all my courses. And if you go through the very bottom, you usually see the new courses that I just released. And if you click on that, then you can start right away with the latest material and the latest updates for the new course. I took into account all of your great feedback and lovely comments that I got over the last two years with the old course. So I changed it around a little bit and it's now more bite size lectures. Something that you really liked in the other deep live courses. So that means you can jump into the different subjects faster. And it comes with an exercise file, so you can work alongside me on everything that you see on the screen. I added some more depths to subjects like prototyping. And of course we'll be covering all the latest releases in the new course like Figma variables. 3. 0101 What Is Figma? Who Does the Coding? : What is Figma? In a nutshell, Figma is a user interface design software, also called UI design software. In Figma, you can create interactive wireframes, set up very advanced user interface designs, and also create impressive prototypes. The great thing is that Figma works on Mac and PC alike. You could use it in a browser or via an app. Figma gives you all the tools to set up a design for web or app. Things like working components, setting up styles, and using constraints for responsive design. It is really the sum of its incredible features that make Figma so special and therefore, the industry lead. It is Cloud-based, which makes it the ideal choice for collaborating with other designers or sharing your design with developers. Now, a lot of the time I hear the question, so hang on, if I designed a website in Figma, how does it get from Figma online? Like how does it become a real website? Does Figma do that? Well, sorry, but no. Figma gives you all the tools to set up a website in such a way that developers can bring it alive with code. Figma does give you great tools, for example, the Inspect tool where you can see CSS snippets. But this is not really enough to build a full website from Figma. You really need a skilled developer. You could also use a tool like Webflow for a really simple website, and use Figma as your base to set up your design and plan it. Think of it like in the old days, designing a booklet, you would use something like InDesign or another software. Did this software print your booklet? Of course it didn't. It is exactly the same here. 4. 0102 Course Project – What We Will Build: Welcome to your first steps in Figma. I would like to introduce you to the project that we will be working on during this course as we will learn everything on real examples. You need absolutely no prior knowledge as we will start at zero and sign up for a free Figma account. During the first half of the course, we will rebuild a hand-drawn Wireframe, wherever I will introduce you to all the Figma basics. During the second part, we transform our wireframe into a UI Design. We will cover all aspects and features Figma has to offer. In the final part, I will teach you how to share files with designers and programmers. Let me give you an overview of the starting point of our project. Here's the hand-drawn Wireframe that we will be working on. We will be building a mood tracking app. Let's run through this quickly. Our screens contain a header that in some cases, like our home screen, holds a weekly overview as well. We also have a tab bar at the bottom of the screen, which acts as a navigation, letting us jump to different areas of our app. Our home is set to today and contains different mood buttons, whereby I can pick and click one. The one I choose will then be added as a mood for that particular date. I can also see that in my overview of dates here, past moods are shown. I probably need some color or pattern code to identify them in my design. There is also a complete calendar overview page that I can access or I had a tab bar or the header. The third navigation point is a blog that holds a set of articles. If I click on one, I get to the article detail page. Great, let's set it up in Figma and I'll promise you, you'll learn all the essentials that you need to know to tackle any projects in the future. I prepared a Figma file with all working materials that you can download. Once we installed Figma, I'll tell you more about how to get those materials and how to upload Figma files. 5. 0103 Getting Figma – Registration Process: Getting Figma is super easy. All you need to do is go to figma.com and then press this "Sign up" button, enter your e-mail, choose a password, and click "Create account". You're going to be asked some basic information, like the name you would like to use, the area you're working in, and if you want to join the mailing list. Click "Create Account" and verify your e-mail. That's it, done. As soon as you verify your e-mail, you'll be led to this welcome screen. If you want to, you can create a team now, I'm just going to call this moon. You will then be asked if you would like to invite others, I'm going to skip this for now. Next you'll be prompted to choose plan. I'm not going to talk about pricing as this changes from time to time, so please consult the Figma website for more information. To get started, just go with the free version for now, you can always update later. Figma is then going to ask you if you'd like to create a design file or a whiteboard with FigJam. If you're not sure, just skip this step, you can create either of those at anytime later. The difference between the two is that the whiteboard you would use for planning, discussing, and brainstorming. If you're ready to set up a wireframe or design, then pick design file. I'm going to skip this for now, and get started on my own. 6. 0104 Figma Working Structure : Let's have a look around the Figma workspace. I'm now using a desktop app, but it will be pretty much the same if you're in the browser. In the middle of the screen you see all the latest files. If you designed it like me, then Figma setups in basic files and templates for you to play with. On the left-hand side, you see your Teams. We created a Team called Moon when we signed up. Let me give you an overview of the Figma file hierarchy. First, we have Teams. They can be for your own work or for collaboration. Within Teams, we then have projects which you can use to group files into different projects within a team. On the free plan, you currently get one free project. Inside a project, you can now have multiple files, either FigJam files or design files. These files are where you would do the actual work. You can further structure them into pages. Let's get back to the real thing. Here we have our Team. If you want to delete, edit or rename it, you can do so by clicking the right mouse button. Then we have our project file. You could also create more projects depending on the plan you're on. Inside my project, I can now add files. I can either add FigJam files, which are more for brainstorming, or I can add actual design files, which is what I will do now. This opens a tab. I can name the file by double-clicking the name. I could now structure this file further by adding pages. Currently, I have one page. I could add more by clicking the plus button, and of course, I can name them by double-clicking. If you want to jump back to home or your overall workspace, click the little house icon on the top left-hand side. You can now see the new file we created inside our Team and projects. I could now create as many files as I needed in here. Note how to tap state open so I can jump back and forth. Above your Teams, you also see recent files you just worked on, as well as drafts. If you just want to play around or the whole file hierarchy seems a little overwhelming to start with then simply create your first design file here in drafts. You can later drag and drop files between Teams and drafts. In the left-hand side menu, you also find access to the community sections where you can explore thousands of templates, widgets, and plugins by the Figma community. We will look at this during our project in more detail. You can also invite others at anytime and give them either viewing or editing rights. You can also see who is on your Team and the plan you're currently on, as well as the available files that come with that plan. In case you want to upgrade, you can also do that here. 7. 0105 Figma in the Browser vs Figma App: You can work with Figma in two ways. You can either work directly in the browser, which is what you're seeing here, or you can download the app. To download the app, go to figma.com/downloads. You can then choose between the Mac and the Windows version. It's really important to know that even though you work in the desktop app, Figma remains Cloud-based. That means that all of your files will be stored in the Cloud and not locally on your computer. Therefore, you always need internet access to work on your Figma files. You could export and store a Figma file locally. But this is something you should really only do in an emergency. Like if you would need to finish a project and you know that you will not have access to the internet. This can cause hurdles to the collaboration with your team. Therefore, it's always best to leave everything on the Cloud as it was intended to be. Besides the desktop app, you might be interested in Figma mirror to preview your designs on your mobile or tablet. In case you're not able to use the desktop app, and we'll use the browser version only, I strongly recommend downloading the font installer. This will give you access to all your local fonts. This will, however, not be necessary when using the app. 8. 0106 Setting up First Frames: Let's get started in our Figma design file. This gray area you see here is called the canvas. Think of it like the surface of a table you're working on. On top of it, you will add your designs like sheets of paper. In Figma, those sheets are called frames. You can add images, texts and shapes to your frames to set up your design. To create a frame, you can choose a frame tool from the toolbar, or simply press F to open the frame menu on the right-hand side. In Figma, all common screen sizes are already set up for you in the form of frames. I will pick an iPhone X for my mobile designs to start from. In case you're not after a specific screen size frame, then you could also just draw your frame by hand. Once the frame tool is activated, two things happened. Figma added the frame to your Canvas and you can also see the frame in your left-hand side layers panel. The sidebar on the left is basically a mirror of every element you will have on your canvas. As we will add more and more elements throughout, you'll be able to see all of them represented here as well. You can rename your wireframes either directly here in the left-hand side layers panel, or by double-clicking the little name above your frame on the canvas. Let's rename it to wireframe/home. Note that I'm using a forward slash. This is the naming convention in Figma and basically creates a category for frames. This is very useful when exporting and organizing your frames later on. Unlike traditional art boards, you can nest frames within one another in Figma. This allows you to create more complex layouts. 9. 0107 Useful Shortcuts Pan, Zoom and More: I want to show you a few useful commands that will speed up your workflow even if you're at the very beginning of Figma. Figma has a lot of great shortcuts and helpers. You find them all if you navigate via the left-hand menu to shortcuts. Everything that you already used is marked in blue, and the ones you have not used yet are gray. For now, I'm just going to show you the most essential ones for navigation. To pan, simply hold down the Space bar and move around with your mouse. To zoom in and out, press "Plus" and "Minus". Very important to view your work at 100 percent press "Command 0". You can switch between an overview of all your frames and the specific selection by toggling with Shift 1 or Shift 2. To show and hide the user interface, simply press "Command full stop" and obviously the almighty command set to undo anything you just did. You'll get to know more shortcuts as we move along. Just remember that you can look up all of them in the shortcut menu, which of course, also has a shortcut, Shift, Control, and question mark. This will also be helpful if you're using a PC as I'm working on a Mac, and you will only see the Mac shortcuts with the automatic keyboard output on the screen, which might sometimes differ slightly. 10. 0108 Adding Shapes to a Frame: Let's start to transform our frame into an actual wireframe by adding some content. In a wireframe, we stick to simple shapes like rectangles and circles. We find all of them in the shape menu at the top. Simply click on the icon and select the one you're after. Note how next to the shape you can see the shortcut. I could just press R for rectangle or O for a circle. Hold Shift while drawing and your shape will be sized evenly. When the shape is selected, you can see the dimensions in the bubble below it. You will see the same dimensions in the right-hand side Properties panel. Right here in the Properties panel, you can also adjust the size by hand. Simply type in the number you're after. You can also use this box to do calculations. The clip next to the measurements, either locks or open the dimensions. You can choose if you want to scale the whole shape or only one side, try out. You can also rotate the shape either by adding an angle or by simply selecting the shape. Get closer with your cursor to the edge until you see the little rotation symbol showing up. To change the corner radius of your shape, select the shape and then get really close until you see the dots appearing. Hold your mouse and drag inwards. Or use the Properties panel. You can round all corners at once or select specific corners early. 11. 0109 Duplicating: Great. Now that we know how to draw shapes, let's set up our first basic layout of the wireframe. We will start with our home screen. I am pressing R for my shortcut to select a rectangle tool, and we'll draw the header and the footer. In a wireframe, exact sizes are not as important as in the final design so I will adjust them by hand to my liking. I will now draw the four circles that will be my mood buttons. I hit O for the circle tool and draw my first circle. As I want all of them to be the same size, I will simply copy the first button. There are several ways to do this. You can press Command, or Windows, this will be Control, and C to copy, and Command or again Control and V to paste. You can also drag out a copy of the original shape by holding down the Option and the Shift key, and with your mouse, press and drag out a copy. I could do that for all the other circles or simply press Command, or on Windows, Control and D. This will duplicate them with exactly the same distance as the first one. 12. 0110 Drawing in Figma: Let's add the faces to our mood buttons. I will draw eyes by adding circles. I will talk more about color later. For now, to make the eyes visible, select them, then go to Fill in the right-hand side Properties panel, and where you would add the color value, simply write "gray". This is a little trick if you need a quick color. To draw a nose, I need a stroke, so I choose the line tool or simply press L and hold Shift to get a straight line. For the mouth, I will choose the Pen tool, you can also just use the shortcut P. If you set a first and second point and hold the mouse key down, you can curve the lines. Besides a Pen tool, you can also use a Pencil tool. You can draw freehand, which takes a bit of practice when using a mouse. But if you're used to a trackpad or pen, you can get amazing results. Once you're done drawing, simply press Escape to leave the drawing mode. If you select any of the shapes, you can now alter their appearance with the right-hand side Properties panel. You can change the color, the stroke size, and you can even choose another kind of stroke and round corners. Once I like my face, I'm simply going to duplicate it to all other buttons and adjust the mood. 13. 0111 Creating Groups: Currently, all layers are placed next to one another on the same level of hierarchy. You can group layers together to create more structure and make it easier to handle your design. Simply select the layers that you want to belong to a group. You can do this by either keeping Shift pressed and clicking them one by one, or keeping Shift and your mouse button down and then draw a selection area. Then press Command or in Windows, Control, G to group them. You can also nest groups within groups. For example, if I make each of those buttons into a group, then select all the buttons, I can group them again. Now, I will have a button group and within it, I have four groups of single buttons. I can now move the group as a whole, and I can also duplicate the whole group and paste it to another place. You can still edit elements inside the group, either by double-clicking until you reach the desired element or hold Command or Control and click to select. Note that everything that we added to the frame is represented in the layers panel. Groups are shown as little dotted rectangles. When you click them, you can see the content inside and you can also move elements in and out of groups. Double-click to rename. I will name my group, Circle Group, and the groups of the single circles inside, Circle. 14. 0112 Adding and Styling Text: We now want to add some text to our wireframe. Select the Text tool or simply press "T" and then either click on your "Wireframe" to start typing or draw a text-box. On the right-hand side in the Properties panel, you will now see the text properties. Handling topography is quite a large topic in UI design. For now, I'm only going to give you a quick overview of the properties panel. We're going to explore this topic further once we feel comfortable in Figma. From the drop-down, you can choose a typeface. If you're working with a Figma desktop app, you will see all your local fonts and all Google fonts automatically. I really recommend that you use the app whenever possible. If you're working in the browser, makes sure to install the Figma font installer, which you find at figma.com/downloads. You would then also be able to see all your local fonts. If you want to Google font, make sure to download it and install it on your machine. I'm working in the app, so I'm going to use one of my favorite Google fonts called Poppins. In the drop-down below, I can choose the font weight. Next to it I find a font size, and I will set this to 24 as this is my main text for now. Line-height and letter spacing for now, I will leave at the default setting. This is something that we will retouch later in our UI design. Further down, I can choose to align text left, right, or center and I'm going to send to my texts for now. We can also set the width and height behavior of our textbooks. If you choose auto width, that will mean that the text box is exactly the size of the text. Then we have auto height, which means that we have a set width and as we add text, it will sort itself below accordingly. We will use this a lot when it comes to our UI design as it respects our line height. Which will be crucial then. We also have fixed size, which is to be honest, something I rarely use. Under more, you can adjust things like underlying or uppercase. I will set my text, to sit right in the middle here. I will also add the texts that I have here in my header. This is underlined as it will be clickable later on. 15. 0113 Positioning Alignment and Nudging : You can position elements inside the frame by simply dragging them. You will see that Figma creates guides to help you to align any element with the rest. To add some more detail to your positioning select an object or a group of objects and keep old pressed while hovering over the edge of your frame or any other object. You'll be shown the exact distance between those objects. This is super handy and really something that you will need all the time. You can also move the selected objects with your keyboard, left, right, up, and down arrows while distances are active. If you keep shift pressed, then it jumps in larger distances. This is called nudging. By default, your nudging is set to 10. I set mine to steps of eight. Simply search for nudge amount in your workspace menu, and you can adjust it. You can also select an aligned several shapes by using the align tool in the properties panel. If you select a group of similar objects, Figma will offer you to tidy them up. You can even set the space between the elements with the menu or by hand. 16. 0114 Changing Colour Strokes and Fills: All shapes have a fill and a stroke property. By default, our layers are filled with a light gray and our typography is black. This works just fine for wireframe. You could have adapt the colors. Select a shape, and in the right-hand side properties panel, click on "Color Fill." You can now either pick a color using the color wheel or you can use the eye to pick a color. This is really handy if you want to pick a color from an image, for example or if you have an hex code already, you can just add that. RGB would also work. Besides solid color, you can apply other fills like gradients and also fill shapes with images. You can revoke a fill by clicking the minus button symbol next to it. You can add a stroke by applying the same technique with the stroke option. The stroke can also be adjusted in thickness. If we click on the three dots, you can get more options like dotted strokes. Properties can also be copied and pasted amongst objects. Right-click the element, select the "Copy Properties" style and paste to another one. Or use Alt Command C and Alt Command V. Note that this only copies the style and not the shape. 17. 0115 Creating Styles in Figma: Styles let you save and reapply properties. In this way, large files can be updated in an instant. Styles can be created for colors, text, grids, and effects such as shadows. For our wireframe, we'll be using different shades of gray that I want to make into a style, as well as a headline and a standard text. Let's first set up our color styles. To create the color styles, I draw shapes and fill them with the desired colors. Choose the first color, click on the Styles menu in your right-hand side Properties panel, and click on the plus icon and name your color. Let's do the same with the other colors. Note how I'm using pigments naming convention again with a forward slash. This will automatically create a category wireframe, and then within it my different colors. I can now apply these colors to text or shape across my design. Simply choosing object, and then from the Styles menu, apply your saved color style. You can see an overview of your styles by clicking on the Canvas. You can always edit your styles. They will then update automatically across your design. Let's do the same for our text. I picked a text, click on the "Styles" icon in my text properties and save it. I can now apply it across my design. Note how it's styles, it doesn't matter where you create them. They're not tied to any object on your Canvas you created them from. They live independently in the style section. I will make a separate frame to store an overview of my styles. For now, I will leave it next to my wireframes while I'm still adjusting. I noticed I made a mistake. This is actually an underlined clickable text. I can either edit the style in the Text Styles menu or by clicking on my Canvas and go into the styles overview. I will rename it to clickable. I still want to understand the texts though. I will copy a text with this style and then detach the style in the Text Styles menu. I will now remove the underline and save it again as my standard text. During my working process, I can always add or alter styles. There are also other styles like grids and effects like shadows or blurrs that you can save. 18. 0116 Working with Components and Istances make into comp and overrides: Components are UI elements that can be reused across your design. In my wireframe, there are elements that are the same layout but just hold different content. Like the days of my calendar up here and in my tap bar, the tappable icons. Let's make them into components. We're going to start with the days of the calendar. First, draw a frame to full width of your layout frame. Remember, I can use my properties panel to calculate. I will divide this by 7 to get one day, and later have my week perfectly fit into the screen width. I'm now going to add a text for the weekday, and the date below, as well as a circle which will indicate if in the past a mood was already entered. Let's align them nicely. Let's also make sure to assign color and textiles. I will then name the frame. Now, instead of just copying the date, I will make it into a reusable component. Make sure the frame is selected. In the top menu, click on "create a component." If the component was successfully created, you will see the purple outline as well as the diamond symbol. In your layers panel, you'll also see the change in color as well as symbol. This original component you made is called domain or master component. Any copy of it is called an instance. Note the difference in the layers menu. The main component has a filled diamond shape and the instance has an empty diamond shape. You find an overview of all components that you created in the asset's menu next to your Layers. You can either drag from here onto your canvas to create an instance, or you can also copy directly the master or any instance to create another instance. It doesn't matter which way you use, there will always be linked to the original master only. You can have only one master, but many instances. If I change the layout of the master component, all instances will be updated as well. Note how I'm not able to change the position of an element in the instance. I can, however, change the content, so I can change the name of the dates. I don't like the alignment and I want the text to sit in the middle, so I'll fix this in a master and all instances will follow. Note that I have not changed the color in any of the instances, so if I changed the master, they will all follow. I can, however, adapt the color of an instance. It would then still follow all layout changes of the master but keep the so-called override for the color. That is just fine. Like in our example, I want the current date to stand out a little. I want to remove the circles for today and in the future. There are more advanced methods to do that, but for now, I'll just color them in, in the background color, which works just fine for a wireframe. To sum up, your component is fixed and you cannot override in your instance, size, position, rotations, constraints, layer hierarchy, or any drawing that points in Bezier positions. You can override in your instances, however, color and fills, fills can also be an image fill, text in content and alignment, styles, opacity, effects like shadows or blurs, and you can toggle visibility on and off. If you want to revert back to the original master settings, you could do that by using the drop-down in the instance menu and choose "Reset all overrides". You could also detach an instance from a master here. If you accidentally delete your master, you can also restore it with any instance you already made. 19. 0118 Pages in Figma: To edit our design, including instances, we would always need to go back to the main component. We could do that by selecting an instance and under right-hand side menu, click on "Go to main component". We would then jump back to the main component, no matter where we placed it. However, it is much neater if you take all your master components out of the design and store them in a separate place. This is also really important to keep an overview about consistency in your design. Now, I could keep my master on the same page or even draw a frame which I call components and have an overview right here. However, it's good practice to keep your design clean and tidy. We will store master components in their own section. For that, we create a separate page which we call Components & Styles. We will rename this page that we're working on Wireframes. Now, select the master component, right-click, and select Move to pages. You can now send it to the page that you just created. I will also send my frame with the styles over there. This will give me a great overview of all elements I'm using. I want to create some more components like the icons for the tab bar. I can do that either in the design and send them to my components page, or create them right in the components page. I'll draw a rectangle 24 by 24, and round the corners. I will then also add some text below. This is a label, so it can be quite small. I will add another style for this. I will also add the style to my overview. Let's make sure I can in-text our lines and create a group. I will rename the group, make sure it's selected and convert it into a component. I will now copy it, jump over to my wireframe, and paste it into the tab bar. Let's align the instances and rename the labels to home, calendar, and blog. Now, my icon color is the same color as the background. I want to jump back into my components and change that in the master. Great. Let's have a look at our assets menu for a second. Components gets sorted automatically according to which page and which frame you would put them on. In our example, we use the forward slash and this created a nice subcategory as well. This will be really handy once you have many components in a larger design. 20. 0119 Creating a Simple Flowchart With a Plugins: Great, so we have our home wireframe finished. Now I want to add the other wireframes. Let's create those four whereby a mood will be selected and would show up for that day. I can now either draw new frames and copy everything I need over and draw the rest or as they're very similar, I will simply duplicate my entire frame. I will now change the text and by the way, this text could also be its own component. I will then select all the phases that would not be selected in the screen. Remember to keep command or Option pressed when you went to deep select within a group. I now want to change the transparency. I can either do that in the properties panel or simply press any number. Two, for example, would result in 20 percent capacity. I will do the same for the rest of the screens and as you can see, it already pays off that we spend some time setting up our home screen nicely. I'm also going to set up some frames for my calendar, as well as where my block will be later on. Of course, have make sure to name them. I now want to indicate the connection between those frames. Simply drawing a line would not really work because objects are either on or outside of frames. I will use a plugin. Go back to home by clicking on the house button on the top-left and go into the community section. I want to set up a flowchart, so I'm typing in flow and searching for plugins. There are many great ones, but for now, I'm going to use a draw connector. Click Install. Now let's jump back into the top of our file, which is still open. From the menu and note that it is the browser menu, I now choose plugins and will activate the one I just installed. You will see a window popping up that will tell you what to do and how to use the plugin. We want to connect the button, to the new screen. So I will select a button that will be clicked, hold Shift, and select the destination. Done. The areas are now stuck to the frame. If you move the frame, they will move with it. This particular plugin also lets you decide where you want to connect this to dock onto the frames. Let's connect all of them. There are many different plugins for flows and ready-made wireframes. Feel free to explore and find out what's right for you. Each of the errors creates a layer in your layers tab. You can also group all of them and then toggle them on and off. 21. 0120 Figma Community Section: Let's set up our calendar screen. Now, we can set it up all by hand, or we could use a pre-built that someone else was nice enough to share with us. Let's go to the Figma community section. Go to the home icon and select community. The Figma community section is a space where creators can share their Figma work. You can search plugins, design files, wireframes, wireframes systems, illustration, icons, everything. We will search calendar for our wireframes, and you'll see a variety of files showing up. This one here by Felipe Dolce just looks perfect. Click on it and you'll get a preview. Once it's loaded, you can see the different pages within the file. Let's duplicate it. After a short loading time, you'll see an identical copy of the file in your Figma account. I can now access all elements. Let's select Calendar, press Command C to copy, and let's jump back to the top with our working file. Select the right frame and paste the calendar with Command V. The purple outline tells me that this is a variant and the main component is still in the original file. I want to change it to my needs, so I'll detach it. I can now make all the changes I want. I'll remove the background fills, the patterns, and other elements that I don't want. I'll set up the textiles and color to my needs and I can resize it. I will make this into a component. This component will later be on my component page, so I'll fill my frame with instances. Let's arrange the instances and change the names of the month. Yes, I'd have to adapt the dates for every month, but for now, in the wireframe, I'll just leave it like that. I will add some more moods and mark the day with a circle. Lets also makes sure that we have some different moods in the current week. As this is basically the week that will show up on the top in the home screen. Now, I only need to adapt the header and add the different days of the week. Now that everything is to my liking, I'll select the component and send it to my component page. If I jump over to components, I can arrange it with the rest. 22. Note: Before we start with auto layout: There has been an update to auto-layout recently, The menu looks slightly different now it however, holds the same features, such as a line spacing, padding, and direction. However, the resizing option that previously was found below the Auto Layout menu now moved up into the frames menu. This has only been a change in position. It's still holds the same options and works exactly the same. You can still follow the tutorials about re-sizing. Just make sure that you activate the resizing options from the new position up here. I also added an update video to the end. Cause. This holds an overview of all of auto-layout new features that however concerns more of the advanced menu. If you're just a beginner in Figma, then don't worry about this too much right now. Once you're ready to dig a little deeper into the new auto-layout and responsive web design with Figma, make sure you have a look at the deep dive class for responsive design with Figma that covers these topics in depth. 23. 0121 Auto Layout Introduction: Auto-layout is a property that you can add to frames and components. It helps you to create designs that adapt to that content. Auto-layout is very powerful and can be used for different scenarios. However, it takes quite a bit of practice. I'll show you the basics today. The most simple and best example for auto-layout is a button. Type something and then make it into a frame. You can do this by using the shortcut Command Alt and G. You could also just draw a frame and write a text inside it. It will work exactly the same. I will add a background color so we can see it better. Then select auto-layout from the right-hand side properties panel. Let's add some padding. You can use the auto layouts padding menu for that. You can either add one value for all padding or you can click on the little square and select a value for top, left, right, and bottom individually. Now let's round the corners. As we now change the content of the pattern, everything will scale nicely and still respect the padding that we set. You can make this into component and have the perfect buttons all across your design. That seems all pretty straightforward the magic happens right here on the right-hand side Properties panel in the re-sizing menu. Note how everything to auto-layout frame itself, as well as the content is set to hack content. If we would change this, and let's say set our outer container to fixed width and the inside to full container, then we would have a very different behavior. Also notice that auto-layout can work horizontally or vertically. What seems like a few choices actually opens and lots of possibilities in behavior. It can become quite overwhelming. I recommend that you start using auto layout on smaller elements, such as buttons or simple cards. Then bit by bit, work your way into it. Constraints and auto-layout probably are the most difficult subjects in Figma. 24. 0122 Nested Auto Layout – Building a Nested Card: The last part of our wireframe that we need to build is to blocked screen. This basically consists of a component which is a card with an image captioning headline, as well as some preview text. I will start by drawing a frame as the card container. I will add a bit of margin left and right. Then I will add a rectangle shape, which will be the placeholder for the image, as well as a caption, a headline. I'll add some placeholder text which will be my preview. Let's sure it's assigned to our styles and aligned nicely. I can now make this into a component and reuse it. But my headline in preview text might not always be the same length. My box will either be too long or too short. It won't respect distances. Let's apply auto layout to our card. If I make the whole card into an auto layout, my text will now adapt, but all my padding is lost. If I apply auto layout padding, it would use it on all the content including my image, which is what I don't want. However, you can nest auto layout. I will first select all my text, group it, and make sure it's grouped otherwise it won't work, and then make it into an auto layout inside my auto layout. I can now adapt the auto layout padding for this separate box only. But note how my text does not span across the whole width. If I type something, it doesn't use up the whole box, I don't want that. What I need to do is adjust my resize settings, and I'll set them to fill container in this case. It will now use up the whole available space, and still respect the padding I set. If you're having trouble with this, make sure that you check that your height is still set to her content. Always double-check that your text as such, is set to auto height in the text settings. This is usually the cause of any error if it's not working. My card is working perfectly if I change the content, but I want to show you a little extra still. Setting my container to fixed width, and the height to hug content. Now you can resize it nicer. If you are having trouble making this work. Make sure to double-check the children inside this container also have the right setting. We're still not done with auto layout magic. I'm going to make this into component, we'll now make instances which I will distribute inside my frame. Now I'm selecting my instances, group them, and make them yet into another auto layout. Make sure all resizing is set the way you want it, and I can now set the distances between them, and I can change all the content, and everything will adapt perfectly. 25. 0123 Finishing off Our Wireframe: Now the only thing we need to do is add the single article page to our wireframe. From any of my codes that I created earlier on, I'm just going to select the image, the caption, headline and a preview text and copy it. I am now selecting the frame where I want the individual article to be displayed and we'll copy it here. I'll arrange it the way I want it and paste my text in here. I will also make sure I adjust the header accordingly. I will actually jump back to my overview page where I want to add the filters to the header. Instead of just enlarging the header, it actually makes more sense to create a separate section that I'll just dock onto my main header. I'll create a frame where I add my filters and then to show the active one, which is all articles, I'll just add a stroke for my wireframe. Now the benefit of having this separate is that the header could be a component, and then I just add any component below that I want to extend the header. For example, my weekdays that I have in my calendar could also be such an attachment. I'm going to switch to errors for my flow back on and make sure that I also have my articles linked. Note that this is a really simplified version about a wireframe in flow here because we're really focusing on learning Figma in this course. Usually you would add much more information, like what interaction it will be, would it be a click, would it be a swipe, what happened in the case of error, what other connections could be happening there, what happens if I go back in time and so on? It could look like something like this. Let's also make sure that our component in styles page has an own section only for our wireframes and make sure to put everything on their own frame. If you're then in the assets panel, you will see how it was sorted nicely for you. 26. 0124 Organizing our File to Start the UI Design: We finished our wireframes and we'll start working on the UI design. For that, I will create a new page that I will call UI Design. You can have wireframe and design in one file, but for larger projects, you can also have two separate files, that is up to you. If you're working on the free plan, then also be aware that you have a limit of files you can have, as well as pages within files. You can also add icons to the chapters if you'd like to. On a Mac, simply press Control Command and the Spacebar. For Windows, you need to enable the touch keyboard, right-click on the Windows Taskbar and click on the Show Touch keyboard button, you can then select emojis. I will also add some structure to my Components & Styles overview page. Again, you could have all of this in separate files, that would actually be a good practice. You can set this up to your liking. I usually set up a section for file handling, so I have headlines here, any info, anything about a behavior and any comments I want to make on the file. I'll then have my other sections for wireframes and later my UI design. I also like a traffic light system to show the state of each element. Any additional information, I will later have, like links or team members, I could later also put into the system. This is what my organization looks like, but feel absolutely free to adapt this to your needs. 27. 0125 Which Frame Size Should I Use? : A common question when setting up designs in Figma is, which frame size should I be using? There's generally no wrong frame size to start your design in Figma. In a perfect world, you should make your design responsive and tested on different screen sizes anyways. However, you should use the same master size for all screens that you are designing, like an initial starting point and reference that you and the rest of the team agreed upon. There are several aspects that can make you decide on the screen size. One, you have valid data, like Google Analytics of a previous website, that this is the most popular screen or device size amongst your users. Two, you start with the smallest size, as it is easier to scale up than to scale down. This is a very popular approach and this also makes a lot of sense because a lot of the time, your code will be also written in that way. It's called the mobile first approach. Three, you're using the most popular device or screen size used in the market right now. Market hereby could be a global market or a target market, as in demographics or country. You can search for those numbers online. There's a variety of pages giving you those statistics. Four, you're using the latest model that was released. For example, if you're designing an iOS app, you would use the screen size of the latest Apple device on the market. Figma usually provides them automatically for you within the Frames menu. This is based on the assumption that the market will naturally grow into this, as we have seen, for example, with larger and larger phone screens over the recent years. You would, of course, still test and make sure that your design works well across all other sizes. Five, this might be a bit odd, but sometimes, especially in a small freelance project, it might make sense to use the device that you have at hand and would use for presentation and testing, so for example, the phone that you would use to show your prototype on. Obviously, that should be a standard market size and relatively up-to-date. Frames can always be adjusted, but it's nice to just start at the right foot so best discuss with your team and your developers to make sure you're all aligned. 28. 0126 Setting up Grids in Figma: Let's add a grid to our frame. To add a grid, select a frame and click on the plus icon on the right-hand side properties panel under Layout grid. Your grid will always be the same distances that you set in your nudging. In my case, this is eight, and per default, you might have 10 here. Most of the time, we will not really need a background grid like this, but what we're after is a layout grid. Click on the grid icon, and from the drop-down, choose Columns. Now, we can set our grid. With count, you can adjust the amount of columns. The color and opacity here is not relevant to your design, as we will toggle it on and off just for layouting. Then you have to type section. Center means that you have a fixed container holding your design that has made up of columns and gutter of a fixed width. When you resize, your grid stays in the middle. The other setting you will need is stretch. This is the one I would recommend using for your mobile setup in general. The grid will stretch to the width of the screen, and columns are calculated automatically. It can still add some gutter and outer margin. Left and right, they can safely be ignored for now. Grids are an important, a complex topic when it comes to dealing with responsive web design. However, for our app design, we will just use a grid as a main container and set our auto margin. You could still add more columns like two or four to divide your screen further if that is of help for you. You can save the grade as a style, just like colors and typography. In layout grids, click on the style icon, click plus, and name your grid. You can now apply this style to any other frame. If you change your grid style, this will be reflected in every frame it's used on. To toggle the visibility of your grid, press Control G. 29. 0127 Colour Styles and Naming Conventions: Let's add the colors for our UI design. Looking back at my wire frame, I want the buttons to be some extended traffic light system. I want them to be red, orange, blue, and green. I'm also going to add some dark gray for my texts and a soft background color. Let's jump back into our components and style section and set up some color styles. I'm first going to set up the colors for my moods. I'm going to draw four circles and fill them with red, orange, blue, and green. You can choose colors either by adding a hex code, pick from the color overview, or you could also pick them from an image with your color picker. I will then set up my new choice the same way. I will have a dark gray, almost black and a lighter one, a light grayish base, that's only for my background to add some more dynamic and a simple white. I will now save them as styles and name them. Note, I am not naming them red, orange, blue, and so on, but I will name them by their function. In some designs, this might be a highlight color. In this case, this is the mood I'm referring to, so sad, so fine, and great. For my background and text colors, I will name them neutrals and add a color, 800,700,200, and 0. Now you might wonder why I did that. This is because if I changed the color during the design process, I do not need to rename. The numbers are there to leave enough space. In-between 200 and 700 for example, I could add plenty of shades without messing up my naming. You could also use 10,20, and 30. Just try to avoid 1,2,3 as it gives you no space in-between. If I click on the canvas background, I can now see all my new color styles. However, I did not use a forward slash naming convention to create a category. I can still do that here. If I select all the colors I want, group them, then this will create a section that I can name. I can group them further inside this group, and I can also move colors between groups. 30. 0128 Setting up a Typescale: For our design, the topography will need to be a little more refined than for wireframe. It is really important to have a set type scale to create hierarchy in your design. There are different techniques to approach and achieve this. As I'm going to set up an iOS app here, I'm going to use some presets that Apple provides me with in the human interface design. On iOS, we can use something called dynamic type. That means that each of our textiles would correspond to a dynamic textile. You can imagine it like your style is linked to this tag, basically. The benefit is, that later the user can change the default text size, and everything will adapt automatically. You do not need to worry about this in your design. I picked out a few of the styles that I want to use and copied over all the information in my Figma style sheet. I will now add sample text and style it with the given parameters. We could now use Apple's in-built system fonts. You can see and download them from the Apple developer's website or you can use your own custom font, which is what I will do. Once I've set up all the styles I want, I'm going to name them according to the dynamic type name I chose, and we'll save them as Styles in my Figma file. You can also set up your own type scale if your design needs more flexibility. In any case, make sure to talk to your developers if there are any set requirements or if they're using a specific system. In case you're designing a responsive website, then you would need to set up a responsive type scale according to your breakpoints. You would start off with a base size for your mobile version, and then for every break-point, if necessary, adapt the topography. Responsive topography for the web is quite an advanced and more complex topic and there is a whole separate new learning course on this. In this exercise, we're not building a website but an app. Let's go with our iOS sizes. By the way, I obviously prepared all of this beforehand. In a new and running project, I usually first try out different font sizes, wades, colors, and so on, in my sample design, and once I like it, I set up all the styles. Often I still change them around quite a bit during the process. Don't worry, it's going to take a little bit, and it's going to be messy in the beginning. That is absolutely normal. First, creativity, then structure. 31. 0129 Images in Figma: When using images in Figma, It's usually enough if you use them in your design. You do not need to set up an own-style section for images. However, I like to set up one sheet that describes the general image style as well as the dimensions I'm generally using. There are several ways to add an image to your file. You can either import an image via the menu or you can use the shortcut Shift Command or Windows Control and K. You can also import multiple images. Select the images, and you'll see the images attached to your cursor with a little red bubble showing you the amount of the import, as well as a preview of the first image to place. You can drop them on the Canvas. You can click and draw to add them in a specific size or you can drop them right into any given shape. You can also simply drag and drop images into your design or copy and paste them. Figma support static images such as JPEGs and PNGs, as well as animated GIFs. You will not see the animation of your GIF in your design mode, but it will later be shown in the presentation mode. Once you have your images inside Figma, you can alter them with a photo editing tool. It is however, more of a quick edit like exposure and contrast. It's not a photo editing tool like Photoshop. You can also choose the way the image behaves inside the given shape. Per default, photos fill any given shape. That means it will expand through the full width. Choosing fit will make sure that you see the whole image. This can however cause blank spaces. With crop, you can cut the visible area to your needs and also choose which part of the image is displayed. Tile will create what you guessed it, a tile. This is more for patterns. By the way, you can also save images as a fill or a stroke style, like your colors. 32. 0130 Responsive Layouts With Constraints: We want our design to be flexible and responsive to adapt to different screen sizes. This is where constraints come in. Let's see how they work. I want to set up the UI design for my home screen and I copied over the wireframe as the reference. When I resize it, not much happens. Let's set up our UI design and let's start with a Status bar as we want this to look as realistic as possible. I will jump over to the community section and search for iOS Status bar. I'm going to grab one and copy it over to my file. Now notice how when I resize this bar, everything stays in its place. When I click on the time, you can see that little blue strokes attached to the left and the top and in the Properties panel, we can see the constraints set to top and left. If we click on the other elements on the other side, we can see the same is set to the right. You can change this setting by either clicking on a diagram or via the drop-down. If I would take the battery, move it into the center and set it to center, it would stay right in the middle. If I were set it to scale, it would stretch with the frame. However, we want this to be responding to our parent frame, the frame representing our screen. That's not happening yet. What we need to do is take the Status bar frame itself and set this to scale. If we now position it in the frame and resize the frame, we can see that it scales nicely. There is another setting called left and right, which comes in handy. The difference between left and right and scale is the following. If I set an element to scale, it will resize as a percentage of the frames dimensions. If I set the same element now to left and right, it maintains the layer size in position relative to both sides of the frame. This is much more handy if you want to have a fixed margin or tie an element to a column width of your grid. I will draw another frame for the header, and I will copy in my links and change them to my new texts and color styles. Let me also give the background a slight tint. I will now set or constraints for the child, as well as apparent elements. I'll just add a simple container as my footer as well. This one I want to stick to the bottom. I'm going to use a little trick now. From the Properties panel under frames, a little bit hidden, I can pick any other frame size so I will jump to the smallest iPhone available right now, which is the SE and I will resize the whole frame. This way I can check realistically any other device size. I will now make all of them into components and save them in my component page. When I copy them over, I might need to readjust the parent container setting as it's set into a new frame. Note that for the constraints panel to show up, you need a parent frame. Auto-layout would also need to be put into a parent group to be working. 33. 0131 Boolean Operations in Figma: I will now create a mood buttons of our design. I'll do that from scratch as I want to face this a little differently. I start with a circle and from my styles in my Fill menu, I picked a color for sad. Now I want some more depth. I will duplicate the circle just on top of the circle, and call that layer shadow. I will change the color to a dark one, and change the opacity to 10. Remember you can just use the numbers on your keyboard. I'll now duplicate it again and move it over a little bit, so I have an overlap. Now, I will select both shadow layers and in the Top menu, I'll select Subtract selection. These operations are called Boolean operations. You can choose between union to unite shapes, subtracting shapes from one another, intersecting, which would leave you with only the overlapping parts, and exclude, which would be the reverse of intersect. Now I only need to draw the face. I'll draw the left eye with two circles. I'll group them and call it eye-left. I will now duplicate it and create a second eye, and I will call that eye-right. Now I'll add a mouth. Instead of drawing it, I will just add a circle, fill it in a dark color for my styles, and then press "Shift X", which is the shortcut for inverting colors. Now I double-click it, which brings me into the edit mode, and I will delete one of the anchor points to create my sad mouth. I can now round off the edges, adjust the stroke, and I'll name it mouth. Our face is ready. Now select the whole face and group it and name it. I will now duplicate it another three times and rename the copies. I will now adapt to color and the faces of the different buttons. My yellow one, I'm just going to change the mouth into a stroke and move the eyes around a little bit. The blue one, twisting mouth, then again rearranging the face. My green one, I'm actually, connecting the paths so I can create a laughing mouth and then adjusting. Once I'm done, I select all buttons and make them into a group. Now I'm just going to copy over my text and adjust it with my new colors and styles. I'm going to make yet another group with my button group and my text and call it content. Now I only need to add my constraints and make sure it works nicely on other sizes. 34. 0132 Nested Components and Variants: I will now create a tab bar and introduce you to a great concept called variance. This time, I'll jump directly into my Component section. I already created a frame for my footer and now I want to add the icons. I copied over a house, a calendar, and a book from an icon set. To get icons, you can either draw them yourself, like we just did with our face buttons, or you can use ready-made icons. If you jump over to the Figma Community section, you'll find plenty. Try to look for something like Material Design icon, which is ready-made libraries or go ahead and buy a good icon set, it's really worth your money. I personally like using this one. Note that the icons are vectors, which means they can be scaled as much as you want without losing quality. It's really important that your icons are in vector format and not images. I named my icons Icon/Home/Inactive then Icon/Calendar/Inactive in the same for the Blog. I will now select those icons, make a copy and adjust the color to an active version. I will then make sure to change the inactive to active in the name. I will now select all of them and make them into components. Make sure that each icon is its own component. This is really important, otherwise it won't work. Now select all of them and choose to combine as variance from the Properties panel. You will now see a little purple line around them indicating that they're part of a component set. If we go to the Assets panel, we can see that only one icon was stored. Let's pull it out as an instance and place it in our tab bar. Now let's duplicate it and position it the way we wanted. In the right-hand sides of Property panel, you can now see some drop-downs for your variance called Property 1 and Property 2. With Property 1, I can change the icon type. Property 2, let me choose between inactive and active. Note how this was created due to the slash naming convention we used. The first name creates the group name. Then we have to Property 1 which is where we noted down the icon type. Then the third one is the state, in our case, active and inactive. By using the slash naming convention, you can create as many properties as you need. If I select the variant group, I can get an overview about names and distribution and I can also alter the names here. You can also add variants and properties to an existing group from here. You could also alter all of these things in the layers panel. But have a look, the naming of your layer has adapted automatically and was changed. Don't change this back because this is really important for it to work. It's however, much more tedious to adapt your variance here than in your variance panel. Now I'm only going to add my constraints left, right, and center in this case, and I'm going to jump back into my design. The great thing is now that I have a component taper with nested components inside it which are variance. I can copy the same variant across all my different screens. However, I can simply switch to active buttons for each screen as I needed. This will also be a huge advantage when you start animating your designs later on. 35. 0133 More About Variants Creating the Calendar Bar: Let's bring the calendar more alive in our design and use our new mood styles as a full background color. I'll give you a little preview what I'm after. I will first set up the weekdays, so I draw a textbox of the full-width and I add some text. I will style it and divide it by 7 to get one day of the week. I will make this into a component and I'll store it next to my frame for now while I'm working on this. Now, I'll copy over the instances and set up the whole week. Let's copy it and rename it. Now I'll draw a frame for the dates, and I'll divide this by 7 and give it a height of 45. Let's add our date. I'm not going to make this into a component yet because I first want to create my variance. I'm going to set up the following. First, I'm going to set up a default version. Then I add one with the circle. This is if only that one day is selected. I will color in the circle with the color of my mood, and now, I'll create three more variants. This is if several data are selected. The first one, the beginning keeps the circle and will have a little rectangle for the background. The second one will only hold that rectangle, and the last one, will have again a circle and a rectangle, but now pointing to the other direction as a closing end. Now we need to name them, and this is important because here we need to use the correct naming convention in order to create our variance set. We're going to name them, date, this is the same for all of them as this is the group name. Then we're going have a slash, put mood, here we're going to say great, sad or so on, whatever the colors. Then we're going to have a slash and put the position, so that's going to be either none, single day, beginning, middle, or end. Let's name all of them. Once I am done with the naming, I'm going to copy just the set with the colors and I'm going to make one for each mood. I'll select all of them and from components, I'll now choose Create Component Set. This is exactly the same as creating variance from the right-hand side Properties panel. Now I did not change the name of the mood, which is my property 1. What I'm going to do is I'm going to select the variance for each mood and switch over to the right-hand side Properties panel for my variance and any year, I'm going to adjust older naming and moods. Let's try it out. Now, from my assets panel, I'm going to take out my date component and I'm going to set up my week. If I now pick any of those variants, I can style them nicely with the help of my Components panel. For my current day, I just want to add a circle with an outline. What am I going to do is jump back into my default variant, and I'm going to add a circle, but I'm going to make it invisible. Now in my variant, I can overwrite it and just add an outline. 36. 0134 More Constraints Creating a Responsive Calendar: Right now our screen is great, but if I change the size, the calendar is stuck to the top-left, as this is the default setting. Let's add some constraints and make it responsive. Our weekdays are easy. We simply choose the whole group and set it to scale horizontally. But if we do the same to our dates, that is not going to look right. Now, we want our numbers and the circles to be set to the center in height and width. They're fixed, and only the color background is what we want to scale. I'll be selecting all my variants and set them to center in both directions. Then I pick the background color only. Keep "Shift" press so you can join multiple selections, and I'll set them to scale. Let's now jump back to our frame and the group holding the variants and make sure it's set to scale. Now it's exactly what we're after. Let's now create our calendar frame. I will copy over my wireframe as a reference. I'll duplicate the home frame, and change a background for my weekdays, as they will be stuck to the header. I'll get rid of my Mood buttons and make sure to adjust the Tab Bar icon. I will use my calendar week to create a month, simply by duplicating it. By using variants, I can set up an overview of the past moods and change everything to my liking in no time. You get the idea. I'll fast forward a little bit. I added the name of the month and grouped everything. Now I have a fully responsive customizable calendar. I did a little extra here and put my calendar on its own frame, and this frame I set to scale and fixed it to the bottom. This way, the current and last month of August will always be visible when I resize. If I jump to the smaller screen, you can see that the circles just fit perfectly in a row. This is because I set the fixed size to 45, which I calculated from the smallest screen size in advance. This is the way I chose to set up my calendar. You might go for a different behavior. For example, it might sit fixed in the middle. Or you could even create a similar result with auto layout. Now let's only send our variants over to our components and style page, and we're done. 37. 0135 Scaling in Figma Building the Mood Pages: We want to show what happens when I press each of the mood buttons so we need one page for each action. So I'm going to duplicate my home screen four times and I want to make this a little more fun than in my wireframes. I want just one of the buttons to be really large and scale it up. I can ungroup content with Shift, Command, and G. So I'm going to get rid of the buttons that I do not need anymore. Now we take the mood button that is left and we want to make it really big. If I would just enlarge it, that would not scale the strokes and the content. So I will use the scale tool that I can just select from the menu or simply press K. I can now enlarge the button to my desired size and reposition it. To keep the menu visible in front of the face button, you can either move it on top in the layers panel or simply copy it, delete it, and paste it back onto the frame. Just make sure it's on the frame. To leave the scale mode, simply press Escape. Great. Let's do the same with our other buttons and scale them and you'll see that our design really starts to come alive without much effort. Now I'm just going to edit a text to each of my frames according to the mood and then I think I am just going to make some last adjustments in positioning. Let me see. Yeah, I think this is how I like it and this is my mood buttons done. 38. 0136 Clipping Content Building the Magazine Pages : Now, all that is missing is my block on magazine overview and my detail page. As I already set up my content auto-layout for my wireframe, I will simply copy them and then go back over to my design page. Here, I'll create a new frame and I will adapt a header. For now, I'll only add block as a headline and I'll get rid of today. Let's also make sure to set the calendar icon to active in our tab bar. Now, I'll paste in the card I copied earlier from my wireframe into my new design frame. As it is a wireframe component, makes sure to detach it. I will now make my changes. I will change the caption, the headline, and the body text to my preset styles in topography and color. I'll also get rid of the stroke around my card. All padding seems fine for me. Now, I will take this card and make it into a new design component. I will keep an instance here and I'll send the master component over to my styles and component page. Great. Now I can duplicate it instance, and I'll make this into an auto layout again, nesting to auto layout cards inside. Now I can just copy and paste the cards but I won't see them as they start to be outside of the frame. I'll deactivate the clip content field in the frame menu on the right-hand side. I'm now able to edit them further. I can now adapt the headlines of my cards. Because I have auto-layout set, everything will sort itself nicely. Now the only thing that's missing is our images. I'm going to import multiple images by pressing Shift Command and K. Now just to drop them into the field. You could also select Shape and via the film menu, upload images one by one. I will switch off the clip content and make sure that the tab bar is on top of my cards. A little side note, remember we placed some images in our styles to work with. If you would like to use those, then you would first need to export them and then you can input them again like I just did. To export, simply select all images, press Export on the right-hand side Properties panel, and export them as JPEGs or if you have transparencies, PNGs. To make sure that they look good, on high resolution screens, make sure to choose 2X or even 3X. This means that they're going to be exported in double or triple the size that you're seeing here right now. This is possible because the original I uploaded is also larger, and Figma stores that. Now I'm just going to do the same with my detailed article page. I'm going to set up a frame, copy over the content from my wireframe, and simply paste it in here and adjust the styling as well as the image. Let's make sure as usual to use our preset styles, and then for the images, I'm just uploading one of my images from before and adding the menu, and I'm done. 39. 0137 Presentation Mode with Scrollable and Fixed Elements: Presentation view will allow us to preview our designs. Here, you'll also see animated gifs, an action. Select a frame and press the play button in the top right corner. Note how this opens a separate tab. You can jump back and forth between your design and to preview mode. You can also add a device frame. Just open a Prototype tab, and choose to devise off the screen size you're working on. Make sure the device size and you set frame size are equal. This is really important. You can skip through frames with the arrow buttons on your keyboard. Now this looks great for all my frames that fit exactly inside a given screen size. But some of them have scrollable content, like my article overview in detail page. And this content is now hidden. Let's jump back in our designs again and select a frame with the content that needs to be scrollable. From the right-hand side, property panel menu. We now choose from overflow scrolling, the option vertical scrolling. Jumping back to our prototype, we can see that this works just great. However, now everything is crawling. In your design file. Select the elements you want to stay fakes. And my case, this is the top bars as well as the bottom tab bar. And then jump over to prototype. And under Position, choose fixed, stay in place. You can see that now everything is fixed except my scrollable content. Via the same menu. You could also choose that elements only becomes sticky once they reach the top on scroll. So if we would do that, then you can see that now if we scroll the bottom bar, what scroll and then stay fixed to the top. So nothing we want in this case, but a very handy for other setups. 40. 0138 Figma Mirror – Preview on Your Device: You can also preview your mobile prototypes on your physical phone which is something I strongly recommend. Go to the Apple or Google Play Store and search for Figma Mirror, then install the free app on your device. Now simply open the app and sign-in with a username and password. In the app, you'll see an overview of all your designs. This might also be empty if you've just started. Click on "Mirror" and it will ask you to select frame or components. In your actual Figma file, simply click on any frame. The selected frame will then be shown in your device. This works in real time so you can jump through different frames, but also if you would make changes to your design, that would reflect directly in your screen. Mirror always uses 100 percent of the width which is why it's so important that you check the frame size corresponds with the actual device. Otherwise, your design will scale and not be reliable. 41. 0139 Sharing Files With Designers and Developers: Figma is especially amazing when it comes to sharing files and working with multiple team members. You can either invite people to your entire project, or you can share a single files with others. When sharing, you can choose between inviting by email or via a link. You can give either viewing or editing rights. Edit rights will basically give the person you invite the same access and view of the file as you have. If you want to invite a fellow designer or copywriter to work on a design, then you would need to choose Edit. Viewing rights are more limited. However, this is not a bad thing. It's actually ideal for handoff development or sharing designs with non designers to avoid overwhelming and accidental changes. You can grant as many view permissions to your files as you wish without any extra cost. Let's create a view link and let's enter with viewing rights only. We only see tools to comment and we can move around but not work in the file. Users invited with view mode can still see all pages and layers. They can change the presentation view. If you set up a prototype, they could also access this. In view mode, you can also see grids and rulers that you might have set and you can also press the Alt key to see any distance to a given object. Instead of the properties panel, you'll be shown the inspect panel that also includes the export function. This is essential for developers. Also a summary of your styles will still show up when you click on the gray background off the Canvas. If you're working simultaneously on a file, you will see the other user's cursor and on the top right-hand corner of your screen, you can see everybody that's currently accessing this file. If you click on the icon, you can follow their movement and screen view. 42. 0140 Figma Inspect Panel: Let's have a closer look at the Inspect panel. The Inspect panel shows us all details of an element and is essential for communication with development. Developers can choose whether they want to output in CSS decision if they were to develop a website or for apps in iOS or Android, you do not need to worry about this. They can choose this by themselves. When clicking on any element, all information is displayed in the Inspect panel. Also note how all styles are noted down as comments, as well as your group and layer names. In view mode, all distances will be shown automatically without even having to press Alt. And you can also activate your grids. By the way, the Inspect tab is also always available in your editing mode, so you could have a look at that anytime. 43. 0141 Exporting Assets: Anyone with access to your file with either viewing or editing permission can also export assets. This is really important to guarantee good quality images across different screen resolutions when programming. Click on an image and go to your Export panel. In view mode, this will be a own tab. In edit mode, this will be at the end of your Properties panel. Click on the Plus sign and you will get your first export at 1x, which is the current size we're designing in. Per default, you get a PNG, but you can change that to a JPEG or an SVG. JPEG would always be your priority. This is for a standard image. If your image has transparency, then go for a PNG. If you're exporting a vector-like an icon, a logo, or drawing, then use SVG. There's also the option for PDF, but this is more if you wanted to export, let's say a screen for a presentation or something like that, it's nothing you need at programming. Now, click on the Plus sign again to add a second export. Note how it will set it right to 2x and then add a suffix of at 2x. This means that it is double the size of your current design, and this is really important to guarantee a crisp image on retina displays. You might need other higher or different resolution. Check with your developers. Once you have them all set up, press "Export." A little tip beforehand. If you name your images with a forward slash like here images, forward slash sunset, then the first one would be a folder that's created and the very last one will be the name of the image inside this folder. You can also create sub folders like this. This is really great and will save you a lot of dragging and dropping. Whether you export all images or whether this is done by your development team, that you can discuss directly within your team. 44. 0142 Figma Team Library: When working in a team, we want all team members to have access to the same styles and component to keep our design consistent. We can publish our styles and component to the so-called Team Library. Publishing styles is currently available for free plans, but to publish components, you would need a page plan. Here I have some styles and components, let's publish them to the library. Navigate to Assets tab and under right-hand side, you'll see a book icon, which will open the Team Library window. If you already have other shared libraries on your account, you will see them here and you can activate them with a tockle. At the top you'll see the current file you're in, and you'll see the Publish button. If you do not see the Publish button, make sure to first create some styles of components. Press Publish, and a new window will open, prompting you to add a description. This is really handy if you later on making changes, then you should note down what and why you're publishing. Figma, will save a version for you after file you published, that is called version control and means that you could jump back in the case of an error. It's advised to publish more often in smaller chunks and to always add a really solid description. Below, you'll see a summary of the component and styles that are new or have changed and will be published. You can select all of them or just some. When you're ready, press Publish. Well done. You just created your first Team Library. Let's open a new empty file and name it Website. There are no styles, and no components in here so far. Now go back to the Assets tab and open the Library again. You'll see a list of all projects and files that have published libraries. Activate the file you just created and you'll see all styles and components available. You could also activate multiple libraries. Some people like to keep for example, their typography in one library, their colors in one library. But this is really up to you and your team how you want to organize this. As soon as you create a new style or component, you will be prompted to update the library. Once you do that, the rest of the team will also get a prompt to update their library and pull the new changes. Once they clicked Update, they will see the execs change made and can decide to update to the most recent version or not. 45. 0143 Setting up a Thumbnail: When sharing files, it's great to have an orientation at first sight of what the files are containing. Thumbnails are great for that. Think of them like a book cover. Per default, Figma will make the first page of your design into a thumbnail, but you can also set your own. Thumbnail dimensions are 1,920 by 960. I set up a frame with those dimensions and added some information about my app. I also made a nice mock-up. Hereby, I simply got an iPhone from the community section. Make sure you pick one that comes in layers, and then you'll usually find one of the layers holding an image that you can replace with your own. You cannot replace it with an actual frame. It needs to be an image. I simply exported my frames as JPEGs, and then uploaded them again as an image inside my iPhone screen. As you can see, I also made a so-called splash screen by simply putting together my mood phases, and added a logo to bring the app more alive. You can pretty much include anything you like on your thumbnail. It's also a great place to add some more information like links to fonts or external libraries. Setting this app as a thumbnail is really easy. Simply right-click on the frame, and choose ''Set a thumbnail.'' Now as we jump back to Home, we can see that our thumbnail is set as a title, and this will also be visible to anybody else working on your file. 46. UPDATE: Auto Layout: The new Figma auto-layout was updated and announced during conflict in May 2022. Some things stay the same, some fetus and brand new and exciting, and some stuff just moved and comes with sweet little details that you should not miss. Give me five minutes of your time and I'll bring you up to speed with everything about the new auto-layout. So you stay ahead of the game and can jump right back into work. Let's start at the very beginning, applying auto-layout, same old press Shift a, or use the menu. Nothing changed. However, notice how the layers now stack in the order shown on the Canvas makes so much more sense. Thank you for that Figma, that old reverse order really used to annoy me. However, the look of the Auto Layout menu has changed. Let's investigate. Direction works just the same as before, and also space between. You can also set horizontal and vertical padding just as we used to do before. If you want individual padding, just click to open the options for all sites. Pretty standard. Tip, hold Command and click on any padding field. You can now use the common notations as you would in CSS, or simply type in one number for all. The alignment tool has simply change position from the sub-menu to the main menu. Otherwise, it remains exactly the same. And it holds some nice new shortcuts, which I'm going to show you shortly. The new on Canvas control. Besides the Auto Layout menu, you now also have an own Canvas control. And this is pretty amazing. So if you hover over any auto layout frame, you'll see the little pink handles appear and you can just drag them to adjust. This works for space between and also for padding. This comes with some really nice shortcuts. So let me show you some tips and tricks. If you hold Shift while dragging, then you increase or decrease by a set of nudging value. Very nice. You can also double-click to handle to tie the specific value. Hold all pressed when adjusting the padding and you get the same values for horizontal or vertical. If you hold Shift and Alt while dragging, then all padding, we'll resize equally. New negative spacing. Okay, This one I'm really excited about. You can now have negative spacing between auto-layout children, which means you can stack elements. Finally, if you click on the three little dots, any Auto Layout menu, you get to the advanced layout menu options. And there are some new and some improved old stuff. The spacing mode is the same old but nice new shortcuts. So just as an auto layout before, per default, everything is set to packed. Packed means that the space between your child elements is set to a fixed number. If you change that to space between, on the other hand, it will use up all available space and create equal gaps between the direct child elements. Now I love that feature and use it a lot, but it's a bit annoying to always go down these sub menus. There's great new shortcuts to toggle between packed and space between in the new auto-layout. Simply select the alignment box and press X to toggle between space between impact. Or click on the on Canvas control handle and simply type auto to set it to space between or any fixed value for packed. Another brand new feature that you find in the advanced layout menu is to include exclude stroke. This is gonna be great help making strokes part of your components. You also find in the Advanced Auto Layout changing stacking order. So here you can change the order if you have elements stacked via negative spacing. Note how this does not change the order in the Layers menu. Besides stacking, you can also always use good old keyboard arrows if you want to change the actual position of an auto layout child. And a last one, brand new and a great helper is the text baseline alignment. You need at least one text element for this to work. You can then choose to align center or via the baseline of the text. Another great shortcut, select alignment box and press B to toggle the text baseline alignment. Brand new and amazing absolute positioning. This one is a total lifesaver. Drag an element into your auto layout frame first, and then you'll get the option in the frames menu to set it to absolute. You can now drag and position it anywhere within your auto layout frame. And it is really inside your auto layout frame. This also means that you can set constraints for resizing. Resize menu. This is the same old, but it was moved and it comes with great new shortcuts. I was a little shocked when I first opened a new auto layout as the Resize menu was gone. It's not, it just moved up right here, two frames. It looks a little different, but it works exactly the same them before. We don't have the visual representation anymore. But Figma added some great shortcuts. Click the top or the bottom line of an auto layout frame to set, to hug vertically. Click the left or the right side of an auto layout frame to hog horizontally. And the same works if you keep old pressed while clicking to change to fill container. So that's it. Everything you need to know about a new auto-layout to get going. 47. Thank You: Well done for finishing this course. Feel free to reach out to us at moonlearning.io, we're always interested in hearing your feedback. You would also do us a great favor, if you could just take a minute and leave a review right here. If you enjoy this course, then also make sure that you have a look at our additional courses. At moonlearning.io, we cover all subjects from the very foundations of UX/UI Design through to Figma and even some code basics. Make sure you visit our website at moonlearning.io, where you can also sign up to our newsletter.