NEW Figma 2024: Getting started the Beginner to Pro Class | Christine Vallaure | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

NEW Figma 2024: Getting started the Beginner to Pro Class

teacher avatar Christine Vallaure, UI/UX DESIGN, FIGMA + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      00 Intro Beginner+Exercise

      3:13

    • 2.

      What Is Figma? Who does the coding?

      3:00

    • 3.

      SETUP - 01 Getting Figma Registration Process

      2:38

    • 4.

      SETUP - 02 Figma in the Browser vs

      1:25

    • 5.

      SETUP - 03 The Figma file browser – Figma's home

      4:03

    • 6.

      SETUP - 04 creating design files

      1:40

    • 7.

      DOWNLOAD working file

      1:02

    • 8.

      BASICS - 01 Adding frames to our file

      2:10

    • 9.

      BASICS - 02 A few handy shortcuts

      0:48

    • 10.

      BASICS - 03 Design file overview

      2:48

    • 11.

      BASICS - 04 Adding shapes and colours

      3:31

    • 12.

      BASICS - 05 Size menu – manipulating shapes and frames

      3:29

    • 13.

      BASICS - 06 Align, tidy up, and measure

      2:15

    • 14.

      BASICS - 07 Adding and working with text

      5:56

    • 15.

      BASICS - 08 Nesting frames – The Figma superpower

      3:00

    • 16.

      BASICS - 09 Frames vs Groups

      3:12

    • 17.

      BASICS - 10 Designing with nested frames

      7:49

    • 18.

      BASICS - 11 Re usable grids with styles

      3:43

    • 19.

      BASICS - 12 Figma community and Plugins

      2:57

    • 20.

      BASICS - 13 Adding images

      3:13

    • 21.

      BASICS - 15 Duplicating methods

      3:15

    • 22.

      BASICS - 16 Drawing in Figma

      2:01

    • 23.

      BASICS - 17 Scaling in Figma

      1:51

    • 24.

      PROJECT: Get the file!

      1:02

    • 25.

      PROJECT: Introduction

      2:01

    • 26.

      PROJECT Part 1.1: Wireframe

      15:57

    • 27.

      PROJECT Part 1.2: Design Idea

      11:44

    • 28.

      COMPONENTS - 01 Re use elements with components and instances

      3:43

    • 29.

      COMPONENTS - 02 Overriding instances

      3:23

    • 30.

      COMPONENTS - 03 What to override and what not to

      0:49

    • 31.

      COMPONENTS - 04 Reverting components and overrides

      1:50

    • 32.

      COMPONENTS - 05 Nesting components

      1:39

    • 33.

      COMPONENTS - 06 Component sets with variants

      4:04

    • 34.

      COMPONENTS - 07 Move components to their own page

      2:40

    • 35.

      COMPONENTS - 08 Keeping components organised

      3:46

    • 36.

      COMPONENTS - 09 Advanced component features introduction

      3:10

    • 37.

      PROJECT Part 2: Components

      9:49

    • 38.

      VARIABLES - 01 Introduction to variables

      0:59

    • 39.

      VARIABLES - 02 Working with colour variables

      6:08

    • 40.

      VARIABLES - 03 Organising with variable collections and groups

      2:35

    • 41.

      VARIABLES - 04 Size and spacing variables

      1:15

    • 42.

      STYLES - 05 And what about styles?

      5:37

    • 43.

      STYLES - 06 Typography and styles

      3:19

    • 44.

      VARIABLES & STYLES - 07 Documenting variables and styles

      5:09

    • 45.

      PROJECT Part 3.1: Colour Variables

      7:29

    • 46.

      PROJECT Part 3.2: Typography

      4:07

    • 47.

      RESPONSIVE - 01 What is auto layout?

      1:17

    • 48.

      RESPONSIVE - 02 Adding auto layout

      3:23

    • 49.

      RESPONSIVE - 03 Auto layout components and variables

      1:48

    • 50.

      RESPONSIVE - 04 Responsive card with resizing

      4:17

    • 51.

      RESPONSIVE - 05 Auto or space between

      1:43

    • 52.

      RESPONSIVE - 06 Nesting auto layout with system

      7:11

    • 53.

      RESPONSIVE - 07 Absolute positioning

      1:54

    • 54.

      RESPONSIVE - 08 Auto layout pages

      7:22

    • 55.

      RESPONSIVE - 09 Constraints in Figma

      2:06

    • 56.

      RESPONSIVE - 10 Constraints and grids

      2:45

    • 57.

      RESPONSIVE - 11 Which Frame Size Should I Use?

      3:02

    • 58.

      PROJECT Part 4: Responsive

      15:19

    • 59.

      PROTOTYPING - 01 The Figma prototype workspace

      3:08

    • 60.

      PROTOTYPING - 02 Setting scroll behaviour

      3:14

    • 61.

      PROTOTYPING - 03 Connecting screens

      4:57

    • 62.

      PROTOTYPING - 04 Dropdown menu with overlays

      1:41

    • 63.

      PROTOTYPING - 05 Animation types

      3:49

    • 64.

      PROTOTYPING - 06 Interactive components

      3:04

    • 65.

      PROTOTYPING - 07 Figma Mirror – Preview on your device

      2:04

    • 66.

      SHARING - 01 Sharing and inviting others

      3:20

    • 67.

      SHARING - 02 Setting up a thumbnail

      2:27

    • 68.

      LIBRARIES - 03 Shared team libraries in Figma

      1:01

    • 69.

      LIBRARIES - 04 Setting up a shared team library

      1:19

    • 70.

      LIBRARIES - 05 Connecting to a shared team library

      1:44

    • 71.

      LIBRARIES - 06 Updating shared team libraries

      2:14

    • 72.

      SHARING - 07 Sharing design, components, styles, and variables

      3:35

    • 73.

      SHARING - 08 Dev mode Sharing with development

      5:49

    • 74.

      PROJECT Part 5: Prototyping

      6:13

    • 75.

      Thank You

      0:36

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

3,983

Students

57

Projects

About This Class

Getting Started with Figma (3.5h)

A beginner's course in UX/UI design with Figma

This course is a comprehensive introduction to Figma from absolute Figma beginner to advanced features. Short and focused, providing you with all you need to know to tackle any design.

We'll start from scratch by setting up your Figma account and familiarising ourselves with its file structure. Then, we'll dive into the fundamentals of Figma, such as setting up frames and nesting them, adding shapes, text, colours, and grids, and creating solid UI designs. Once you're comfortable with the basics, we dive into more advanced subjects like creating solid UI designs and working with components for reusable elements.

You'll learn how to establish styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring your designs to life—always keeping collaboration with development in mind.

With step-by-step exercises and valuable tips and tricks, you'll become proficient in Figma in under 4 hours. It's perfect for beginners or those switching from other design software like Sketch or Adobe XD to Figma.

Getting Started

1. Getting Figma - Registration Process

2. Figma in the Browser vs. Figma App

3. The Figma file browser – Figma's home

4. Creating design files in Figma

Figma Basics

  1. Adding frames to our file

  2. A few handy shortcuts

  3. Design file overview

  4. Adding shapes and colour

  5. Size menu – manipulating shapes and frames

  6. Align, tidy up, and measure

  7. Adding and working with text

  8. Nesting frames – The Figma superpower

  9. Frames vs Groups

  10. Designing with nested frames

  11. Re-usable grids with styles

  12. Figma Community and Plugins

  13. Adding images

  14. Drawing in Figma

  15. Scaling in Figma

    --> Part 1 Course Project, building an App

Introducing Components

  1. Re-use elements with components and instances

  2. Overriding instances

  3. What to override and what not to

  4. Reverting components and overrides

  5. Nest components

  6. Component sets with variants

  7. Move components to their own page

  8. Keeping components organised

  9. Advanced component features introduction

    --> Part 2 Course Project, building an App

Variables and Styles

  1. Introduction to variables

  2. Working with colour variables

  3. Organising with variable collections and groups

  4. Size and spacing variables

  5. And what about styles?

  6. Typography and styles

  7. Documenting variables and styles

    --> Part 3 Course Project, building an App

Responsive Design

  1. What is auto layout?

  2. Adding auto layout

  3. Auto layout components and variables

  4. Resize settings

  5. Auto or space between

  6. Nesting auto layout with system

  7. Absolute positioning

  8. Auto layout pages

  9. Constraints in Figma

  10. Constraints and grids

  11. Which frame size should I use?

    --> Part 4 Course Project, building an App

Basic Prototyping

  1. Prototyping in Figma

  2. Setting scroll behaviour

  3. Connecting screens

  4. Dropdown menu with overlays

  5. Animation types

  6. Interactive components

  7. Figma Mirror – Preview on your device

    --> Part 5 Course Project, building an App

Sharing with other designers and developers

  1. Sharing and inviting others

  2. Setting up a thumbnail

  3. Shared team libraries in Figma

  4. Setting up a shared team library

  5. Connecting to a shared team library

  6. Updating shared team libraries

  7. Sharing design, components, styles, and variables

  8. Dev mode: Sharing with development

Utilize Figma to enhance your prospects in UI Design, User Interface, User Experience Design, UX Design, and Web Design, facilitating your path to secure a job working with UX/UI Design in Figma.

This is an original course by moonlearning

© moonlearning.io with moon learning moonlearning

Meet Your Teacher

Teacher Profile Image

Christine Vallaure

UI/UX DESIGN, FIGMA + CODE

Teacher

Hi, I'm Christine Vallaure, founder of moonlearning a UX/UI design Figma learning hub. . moonlearning is my pet project that has turned into a full-time job, and I couldn't be happier about it. I love talking, teaching, and writing about UX/UI design and Figma, always encouraging UI designers and developers to be curious about each other's work.

Besides video tutorials, I also offer live and online workshops and speak at conferences and meetups. Connect with me on Twitter, LinkedIn, YouTube and via my newsletter, so I can keep you updated on future moonlearning adventures.

You will find a small selection of some of my original moonlearning courses here on skillshare. Content is shortened and adjusted to the skillshare format. Enjoy!

www.moonlearning.io

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 00 Intro Beginner+Exercise: Today I'll guide you through the world of Figma. Let's learn how to bring our ideas alive with Figma's incredible features. We will learn everything about set up and creating basic designs. Working with components to create reusable design elements. Setting up stars and variables for consistency and hierarchy across color, typography and spacing. Responsive design with auto layout to adapt to different screen sizes. Basic prototyping to bring your design alive and how to share and collaborate with other designers, and most importantly, developers, to get your design coded. We'll start from scratch by setting up our Figma account and familiarizing with the fire structure. Then we'll dive into the fundamentals, such as setting up frames and nesting them, adding shapes, text colors, and grids, creating a solid UI design. Once you're comfortable with the basics, we'll ensure your designs aren't just pretty pictures, but are also highly functional and scalable. I'll show you how to create re, usable design elements with components and the variants which are essential for modern UI design. We'll create variables and styles to define and reuse. Color, typography and spacing, ensuring consistency across all projects and enabling quick changes in your design. Understanding these features and documenting them effectively is crucial for seamless communication with development. Next, we'll make our designs responsive to changing content and screen sizes using auto layout and constraints. You'll see that with the right approach, it's much easier than you might think. Now let's bring our designs alive and add some basic prototyping to the mix. To finish off, I'll show you how to share your design with other designers using shared team libraries. And probably one of the most important, but often neglected subjects. We'll talk about how to document and share your designs for smooth communication and collaboration with development. Throughout the course, I'll address common questions such as how to choose the right screen size, when to use variables versus styles and share valuable shortcuts, tips and tricks, and little hidden gems. I'll provide you with a Figma exercise file enabling you to follow the bite sized videos step by step alongside me. Once we mastered the essentials, we'll apply them to a real project. Building a fully responsive component based pot cast design ready to be used in your portfolio. I'll keep it short and focused, and in under 4 hours, you'll find out everything about Figma that you need to tackle any project. This class is right for you if you're a total beginner or switching over from any other design software. This is the course by Moon Learning I. 2. What Is Figma? Who does the coding?: What is Figma? In a nutshell, Figma is a user interface design software, also known as UI design software. In Figma, you can create interactive wire frames, set up advanced user interface designs, and create impressive prototypes. The great thing is that Figma works for both Mac and PC. You can use it in your web browser or wire the desktop app. Figma provides you with all the tools you need to design for web or apps. Such as working with components, setting up styles and variables, tools for responsive design, as well as automated information for developers. It's really the combination of its incredible features that makes Figma so special and positions it as industry leader, Figma is cloud based, making it the ideal choice for collaborating with other designers or sharing your designs with development. You can design with others in real time, allowing you and your team to work on the same project simultaneously to stay perfectly aligned. Figma is incredibly user friendly and has a gentle learning curve for beginners, but it can also be taken to very advanced levels for alignment with code and creation of complex design systems. Now, a common question I hear is if I designed a website in Figma, how does it become a real website? Does Figma do that? Does Figma do decoding well, But no. Figma provides excellent tools to facilitate collaboration between design and development, such as deaf mode, where you can see CSS snippets, add code information, inspect components, and much more. But there's no such thing as a published button. You do need a skilled developer for that. Alternatively, for straightforward websites, you could use tools like Webflow or Framer, using Figma as your base to plan and set up your design. In the Moon learning course, we'll start from the very basics. How to obtain Figma understands its user interface and set up initial designs. I'll guide you through all the main features, ensuring that you can not only set up designs, but also structure them with components, styles, and variables. You'll learn how to make your components responsive and bring them to life with prototyping. I will also explain how to collaborate and share with others and get ready for development, provided you with a perfect start. As a UI designer working with Figma, all videos come with a downloadable Figma file, so you can work alongside me and try out everything yourself. As I believe it's key that you explore the software as soon and as often as possible yourself, rather than just watching me. Let's start. 3. SETUP - 01 Getting Figma Registration Process: Let's get a free Figma account. Visit Figma.com and then in the top right corner, click on Get Star Sat for free. Enter your e mail address and choose a password, and click on Create Account. We're almost done. As a last step, Figma will ask you to verify your e mail. Jump to your inbox. Find the E mail that Figma send you, and click on the verification link. You'll then be led back to the account. You can name it. And Figma is just going to ask you some additional questions like why and how you're using the account. To make sure that you're getting the best possible experience, just add the information that is correct for you. You'll then be asked if you want to invite others. You can also skip this for now. And there are some additional questions like what brings you here and so on. You can answer those to your liking or just skip them. The important part is here where we have to choose our plan. You can choose between starter and Professional. And there are also plans for organizations and enterprises. You can find them on the Figma website. To get started, let's go for the free plan. You can always upgrade later if you need more features. We can then choose if we want to already set up a design or Fig jam file. Let's also skip this and get started on our own. For now, there might be small alterations in the process, but you should land in the Figma workspace. You usually offered a tour. Let's take this quick tour. And you can see you can create files in here. You can also import files, and you usually have more buttons like on the top right. Now, a good place to start is in drafts. This is just your own workspace, so you don't need to share them with others yet. If you do want to share and collaborate with others, you find your teams and your projects down here. And there's also the community section. We're going to explore all of this in more depth. On the top, you can find your account where you can change any settings or upgrade anything you need to know. Figma will notify you also about updates. And by the way, everything is auto saved. If that was too fast, don't worry. We're going to go through all of this step by step in the center. Usually Figma provides you with some files to play with. You can check them out and you can also write click and delete them. However, they're quite useful. If you double click, then you can enter one of these files. Inside of here you get more information. And you can also just click around and play with the user interface a bit. 4. SETUP - 02 Figma in the Browser vs: 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 forward slash downloads. You can then choose between the Mac and the Windows version. It's really important to note 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 will 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. 5. SETUP - 03 The Figma file browser – Figma's home: The Figma file browser, or in other words, Figma home. When you open Figma, you're going to see something like this or probably something like this, just with a lot of files in the center. This is a place where you keep your files and your teams organized. Before we create our first file, let's make sure that we understand the Figma file structure, which is a little weird in the beginning, but just bear with me. 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 Fig Em 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. Over here we can see our teams. You might have already been invited to a team. Then you'll see it here on the left. You can also create your own teams. Simply click on the plus button, name your team. Then you can choose if you want to invite others, We can skip this for now. You can always invite later choose a team plan. You can always go for starter and then later upgrade if you need any additional features. You'll then see the team you created on the top, you can always right click to delete a team. Let's use my existing team, Moon Pro to investigate a little further. If I click on it, I can see the projects. Now the name project is very confusing because it seems like this is how you have to set this up. Noted that this comes from the very early days of Figma. These days, we use projects just as any sub folder and the level of organization you can name and use them for anything. If I click onto my projects, then I can see my files inside of that project. You can open any file by simply clicking. This will create an own tab for this file. On the left hand side, inside of the file, you'll see the pages to jump back. Simply click on the house icon. A very handy feature is that if you hover over any file, you get this little star here and you can mark your file as favorites. This will store the file in your favorite section on the left hand side menu. This is super handy when you have a lot of files. This way you can mark the ones you're currently working on. If you click on the team, then you can also invite others to this team, either by sending a link or inviting via e mail. You can change from view rights to added rights. Just make sure that you check the costs when inviting other editors. If you want to change rights, then you can always click on the little edit symbol. Here you'll see everybody that's part of your team and via the design role you can assign view editor or any other rights that come with your Figma plan. Another great thing to access via the file browser is the community section. Currently you find it next to the home icon. Click on this little globe and you're going to access the community. Here you can search for files, plugins, and all sorts of fantastic resources. Figma is always updating and improving the file browser. By the time you're looking at this. Some things might have slightly moved. 6. SETUP - 04 creating design files: Let's create a new design file in Figma. You might have noticed that in Figma we have Fem files and design files. We're going to work with design files. They are for creating UI designs. Fiem files are more for brainstorming, collaborative work and ideation. I'm going to jump into drafts for now, and I'm going to click on Design File. As you can see, there's open a new file in a tab right next to the tab that I already have open. You can have multiple files opened in Figma. I can rename this file simply by double clicking the name and then give it any name I want. If I click on the little arrow next to the name, then I could already move it into any project I want from here. But I'm going to jump back to home. By clicking on the house, I can, I can see my file that I created in drafts. Now, I can simply drag it to any project and I want, if I go into the project, I can see my file here if I wanted to rename it. I can also do that simply by right clicking and choose rename. Usually, files in Figma are always shared within the file browser. However, if you ever get a download file, a file that ends with Fig, then in order to see it inside of your file browser, make sure that you use the import button. It's not going to work by simply double clicking it. 7. DOWNLOAD working file: Please make sure that you download the exercise file for every section that we're going to be working on, like basics, components, variables, and so on. You're going to see everything that I showcase on the screen, in this file. And this allows you to really jump in and follow along what I'm going to showcase on the screen and try it all out yourself. You also find a little description here on the side if you rather want to go through this on your own and you also find a solution with everything we're working on, you can click through it and see how I set this up. I recommend that you first watch the short video sequence and then jump into the exercise file and try out yourself if you feel it's necessary. At the end of each section, you're also going to find a prompt to jump into the project file. Please note that the project is absolutely optional, there's no extra information. It's simply an additional step if you want to dive a little deeper and try out your newly learned skills. 8. BASICS - 01 Adding frames to our file: Let's start with the base of everything in Figma frames. Make sure you're in a design file. This gray area you see here in the center is called a canvas. Think of it like the surface of a table you're working on. On top of it, you'll add your designs like sheets of paper in Figma. Those sheets are called frames. You can add images, texts, and shapes to those frames to set up your designs. To create a frame, you can go to the top too, and then simply select the frame tool from the menu. Or you can also simply hit on your keyboard. We now open the Figma preset Frame menu on the right hand side. As you can see, Figma set up most common screen sizes for you. If I click on one of them, then it's going to add the frame in that size to my canvas in case you're not after a specific screen size. You can also draw a frame. Let's hit again, and then we can simply drag a frame open on our canvas. Now the great thing is if I select this frame and jump back to the frame drop down, I could also turn this into any of those presets. You can use a shortcut shift to center anything on your canvas. Two things happened. Figma added those frames to our canvas. And we can also see the frames in our left hand side layers panel. The layers panel is basically a mirror of everything that happens on the canvas. You can rename your frames. You can either click directly on the name of the frame and then simply type what you're after, or you can also click on the name in the layers panel. We always use frames and never shapes, to represent our screens in Figma. Unlike traditional out boats, you can nest frames within frames in Figma. Which will allow you to create more complex layouts later on. 9. BASICS - 02 A few handy shortcuts: A few henley shortcuts. You can toggle the menu on and off by pressing Command or on Windows control and Full Stop on some keyboards. You can also use the Carrot key. You can move around the canvas by pressing your Space Bar and then simply drag. You can zoom in and out by pressing command plus Command and minus. To have your designs played at 100% click command and zero. If you want to use zoom and fit, that means to see all elements on your canvas, simply hit shift. And one, if you want to zoom in one particular element, select it and hit Shift and two. 10. BASICS - 03 Design file overview: Let's get a quick overview of our design file before we dive deeper. You can see here we have our frames and then we have different panels and we're going to get to know all of them. We have layers, assets, design and prototyping. Let's stay in layers for now. In the layers panel, you could also add additional pages to your file. If you click on the little error next to page one, you get a drop down and you can click on Plus to Add Pages. This is basically a new canvas. Pages can serve different purposes and we're going to talk more about them later on. Also notice how I set up this file in a free account. This means you're limited to three pages on Pro Accounts or above. You can add as many pages as you wish. If you right click on a page, then you can delete it. If you double click on the page, you can rename it. On the top here, you find the top tool bar. This is where we find all the main tools such as drawing frames, shapes, texts, and so on. Also note this little figma of sign here on the left. If you click on that, you're going to get a sub menu. The most useful one out of this is the quick action. Click on the quick action, and now you can search pretty much anything you're after. I recommend that you have a look at shortcuts. If you open shortcuts, this is going to show you all the main shortcuts. Right down here at the bottom, everything that's marked blue is a shortcut. You already used everything. White is something you can still try out. Quick search is really, really handy and should become your best friend. On the right, we can see who's currently in our file. We have the share button. We have deaf mode, which we can tockle on and off. And we're going to learn more about all of this. Of course, our prototyping present and preview. In the future, you might see some features like Def mode being moved to a pad plan. Always have a look at the Figma pricing page where you can see all features and the overview for each plan. On the right hand side, we find the properties panel. If you click on the gray canvas area, then you get an overview of what's currently going on in your file. Later on, you're going to see your variables, styles, and all information about your file here. If you click on a certain element, for example, this frame, then you're going to get the properties associated with this frame or later on, any element in our design. 11. BASICS - 04 Adding shapes and colours: Let's add some content to our frames. Here I have a frame which I called frame. Now let's add some shapes. I'm going to go on the shape tool. And I can choose between rectangle lines, error, ellipse, and polygon, as well as star. Now notice how behind each of those shapes you're going to see the short cut. I'm going to go for a rectangle. If I would simply draw it, then it wouldn't keep the shape. If I want a perfect square, then what I can do is I hold down shift and I then draw. I can select it and I can then position it. And notice how Figma is going to give you helping lines. Now let's draw a circle. If I have a look at my menu, I see that the shortcut is O. Let's press O again. I hold down Shift so I get a perfect circle. And I'm going to add a circle. Let's add another shape. I'm going to go for a polygon. This one I'm simply going to draw like this. I notice that there's a little more space in the right hand side. You can see that now it has a count of three. You could move this one up and then you could create other polygons. I'm going to leave it at a triangle for now. Let's add some color to this. I'm going to start with my circle here, Make sure that you have the shape that you're after selected. And then on the right hand side in the Properties panel, you can change the color via fill. You can either click on the color swatch and then simply pick any color. Or you can also add a hex coat, which is what I'm going to do. I'm going to select my triangle. This time I'm going to use the color wheel and I'm simply going to go for a nice orangey red. For this square here, I want to use a blue Play with the Fill menu to familiarize, you can use opacity, So you can simply add any number. You could make the fill visible and unvisible. You could even add more fills. This is, however, something I rarely use. If you click on this watch, you can see that here you can also change the gradient. And we can change this into an image fill, which is something that we're going to use later on. We could also add a stroke. Now I could add this to this single element, or I can simply select all elements. Simply keep your mouse key down and select everything. I can now click on the plus button next to Stroke, and you'll see that now they each got an outline. I could change the stroke to a thicker stroke, something like four if you, for example, wanted a dotted line. And you could do this here by clicking on the three dots and change from solid to dashed, just as you did with the fill. You could change the color of the stroke. 12. BASICS - 05 Size menu – manipulating shapes and frames: Let's learn about the size menu. I just drew these shapes randomly, but if you want a precise number, then you can select any element. And in the right hand side properties panel, you can see the width and the height property noted this little clip here on the site. This means that the width and the height are locked. If I increase the height, then the width is automatically going to scale with it. You can also unlock them, and you could now manipulate width or height independently. You could also use these boxes for calculations. For example, I could say 200 minus, let's say 50. Then the result would be my width and height. Let's do the same for our square. I'm also going to set this 1,200.50 So it has the same width and height than my circle. I also want the width of my triangle to be 150. Now this has this extra shape around it, and remember this is because this is actually a polygon. So I can change this here. It's quite handy because it also helps us to position a triangle in the center of something. Sometimes you just want to shape, In this case, you can write Click and you can simply flatten the shape. Let's just clean that up. I'm going to set it also to 150. I'm going to have this one here at, let's say 120. I can further manipulate shapes. What I could do is, for example, I could change the corner radius. I could add any number here, or I could simply use my up and down keys. If you hold shift pressed, then you're going to jump in larger, so called nudge amounts. If you only want one specific corner, then make sure that you open the independent corner menu. Now you can simply choose the corner you're after. We can also rotate our shape. The same thing, you can go up and down. I'm using my nudge amounts here to rotate any shape. You can also do all of this right on the shape. If you select the shape, then you're going to see these little circles here. This is the corner radius and you can simply drag that. It will always correspond to the same number in your properties panel. We can also rotate simply by getting close to an edge of any object. Hold down your mouse key, and you can now rotate it on the canvas. Again, this is going to reflect the number in the properties panel and you can change it here as well, a little hidden treasure. If you select a circle, then you're going to see this little circle here. This is the arc tool, and most people actually don't know about this. Hold your mouse key pressed and you can now change the circle, not only in the cutting out, sweeping it around here, but you can also change the ratio. Nothing that you will use all the time by quite handy if you want to add some dashboards or charts. 13. BASICS - 06 Align, tidy up, and measure: Let's learn how to align, tidy up and measure between your objects. You want to have your shapes tidied up a little bit. Let's select all of them. And by the way, this works for all elements. You'll see at the top of your size menu, the alignment menu, you can align to the left. You could also align them to the right. What we are after is align them to the center. This obviously works for horizontal or vertical. You can also align to the top or to the bottom. Another feature I really like is if you click on more options, then you get the tidy up feature. If you hover over this, you're going to see these little handles and you're also going to see these circles. It tidied this up and it created the same distance between all of your elements. Now notice I'm using my rectangle, that it's still a polygon and sits inside of its shape. What I could do is now I could select all of them and I could change those handles and that will be the same for all of them. And I could also use the properties panel to manipulate this, as it's now going to give me the space between those elements as an owned property, you can also select any of those shapes and then swap it out quite easily as soon as it's tidied up. Now if we select all of them, then they're not aligned in the center yet. You can, however, select all of these together, move them. And then Figma is also going to show you some guiding lines to get the center of your frame. Another handy tool that I use all the time is that if you select a shape and keep all depressed and hover over any other shape, then it's going to show you the distance. This works to the edge of the parent frame or any neighboring objects really, really handy. You can still move it while you have all selected. And then you will see how the distance changes to this object. 14. BASICS - 07 Adding and working with text: Let's add some text from the top to a bar, Select a text menu, or you can simply press, there are two ways you can add text. You can either simply click anywhere you want to add the text, and then you can start typing. You could also draw a text box. Let's hit again, and I'm going to draw a text box. And I can add the text here. It doesn't matter which approach you're going to use, because you can always change it via the text menu, which is what we're going to get to know. Now I'm going to keep both of them. This is going to be my headline and I'm going to keep this one and just copy in some more dummy text. Then we can use it as a copy. I can open a text box larger simply by holding down my mouse key and dragging it. First of all, I want both of them to have the same type face. I select both via the menu. I'm going to select a typeface. You can see that all Google fonts are pre installed if you're using the fake A app. Also, any fonts that you have locally on your computer are going to show up here. I'm going to go for a Google font called Poppins. Now before I go to change the size and the width, you can see that this is a little bit all over the place. Let's tidy this up. I'm first going to go for what's going to be my headline, and I'm going to set this to auto width. That means that the text box is always going to adjust to anything that I add in here in width. My copy text, I'm going to set to fixed width and auto height. That means that it's going to take the full height in whatever I add, it's going to adjust to this height. The last one here is fixed height and fixed width, and to be honest, I hardly ever use this. Let's select our shapes, pull them down, and make some more space. Now I want to change the weight. I can do this with the second drop down. And I'm going to have my headline in bold. And I'm going to leave my copy text regular, obviously, I want my headline to be larger. I can do this with the text size here. You can either type any number or you can also use your arrow keys on the keyboard to go up and down again. If you have shift pressed, then you're going to jump in your nudge amount, I'm going to have a big hello on the top here. Now my copy text, I'm going to have this box even larger. I'm going to keep at 16, which is the standard size for copy text. The next one here is the line height. This is a really important one. The line height is, we can see this better at our headline. This little space at the top and the bottom of your text. This is like a natural gap that we're creating. Always leave that, at least at auto which corresponds to 1.5 or you could even go higher and set it to 1.7 You can calculate this, so you could say 16 is my text size. Now I am multiplying this by 1.75 therefore it would give me the pixel value of 28. You could also use a percentage notation, so I have 175% If this is all new to you, then just leave it at auto for now, which is giving you a really good line height. Whatever you do, don't set it to the same size as you text or even smaller because what would happen is that you would lose the line height, which might be okay on a one line headline. But in your copy text, or as soon as something is like changed, like the textbox changes, as the browser window changes, then text is going to be squished together, and we don't want that. In this next one here, you can change the distance between the letters. In this one here, you change the paragraph distance. Let me just make some more space here and I'm going to show you if we had a paragraph here, then if we would select this, it would create a distance between this break, the alignment is left, center, or right, pretty standard. This little tool here means that if you add more text, which direction is going to grow to the default we have it on. Means that if I copy more text, let's just add more text in here. It will just be added to the bottom. Now if you had this set to center, then what would happen is that this would grow from the center, obviously the same. If you had a set to the bottom, it would grow upwards. The three little dots here you have some extra things such as bullet points, um, underlining things like text, accubation, so on. Just as any other objects, you can select text and you can align it, any change in color. You would use the Film menu. And by the way, in Figma UI design in general, text always has its own box. Headline has an own box and the copy text has its own box. You could technically have this headline inside the same box, but it's not how we set up UI design. 15. BASICS - 08 Nesting frames – The Figma superpower: Figma is really all about nesting frames. In the beginning, it might not seem so obvious why everything should be placed on a frame. This is something that you're going to understand much better once you move into more advanced features like working with components or also layout. Let's have a look what nested frames would look like. Here you have a parent frame. Inside this parent frame, you have more frames. You have an orange frame, a red frame, and a blue frame. You can see that in the left hand side layers panel. You can move the frames around simply by dragging them. Now, inside those frames, I still have more. If I click on my blue frame or open it via the layers panel, you can see that I have a shape, but I also have another frame that holds some text. This would be something like a button that would again be a nested frame. If you select any frame and move it, then everything you placed inside will move with it. If you drag elements between frames, for example, let's say this shape, I drag it into the red frame, then you can see that it automatically reorganizes in the layers panel. You don't need to worry about this. I can also simply drag an element out of the parent frame and it will automatically create another frame on my canvas next to it. You can also draw frame, if I hit, I can simply draw a frame inside of here. If I draw it over certain elements, then it's going to hold these elements. But let's go back a second to our original set up. If you have all your layers open and want to collapse them, then simply select the parent frame and hit Option or Alt and L. If you want to jump down to the next child element and hit Enter, notice how that's going to select all the frames on the next level. If I hit Enter again, it's going to go one step further and so on. If you hit the hash key, then you're going to select the parent. Again, don't forget with old L, you're going to collapse older layers. If you want to deep select a layer, so let's say you want this button here, then you would have to first click all your way through. What you could do is simply hold command pressed and then select the layer you're after. This is actually the shortcut you would really need to remember because it's something you're going to use all the time. It's good practice if you already start thinking and designing the basic elements of your design with frames. And I'm going to show you how this works. However, don't get stressed. If here or there you make a little mistake or you're unsure what to use, you can always fix that later. 16. BASICS - 09 Frames vs Groups: The next question you'll probably have is, why frames, and not just groups in Figma? Because in Figma we could simply group elements by selecting them and hitting command G. Let's have a closer look at this. Here I have a frame, and this frame holds another blue frame and an ellipse. Here I have the same set up, but this is a group as you can see in the layers panel. Now I can move them as a group. This is what I'm after. I could even place them into another frame. Let's say drawing a frame around them, then you can see both of them sit nicely inside of this frame. Whether it's my nested frame or whether it's my nested group. In the beginning, it seems like there isn't much of a difference. So why not just go for this one? It's true when I start designing, sometimes I actually use groups. They're somehow faster and easier to manage at the beginning. If I do a quick draft of something, I often start with groups. You actually don't need to worry because even if you have a group, you always convert this into a frame later simply by using the drop down menu on the right hand side. You could always convert any frame back into a group if for whatever reason you wanted to In the beginning. Don't stress yourself too much about how you need to set all of this up. It's going to come to you once you move onto the more advanced things like auto layout, end design with components, as well as prototyping, where you're going to notice that you're simply going to need a frame, or Figma is even going to give you a hand and convert everything into frames for you when needed. Let's still try to get in the habit of working with frames for now. Just a few basic differences that you might notice right away. The first one is if I have a frame, then you can see on the right hand side, I get this little box I can tick, which is called clip content. Now, clip content is really handy, especially because we're using the frame to represent our Viewpoard or our device size. Therefore, we're going to have content that overflows. This is something that later with prototyping we might want to animate, but in the beginning we don't want to see all of this overflow. It's really handy that we can show and hide this. I can't do that on a group. You're also going to notice that if you want to use this as your background, let's say we're just reciting this one here, then we have exactly the same look. If we're using this, then we're missing some features. Have a look. If I switch over to the frame, you'll see I'm getting much more features like layout grids and all of these different selections. Here I'm getting quite a few. I could, for example, add auto layout, something we're going to do later on. If I take it off, you'll notice that Figma was nice enough to convert this into a frame for me. Rather than stressing about the right approach, I recommend just jump in, get some tractors, and once you reach the more advanced features, it's going to all fall into place. 17. BASICS - 10 Designing with nested frames: Let's set up a first design with nested frames and Figma. Here's a classic example. I have a parent frame, and this is called block, which holds other frames and elements. You can see here, I have my navigation, which is also a frame that holds another frame and inside some lines representing the burger menu. By the way, I can just drag this up here if I want to change the order. Next up I have my headline. You can see that headlines or just text as such, is not placed on a separate frame unless it's like part of a card or another element, a headline, you can just place freely on your parent frame. Then I have my card here, you can see I have two cards. Again, if I wanted to change the order, simply drag that within your layers panel. Inside of my card, you can see I have a shape which I called Image and then I have a headline and I have some text. Let's recreate this. In the process of building, it will become much clearer why and how I set up the different elements. Okay, let's move this a little bit. Let's hit F. Let's add an empty screen right next to it with the same size with shift. And two, we send them right in the middle. I'm going to go through this quite fast, so feel free to just pause the video and try out different steps in your own time. The first thing I'm going to do is I'm going to press L and it activates the line tool. You can see that up here, the shortcuts. And I'm going to draw a line for my burger menu. Let's set this to 40. What I'm going to do now is going to select this, Hit Shift option, or Ought. Then I'm going to drag down a copy. You can see that I can now see the direct size. If you don't have that, you can also select it and just use the tidy up tool. Now let's select all of them. And I'm going to make them a bit bigger so we can see them better, so two pixels. Now the next thing you might do is go and change that into a group command G would create a group. On the left hand side here you can see a group and you can call this burger to be honest for right now, that would work just fine. If you later want to change this into a frame, then you can simply select your group in your right inside properties panel. You can simply switch between frames and groups. Note how the group, if I wanted some extra space, is not allowing me to do that. What I'm going to do is I'm going to turn this into a frame for now. You can see it would show me everything if I clip, but it's going to cut off some stuff. But what we can then do is simply press command and you can now resize this frame to your liking. Let's finish our fine navigation. Simply press, Instead of picking a frame, I'm going to draw a frame. And I'm going to draw it around the burger that I just made. You can see if I draw it around any element, then this element is going to automatically sit inside the frame. It's going to move with this frame. Let's give the background some tint so we can see it better. I'm just using my fill and just picking a slightly darker color. Let's make sure we have a fill here as well. In case you don't have a fill, just press on Plus and it's going to give you white. As a default, you can still select your burger inside here. If you press Command, you can even deep select our strokes, But the easiest way is actually to hit Enter, and that selects all child elements. And you can then use the alignment tool to center it in the middle of your navigation that you just created. Next one up is some text, Let's press T. I can simply draw a textbox wherever I want to add this, I can add text in here. And I'm simply going to copy the text I already wrote, and I'm going to place it inside of here. Now you can see that that automatically took the styling of that text. If you wanted to change that, you could do this over here. Get in the habit of always adding auto height to your text. This will simply mean that if I am deleting some text or if I'm adding some text, the text box would automatically respond. Let's set the frame for our card. I simply hit, instead of using the preset menu, I'm going to draw this card onto my canvas. I'm going to add a bit of an effect that's going to give a shadow to the background. And notice if you don't see anything, then make sure that your frame has a fill. If it doesn't simply click on Plus and it's going to give it a white default fill. If you want to change the effect, then you can do that by simply clicking on the Sun icon. I'm going to add this area for the image to my frame. I'm going to hit R and I'm going to draw a rectangle. If I draw it onto my frame, you can see that in the frame menu, it's automatically added to the frame. If I double click, I can change this to image. There's a lot of opinion about whether a placeholder for an image should be a frame or should be a shape. Don't worry too much about it. There's no right or wrong. Both approaches will work. You'll generally see me using shapes a little more than frames in most cases because I feel it's easier to add images to them. But in some occasions, a frame will make sense. Sometimes I even use a frame with a shape inside. If I'm working with advanced animation and zoom effects at this point, don't worry too much about it. Just use what works best for you. Now let's add our headline. So I press, so I get my text tool and I write headline for my copy text here. I'm just going to be lazy and copy that over from my example. Now notice how this is already set at auto height and I'm going to leave it at this. You can adjust it however you want to set up this card. I'm also going to have this headline at auto height in general. Auto width, I would use for something like buttons where I know it's not going to flow into a second line that looks great. Let's just tidy up the naming. I'm going to rearrange them a little bit. Okay, fantastic. Now, one thing I want to point out is notice how here we have clip content. Clip content. Let's just draw another shape in here. If I had, let's say a circle, you can see that it's not going to display the full circle. If you select the parent frame, then you can see everything outside of your card. Sometimes if you don't see elements, or especially if you're working with an outline of something, then make sure that your clip content is set. To make a copy of your card, simply select a card. Press Alt or option, and little tip hold shift pressed as well. Then it will copy it just in the line below and it won't move left and right. Here you go, your first layout is done. 18. BASICS - 11 Re usable grids with styles: Let's create some reusable grids. Here I have my block page and I have another detailed page if I click on this article, now I want to add the same grid to both of them to make sure that they follow the same overall layout. To add a grid, simply select a frame. And note, this works on any frame. In this case, I'm going to select my parent frame here, representing the viewport on the right hand side. I'm going to click on Layout Grid Default. You're going to get this pixel grid, but we don't want that. We want columns. Click on the icon, and then from the drop down choose columns. You can change the count. So I could change this to four. I can also set a margin. Let's try something like 24. Note how I always work with multiples of four or eight. Then for the gutter, I'm going to go also for a multiple of eight or 24. Actually, let's move this up a little bit to 32. Now, there are different kinds of grids. Stretch is probably the most common one. That means that if I change the width, then it's going to stretch the column stretch and the gutter and the margin stays the same. Remember, you can always go back to the original size via the menu. Now if I go for center, that would mean that the grid stays in the center. I would need to figure out what width I would need in here. You need to do a little bit of math to find out what you're after, but for now, let's stick to stretch. Let's jump back to our original size of an iphone 14. I could now apply the same grid to my other frame simply by going through that process again. But it's much easier and better practice to save it as a style. I'm going to select the frame where my grid is on. Then where I see the grid that I just created. Click on the styles icon. You can now click on the plus and you can save it. I'm going to call it Mobile Grid. You can add some more description here and then create the style. If you click on the gray canvas, then you're going to see this grid style saved in your overview. If you write click, then you could also alter it or delete it. If we want to apply it to any other frame, simply select that frame. Then from the Grid menu, if you hover over it, you're going to see the styles icon. You can now select the grid. I can now start to align, for example, my text boxes to the grid. Notice that with things like these cards here, this is later going to be auto layout. All of this is going to work a little more automated, but for now, let's do it by hand. I can move the little back button in here, aligning with the grid with my image. I could choose whether I want this image here to go to the edge or whether I want this to sit in the grid. If you position images on the grid, always make sure that you use the file columns. Don't do anything like positioning it in the middle of a column or something like this. For now I'm actually going to use the full width. Then I'm going to do the same with my text boxes. Let's just make sure that they sit nicely in the grid. You can hide or show the grid either by using the right hand side menu. If you hover over it, you see the social icon or you can use the shortcut control G. 19. BASICS - 12 Figma community and Plugins: The Figma community and plug ins in your account. So this can be in the Figma app, or in the browser you can find the Figma community. Note that this moves quite around a bit lately. Right now it's down here on the left. And also, if you click on your name, you can click on your community profile. In the community, you could also share your own resources, but in the beginning you probably want to check out others resources. Click on the Community button up here again. Then you can simply type whatever you're looking. If you're looking for, let's say icons, then you would get an overview of community files that you can use with some icons in there. If you click on that, let's just take the first one, then just click open in Figma. And it's going to open in your Figma account, and you can store it there. By the way, you can also search for names, search for learning, or my name Christine Valor, and you can follow me as well. You can see all the free community files that I added here. You can simply click on them and then you can get a copy to work with in your account in the community. You can also find plug ins, let's say you want a plug in around color. Then you can have a look simply search color. And then on the left hand side, make sure that you pick the plug in tab. You can now browse whatever you're after. Now in here you can check out those plug ins and you get a description and you also get a rating. You can see how many people already downloaded it, but you can't use it right in here. You could click on Try it Out, but it's actually much better. If you access the plug in right from your Figma file, in my design file at the top, you can find resources in your toolbar. Click on that. And then make sure that you don't stay in the first step, but click on the second one here called Plug Ins. Now you can simply search the plug in. You're after I want to use this plug in here called HTML to design. If you found the plug in, then click on it and it's going to run all plug ins operate a bit in their own way. I'm going to give you the information on how in this little box here, HD mail to design is one of my favorite ones. Simply add a real life URL. You can also choose the size that you wanted to be displayed. Click Import, and it's going to generate the real website as a Figma version for you. You can jump in, select elements. For example, here our text. You can alter it, you can play with it. It's also going to have created things like these cards here for you, so you can drag them out and you could alter or redesign them. 20. BASICS - 13 Adding images: Adding images to your designs. There are different ways to add images to your designs. You could use a film menu. You could copy existing images. You could bulk import images, or you could use a plug in. Let's run through all of these options bit by bit. The first option is to simply add an image via the film menu, select your frame or shape, and then jump into fil and then switch over to image. You can now get the option to choose an image and you can simply select that image from your file. However, this is a little slow. We could also bulk select those images. Hit Shift command or on Windows Control and K, you can now select multiple images at once. You'll see on your cursor a preview of the next image to place and the number of how many images you have stored. You could add it directly on the canvas or you can click into any shape to place the image. You might also have the situation that you already have images in your design file that you want to re use now. You don't need to export and import them, you can use them right from here. Simply select the image, Hit shift command and C and it is going to copy a PNG. You can simply paste this by pressing command or control and to place it into any other shape. Our last option, and actually my favorite one, is to use a plug in. Go to resources and search for the unsplash plug in. Run the plug in. Now you can search any image of your liking. I'm going to use one of the preset categories portraits. Now all of these images are high resolution and royalty free. You can really use them for your designs. Simply select any shape, then select the image that you're after, it will fill the shape with your image. For our design, we could just run the unsplash plug in and then just select the place where we plan for the image. For now, let's just go for a nature image. We could select this, this would fill here. Now let's say we close the unsplash plug in, but we want to use this over here as well. Then we could use our shortcut shift command. And that would copy a PNG select and just place it in here. If you want to change the selection of the image, then double click and you're going to get the image menu here in the dropdown which is set to fill choose crop. You can now move the image around and also if you get close to the edges, you can also change the size. If you hold shift, then it's gone to scale proportionally. 21. BASICS - 15 Duplicating methods: In Figma you want to be copy and pasting quite a bit. It's a good idea to understand the different ways that you can duplicate. You can paste in the same position, multi paste, paste here, paste to replace or duplicate. Let's start with paste and same position here. By we simply copy an element placed on a frame in a certain position and then select a new frame and paste it there. Let's select our header. Press command or control and copy, select a new frame. If we simply now paste it with command control and V, it's going to paste in the exact same location. We could also do that with multiple elements, so we can choose more than just one. Select a frame and it's going to paste in exactly the same place. Really handy. The great thing is that this also works for multi paste. So we can do exactly the same and just select several frames. Let's say we want our header and our button down here to be placed on every frame in the same position, and we simply copy them. We select all the frames we paste, and they're going to be in exactly the same spot, if we want a different location. We can also use Paste here. We copy it as well. But then we right click and select Paste here from our menu. Let's select our circle again. I copied it, and now I'm going to select where I want to place it. I'm going to click Paste here, and it's going to be placed right in that position. Another really handy one that used quite a bit is Paste to replace. Again, you just copy the element like before. Then you press shift command R or you can also use right click and you can paste to replace an existing object. I'm going to select the square here and I'm going to press Command or Control. And C to copy it. I can now select any other element and simply hit Shift command or Control R and it's going to be replaced. You can also select multiple elements and replace them all at once. The last one I want to show you is duplicate. You're going to see me using this all the time. To duplicate, simply select an element, press Alt and drag out a copy. If you hold shift pressed additionally, then you're going to copy it out in the same line. Once you made one copy, you can simply hit Command and D and it's going to make multiple copies with the same distance. Let's try that out. I can select this frame, press Alt, and I can now just pull out an identical copy where you can see this moves freely. If I do the same, but keep the shift key pressed as well, then I'm going to copy in exactly the same line. Once I made one duplicate, I can now hit Command or control and D, and it's going to make more copies in exactly the same distance. If we select all of them. Let's hit shift and two to have them all positioned in the center. You can see on the right hand side and the properties panel, I can adjust to the gaps between them. This is because they're all with the same distance, they're tidied up and therefore you can adjust them and you can also switch them around using the little bubbles. 22. BASICS - 16 Drawing in Figma: You can also use Figma for illustration and drawing. Figma is a vector based program. If you worked with something like Illustrator before, this will be very familiar to you. It's important to note that Figma is primarily made for UI design set up. It's not really about illustration, but you can get some pretty nice results if you want to set up things like icons, for example. You could use simply your shapes here for illustrating. If I draw a shape and if I double click on that shape, then notice how I'm getting a different menu. You can click on it, and therefore you're going to get these new tools. You're going to get these curves and things like that. Now you probably want to set up your own illustration, and therefore it would make more sense to go for your pencil or your pen tool. If you're experience with illustration and have things like a track pad and pens at home, then you might want to go for the pencil here. Can draw freely. However, if you're working with a mouse in a more standard set up, then you probably want to go for the pen tool. The pen tool is something you're going to be really used to if you worked with illustration software before. Simply add a first spot on our canvas and then you get a line. If you hold shift, then you get a straight line. Let's do that here. Therefore, you can then draw any kin or any illustration element that you would need. Now if you jump out of this menu, you could still get those points again by double clicking and you can adjust them. You can also get the bassia curves. Let's double click to go back into our illustration. If you click on here, you could then get the curves and you can manipulate them further. 23. BASICS - 17 Scaling in Figma: Scaling in Figma. The scaling tool in Figma gets overlooked quite a bit, but comes in very handy at times. Here I have a vector illustration, and you can see that this is made up out of different shapes. These shapes have a stroke that has a different weight, Sometimes it's 28, and so on. Now if I want to enlarge that, what I could do is go to the edge until you see the little roche appear. And then hold shift down to keep the proportions. And now I can change the size. However, with the strokes, it doesn't work properly, doesn't give me the right proportions. A much better way to do this would be to use a scale tool. To activate the scale tool, select any image, and then in the top tool bar, you can see under move there is the scale tool or you can simply use the short cut K. Let's hit. You can see right now it looks like nothing happened, but it's just activated up here. But as soon as you select any element, you can see on the right hand side in the properties panel, the little scale tool appear. Now I could scale this up. I, it either scale it directly on the canvas. Notice how the error looks a little bit different. I could also use this one here. So I could say, I want this to be two times the original size. We could also scale this down again, or 0.5 Notice I can change the scale directions. I see scale from here, or you can simply add a certain width or height. I would want this to have really, really handy tool. By the way, sometimes you get stuck in it, so make sure that you close it. If you feel that you're like trapped and can't find your tools, then it's because you're still in the Scale tools. Or simply press X and you're back at your standard menu. 24. PROJECT: Get the file!: Please make sure that you download the exercise file for every section that we're going to be working on, like basics, components, variables, and so on. You're going to see everything that I showcase on the screen, in this file. And this allows you to really jump in and follow along what I'm going to showcase on the screen and try it all out yourself. You also find a little description here on the side if you rather want to go through this on your own and you also find a solution with everything we're working on, you can click through it and see how I set this up. I recommend that you first watch the short video sequence and then jump into the exercise file. Try out yourself if you feel it's necessary. At the end of each section, you're also going to find a prompt to jump into the project file. Please note that the project is absolutely optional, there's no extra information. It's simply an additional step if you want to dive a little deeper and try out your newly learned skills. 25. PROJECT: Introduction: Let me tell you a little bit about our course project. In the course project that spans across the entire course, we'll be working on a podcast app design, as well as a working prototype for it. At the end of each chapter in your Figma working file, you find a prompt and a link to jump into the course project. The course project is in addition to the general course. That means that it's absolutely optional. You're not going to lose out on any information if you just run through the general classes. But let me tell you a little more before you decide. When you open the course project file on the left hand side, you're going to see pages. On the first page, we have our exercises. You can see for each section of the course, we have one exercise. These exercises build upon each other and come with instructions. Make sure that you first run through the general lessons of, for example, the basics of Figma or components. And once you feel ready, jump back into the course project file and carry on with the next steps. Don't rush ahead, because it's just going to confuse you. Each of the steps comes with a suggested solution. Note that there is no such thing as a final solution in design. It's really just a suggestion. You might come up with something completely different that's just as good. But also feel free to just grab my solution and carry on from there. If you ever get stuck in the left hand side on the pages, you find the final design. This is really the polished and finished version. You also find a page for component and guides. Don't worry, you're going to learn about all of this during the course. Now let's jump back to exercises and have a look at our first part, which is the Figma basics. I try to keep those files up to date. Yours might be looking slightly different. All of the important information will be there. No worries. 26. PROJECT Part 1.1: Wireframe: In this first part here, we're prompted to build a wireframe. And you can see there is a picture of what it should look like and you get some instructions. You can really just build this in your own time as well. On the right hand side over here, you find my suggested solution. This is really a wire frame that you can click through and see exactly in the layers panel, how I set this up. You don't have to build it exactly like this, but if you ever get stuck, then just have a look or things like this. Progress bar here, that might be a little tricky to start with. Just copy it over. It's absolutely fine. The idea of these exercises is that you really jump in yourself and figure it out. But to get started with, let me guide you a little bit. I'm going to copy this first one here. And I'm going to bring it over and place it next to my wire frames that I'm going to work on. Here we go, I'm going to just place this right next to it. Let's get these ones here out of the way. Let's put this here. This might look quite complicated and a little overwhelming, but it's actually just shapes and text. This is all we did during our basic session. I'm going to start like this. I'm going to press R and I'm going to draw this background shape. Keep shift pressed so you get an even shape. This is my background picture here in the back. And I'm going to do the same again. I press R again, I'm going to create a smaller shape here. I don't want them to be the same color. You can simply click on any gray from here. You might have something saved down here. It doesn't matter which colors you use. You can also use the color picker. So you could also use the color that I am using in my example. But it's really irrelevant for wire frame. Now I'm going to add the text. So I choose my text tool from the toolbar and I'm simply going to click to where I want to place it and start typing podcast name. I'm going to duplicate this again. We did all of these in the lessons. If you don't remember how to duplicate, jump back to the lessons. It's shift and alter option. And this way I can duplicate right below in the same row. I'm going to place this here and I'm going to call this by artist. I can now select it. And then in the right hand size in the properties panel for text, I could, for example, change this to medium and also change the text size. For example, 216. If I select the text, I can also change the fill to black. This button here or this label. You can see it is simply a frame with a text inside. I'm going to hit and I'm going to draw a nested frame. Click on the plus button next to Phil, if it doesn't come with a pill. I'm now going to round the corners. I'm simply going to copy the text from a peer. Click on the frame, paste it in size and change it. Simply drag and position it. And you can see in the Layers panel that if you select the frame, anything you drag on it is automatically placed in size if you want a little shadow for the button and you can simply click on the plus next to Effects in the right inside Properties panel. And it's going to add that. Now in my example, you can see that this is all on one frame. This is all grouped together. I'm going to do the same for my new example here. I'm going to select all of these elements. Now I'm going to press Command and G. This will group it actually for wire frames. This is quite or right. I can now call this group hero. But you might want to already start thinking in frames as we know, this is Igms superpower. What you can do to convert this quickly into a frame? Jump to the right hand side properties panel and instead of group, just use a frame. You can also select elements and right click. And then you can see here frame selection and a shortcut to you could also do this in one go or simply draw another frame around it, best if you pause the video and then try this out yourself. Now I want this headline here recently played, and we can see that this is 24 and medium. So what I'm going to do is I'm going to copy this one here over Oh, and by the way, I didn't switch on my grids. Let's do this. Let's select this pair and frame. And then on the right hand side, I can see there's no grid applies, but I already created a grid style for you. Click on the little dots for Styles and just add the mobile grid. So now you can see it. I can also align my images. Now let's get this old. And this where you get the nice distance so you can measure to it. I'm going to place this headline here and I'm going to call it recently plate. I'm going to select it and I'm going to change it to medium. I want to create these little cards here. For this card, I'm actually just going to copy the one I already have. It looks like they're pretty much the same size. I'm going to drag down this name because this seems to be, this is 16. How much is this also? 16. Okay, great. So I'm just going to change it into podcast name now. I'm already going to select both of them. This time I'm going to right click and I'm going to say frame selection. It's the same if you group it and then change it via the drop down here, or you can simply draw a frame around it. It doesn't matter. What you're going to end up with is this frame. And inside this frame you have your image. You can of course, rename those and you have the podcast name. Let's call this one here card. Now we simply want to duplicate it. Let's drag out some copies. And I always keep old pressed so I can see the distances. And I'm going to select this whole group here. Let me see. Actually, yeah, these are single ones in that one. And I'm just going to copy that whole group and place it down here. And I'm also going to copy my headline. And I'm going to call this, you might like if you paused the video here again and try this out by yourself. As I said before, you might not even need the video. Maybe it's easier for you to simply have this reference and build from there. Okay, the last thing we need now is this bar down here, the tap bar. I'm going to hit F, and I'm going to draw a frame for this. Let's give this a background color. Let's click on Plus. And I'm actually just going to pick the color from my example over here. Now what I could do is I could simply add these elements. But as you can see in the tab bar here, I already set them up into subcategories, so this is going to make it easier later on when we want to add responsiveness and things like that. You don't need to do it like this, but I'm going to show you how to already set it up in those three sections. The easiest thing is to just copy your tab bar and then remember our fields up here, they can do calculations. What I'm going to do is I'm going to add divided by three. In this way I'm getting the exact amount for one of my icons that I later want to place here. Now I'm simply going to get some texts. This text here is actually much smaller. This is only 12. I'm going to change this to 12. I'm going to place this inside of here. Then I'm simply going to hit and draw a circle. So this is just a placeholder for an icon that's later going to be there. Let's get a little closer. We can use our alignment tool. Oops, actually that's not the one I wanted, but well, let's place this. Give it some more space. Now, let's call this link, or icon, or whatever you want to call this. Let's now place it inside again. I can now simply duplicate it this way. I'm getting three of these links that have exactly the right size. I'm going to call this one home. Notice this is like on the left. What I want to do, I want to jump back. I'm going to place this in the center. Let's change the alignment of the text to center. And I'm going to call this home. Actually, I'm going to give it all the space that I have available because I might have some other wording later on here so I can make sure that this has enough space. Then let's call this one. Let's call this one saved. That's it. We have our first set up of our first screen. Let's go for the second one. Well, let's actually double click this one and call it home. Now let's bring our second one over. Let's just copy this and paste it right here. What I'm going to do here, like this, is pretty much the same. I'm going to copy this over. I'm just going to get rid of these elements. I don't need them. I have this little back button. I'm just going to copy over some text. Let me This is right, Where is it back then? I have the playlist name and the podcast name here as well. I'm just going to add my layout grid again, and I'm actually just going to copy this over, place it in the middle. And I'm just going to drag it to the edges. I'll make sure if I have a longer name that there is enough space. I'm going to select it and center the text. Then I have some copy text. I'm going to be lazy here and I'm just going to grab this and place it here because I know it's just copy text. And then I have to read more. So let me make this read more. I select it and then if you want it underlined, go into little three dots in your type settings, and here you can find the underline text. If you double click, then it's just going to change from the four width to alter width if you want that, because this is a bit like a button actually. Okay, great. Now I just need to add the episodes. I'm just going to copy a square of the ones I already have over here. I'm going to make it a little smaller. As you see it doesn't have to sit in the grid because this is like an own element. Then I'm going to copy this one. I'm going to place it back to the left. Let's actually see how big this one is. It's very small, it's ten. You can either type all capitals or what. You can also do, again, jump into these extra settings and you can change it to capital letters. Then I'm going to copy this one here and place it in here. Now this one I'm going to do the same. Let me change the settings of the text so it's all on the left. And I'm going to place this below. Actually, let's have a nice distance of eight also. I'm going to copy this again. You can see here I left some more space because something might be actually longer. What I did here is I can see this is auto, this is a line height of 24. If you click on it, then you can see it. I'm going to give a size. Let me just drag this open. I'm going to give this two lines fit in near 48. If this is a little too advanced, don't worry. Just drag it open so it fits your needs. Now this is at the bottom. I don't want this. I'm going to change the direction here to set it to the top. Now I can line it a little better. Actually, let's have a look at what they have here. They have auto and 48, probably just need to get rid of this. Okay, Now I just need this little play button here. This is a rectangle. Let's go to our shapes. In our shapes, we choose a polygon. Let's draw one. And that's it. Now this obviously belongs together, so I'm going to select all of this. Actually, I'm group it this time because I want this, as you can see here, to go across the whole width. I'm going to actually hit and I'm going to draw a frame around it. Now this is an on frame, what is called episode, let's call it episode as well. Great. Now we can simply duplicate this. Note how I want some more episodes, like going down here. This is going to go for the visible area. Remember if we select a parent frame and unclip, then we can see everything that's below. So you can also do this in my example, and you can see that actually they only have two here. But yeah, everything that is larger than your frame would become visible. Very important to always remember. This last thing I need is my little bar down here. Let's simply copy this. Select the frame, and as we know it is going to paste it right in place. Great, so we're done with the second one. Okay, great. Now we only need our last one. Let's have a look. Our last one is the episode noted that this is placed on an own frame and then we simply have a square. We have text, this play bar here. It's simply a frame with another shape inside. If this is too complicated, then just copy the one that I made here. And here we have text again. Here you can see this is simply a frame with rounded corners and a little bit of a stroke. And then I placed my triangle that I created inside of here. So have a look if you can figure this out for yourself with the given solution. 27. PROJECT Part 1.2: Design Idea: As a second part of our basics, we want to bring this wire frame alive and add some images and colors. I provided you with the material. So here you have all the images. Here you also have some icons. And I'm using a gradient. You can use this. I'm going to show you in a second how, but you don't have to. You can of course also use the unsplushed black in or any other images of your liking. Okay, let's jump over here. What I'm going to do is I'm going to copy my wire frame. You can either use the solution you worked on or you can use the one I provided you with. What I'm going to do is I'm going to copy this next to my solution again. So this makes it a little easier for me to grab everything. I actually don't need the grids, so let's switch them off. I'm just going to go bit by bit. I'm going to start with my hero section here and let's actually get our images a little closer as well. And this little gradient here I'm going to use in the second. Okay, great. So I'm going to start with the first image. I'm going to grab this, I'm going to hold shift command and see this copy is a PNG. If you're still a little unsure of how to use images, then please chimp back to the video where we find the different options of how to use images. Either copy an existing image, you can also select any frame or shape. Click on Fill, then on Image, and choose an image. Or you can of course, use the unsplash plug in which we had a look at during the sessions. I'm going to copy this again, shift command, and this is my favorite option. And then I'm simply going to press command V and copy it in here. And I'm going to do this with this little one here as well. Now you can see that I want to more contrast. This is why I created this overlay here. Actually, I think in my example, it's a nicer overlay because it spans the whole size of the image. I'm going to copy that. I'm going to place it on the image here. Now I just need to go to my layers panel and I have the image background. I have this, okay, that's looking good. And I have all this on top. So I'm going to select the text. I'm just going to change this to white. That looks nice. Don't worry too much about gradients. We use them, not too much the new eye design, but if you want to have a look, then simply click on the gradient I created. And you can see that simply instead of image, you can also create gradients here. You could change the colors as well. I'm going to put my tab bar to the side and I'm going to add the rest of my images and I'm going to simply copy all of them with my nice little shortcuts. Then I want to change the background color. I'm already going to grab my text. Let me just unclip this so I grab all the text. If you hold down shift and commands on Windows control, then you can select multiple texts and deep selected. Because this is nested, let's select all of this. If not just selected one by one, same result. And I'm going to go for some white here and I'm going to do the same for the headlines. Okay, great. So now I'm going to change my background color. I'm doing this via the fill of the parent frame. Again, I'm just going to pick it from my example up here. Let's clip it again. That looks pretty good. And that's much easier than you thought, isn't it? I just need to sort out my tap bar down here. I added some icons for you. Let me have a look. The icons that we're going to lead is the house, the search, and the heart. I'm already going to copy that play button. Let's place this over here. Now let's first of all set up our navigation. This looks all fine. I'm first of all going to change the color, the background color. I'm going to also pick from my example here, Then I'm going to select all the texts and I'm going to change that to a white. I'm going to get rid of these little dots I had here. Again, always hold shift and command or control. In this way you can deep select multiple items or just go one by one if this is still too fast. Now I'm going to add little home here. I'm going to replace this with my search. And I'm going to put my button in here, great. Now I just need to select this one, because I also want this fill color to look like in my example. Okay, great, so now I can add it back in here Again, I'm simply going to copy it. And I can already paste it on here. Now let's just do the same for this one. I'm going to grab this image, paste it inside of here. I'm going to get rid of this back, and I'm going to use another icon I was provided with. I have back and down. Let's copy them as well. Let's bring them over here. And I'm going to place this on here. Actually, let's have a look in the example because you can see that I already placed this on a frame spanning the whole width is just going to make it much easier later on to handle it. I'm just going to have this invisible frame around it. Okay, great. Now I'm going to leave as it is. I'm just going to drag this out for now. I'm going to select my text. All of it have this white now, I can change the background fill again. I'm going through this quite fast. It's really just a reference for you, Take your own time, take the suggested solution and really try to figure this out in your own time. Now, I want to work on my episodes here. I have a play button that comes with the suggested icons. I'm just going to give this a background color as well, just so I can see it and handle it a little better. For now, I'm going to get rid of this triangle and I'm going to use my Play button. You can already position it nicely, don't need to. And then select the text. Then let's change the fill to white. This one here as well. Make sure we have all of it. I'm actually going to leave this as it is because then I can fill it in. I'm just going to put that aside for a moment. No place that back in here. I can now simply grab that image. I can place it into my shapes. Notice as soon as you see the frame name, then it's jumped outside of this frame. What you can do if you want to add one more but it keeps on jumping out, then simply select it. Just make a copy, just really, really slightly below. And then use it with the keys of your keyboard, this way it stays inside. Or simply reorganize it in your layers panel. Okay, now we can select the parent frame. Let's clip it again. We can place our bar back here. The easiest way is actually just to copy one that's already placed on top and paste it back here. Let me just tidy this one here up, place that nicely. We could also organize a little bit those distances we have here. Now let's go for the last one, which is our overlay. I'm going to grab the background color from here. Now notice this one is an own frame. Let's call this overlay. This holds all the information because later on, if we click on a song, this is going to just like slide in over here basically, and sit like this. For this overlay, I have a slightly, slightly lighter color. I'm going to just pick that from my example as well. Let's get rid of this one here. We're going to do the same as we did here. We have a little down button that we're going to grab. I'm already going to place a frame around it. Actually, that was a rectangle. Let's press again. We need a frame, not a rectangle. Now we can place this around and now you can see that this is placed inside nicely for the image here. I'm going to simply copy my image either from any existing design or down here from my samples. Now I can select my text, make this white here. I'm actually going to just use my Play button. I'm going to place this over here. Remember how we can scale? Do you remember it exactly? We need to press K, the Scale button. And now I can either add any value or I could scale it up. What I'm going to do is I'm going to have to twice the size or something like that. Okay, great. Last bit is here, my text. Always make sure that you jump out of the scale tool again. And now you can see your general properties panel. So we're going to change the color for this. Now I'm going to grab this little barn here. Again, if you want to deep select, press command or control. And I am now simply going to select my high light color. Let's see if this gray also, I think it's slightly lighter. Somehow, I lost my little circle. I'm just going to grab this from my example. You can also destroy a circle again, and I'm going to place this in here. Now if this is placed like this, if you ever have something like this, then this is because this frame has clipped content. So you could just unclip it. I just gave it a little more space so that my little bubble here fits perfectly. As you can see, just by using general shapes frames, filling in some images and playing with the color, we build a pretty impressive UI design. And by the way, don't get frustrated if it's not as fast as what I showed you in this video. I've been doing this for quite a while. Plus I'm recording this so I can stop and cut out pieces. And this is simply a video to help you in real life. This is simply going to take longer. So sit down, take your time and play with it. 28. COMPONENTS - 01 Re use elements with components and instances: Let's get to know one of Figma's most important features components. Once you start designing, you're going to notice that you're going to design the same elements over and over again. So things like my navigation and my cards. And by the way, remember to unclip your parent frame in order to see all the content. Now, instead of redoing those elements and trying to keep up with any changes, it's much more handy to have some template, which in Figma we call a component. From that component, you can make copies. In Figma, we call that an instance which you can use across your design. Let's set this up. I'm going to pull out this navigation here because I want to get right away into the habit of having my components separate from my design. In order to turn the navigation into component, simply select it. And then in the top tool bar hit the component button. Note how this is going to result in a purple outline and a component sign attached to the name. You can see the same change in the layers panel. Other ways to create a component would be the shortcut Alt or option command K. Or simply right click and choose Create component. Now we want to use an instance, a copy of this component in our design. There are also several ways we could do that. You can create an instance simply by copy and pasting it, or which is a little faster, hold old pressed, and then simply pull out a copy, which you can then place inside of your design. Note how the instance also has a purple outline, but it has an empty diamond shape. Other ways to create an instance is to jump to the Assets panel. This is right next to your Layers panel, and he'll see any component that you created in that file or later on which you connected with an external library, You can simply pull out that component and then place it onto your design. Let's get rid of our navigation from the articles page and then replace it with our instance as well. Besides the assets panel, you can also jump to resources and then simply look for your components via their name. Let's do the same for our card this time. I want to use a shortcut. If you ever forget about a shortcut, simply hover over the component symbol. And then it's going to show you here in my case, this is option command K. Now let's jump to the Assets panel where I can see my card was saved as a component and I can place it into my design. I also want to replace the other cards, so let's get rid of it. And by the way, I can also just copy right from an existing instance. If you hold Shift, press Alt, then you'll copy right below in the same line. However, it also copies over the content from my component. What I'll do is I usually have my component quite neutral. So I would get rid of this image here. And let's replace it by clicking on Plus with just a neutral fill. And then my headline. I'm also just going to call headline. I generally try to have all my components quite neutral and I will then fill in the information, the content in my design. Let's find out how to do that. 29. COMPONENTS - 02 Overriding instances: Let's learn what and how to overwrite in our instances. Here we have a bunch of components and we use instances of those components in our design. You can see this by having a look at the layers panel and you can see the empty diamond shape if you ever want to see the original component. Then in the right hand side, right next to the instance name, you can simply click on the component sign and it will jump to the original component you used to set up this instance. I usually leave my components quite neutral and descriptive. But in my design, I obviously want to add some content. So I want to change those gray backgrounds into images and I want to add headline for my headline. I could just double click and then overwrite this. I can do the same for my images. I could simply go to fill and then change into image and import them. Or I can use my shortcut with this shift command and K and I'm going to bulk import those images. I can now simply drop them into the shapes I want, the cloud here as well. I'm going to select that with my shortcut shift command. And C, which will copy a PNG and I can now simply paste it into the shape here. However, there might be some elements that you actually don't want to be overwritten. For example, this back button here, I always want this to be called back. I can simply select my component and then select the text that I want to stay fixed in my layers panel. If I hover over this, I can see this little lock and then lock this layer. Right now in the design, nobody would be able to click and change this text. Now the great thing with setting up your design with components and instances is that even if you were overwriting this, you could still design in your components. For example, here we might want to change the setting a little bit. We might want to increase the size of this text. And you can see that all instances will follow. Also some more dramatic layout changes. Let's say we want to move our menu to the left, so all instances would follow two small comments. You might be wondering why is this component here, this back component, set up over the whole width? So why does it span the whole width and has all the space around it? You don't have to do it like this. You could also just take the text and turn that into component and that's your button. I quite like it like this in this way. I already know that this is the distance. I just have to put it right below navigation. And I don't need to worry about the distance between the image being the same if I create more pages. But feel free to find your own way on how to set this up for your design. The other thing you might be wondering is what about the text? Doesn't this have to be a component as well? Well, you could set up text like for example here where it makes sense, where the text is a link. Or this might be a intro, where you might add more details, maybe icons or something like this. You might have a set composition and turn this into a component, but just copy text. Just standard text on your design, like this, does not need to be a component at all. 30. COMPONENTS - 03 What to override and what not to: What you can overwrite and what you should override. Now, Figma gives you a lot of options to overwrite. You can overwrite colors, images, text styles, opacity effects like shadows and blurs visibility. But just because you theoretically can overwrite, I don't recommend overriding all of these. I generally recommend to only overwrite text and images, so anything that would come from a database, if you want other changes like a background color, then this will be a new version of that component. I would set up another component for this. You can later combine those versions into component set with variants. We're going to cover this at a later point of the course. 31. COMPONENTS - 04 Reverting components and overrides: Reversing components and overrides. Here we have a component and an instance. Now, in my instance, I overwrote a lot of stuff. Like I added an outline background images and text. But I notice I actually don't want that. How can I revert back? Select the instance. And then on the top right, you can see in the properties panel the instance name. Then click on the three little dots in the drop down. You can choose whether you want to reset just single properties. For example, the stroke. I could also reset the fill, or I could reset all changes at once. In this drop down menu, you also find the option to detach the instance. Now be very careful with this one. If you're designing with instances, then please do not detach it because there will be no reference later on as programmers will have a look at your components to set up your design. If you're, however, still playing with your design, then you can detach. And then you can further alter the layout and maybe even create a new component from this. But what if you only have a component and you created this by accident? There is no way in the properties panel to just go back to its original state. What you can do is just pull out an instance of that component. You can now delete this component. Notice how if you have an instance and you deleted the original component, you could always restore that in the Properties panel. However, that's not what we're after right now. Let's get rid of it again. What we now want to do is to just detach that instance. Now you would be back at the original stage. You can carry on working on that component, and once you're ready, turn it back into a component. 32. COMPONENTS - 05 Nesting components: The great thing about components in Figma is that you can also nest them. Nesting means that we can have two components and then create an instance of one component and place it into another component. Let's take this example. Here I have a navigation, a sign in form, and just some standard card. I'm going to turn those three items into components. I can now drag out instances and use them for my design. Just going to use this navigation here and this card as an example. But notice how I'm re using the same button in all components. It'll be good practice to take the button out and create an own component for the button. I will now delete the previous single buttons I was using and replace them with an instance of my button component that I just made. I can now overwrite the text join up here in the navigation, sign in and subscribe for my workshop card. As you can see, this is all reflected on the right hand side in my design. Now let's change our main button component a little bit. Let's add some radius and change the color. As you can see, any change to the main component will be reflected across the entire design. It doesn't matter if it's nested in a component or if it's an instance of a nested component. 33. COMPONENTS - 06 Component sets with variants: Figma variants. Sometimes you might find that you need variations of a component. Here I have an example where I have a default version of a card and a hover version of a card. The only difference here is that this has a background color. You might say, well, I could simply add that background color in my instance and overwrite it. Please get into the habit of not overwriting layout changes or changes in the variation. We only want to overwrite content changes like images or text. This is a new variation of this card, therefore it needs to be its own component so that later developers see that this is what they need to program and plan for. Now in theory, you could use it just like this and have two separate components, but there is a night layer of extra organization Figma called a Component Set with Variants. This allows you to group together different versions of the same component. Note how I'm using the forward slash naming convention. They're already called the same, they're called card forward default. And then card forward slash hover. The first thing here would be the component name, and then the second name after the forward slash, That would be the property. If I select both of these cards. Now I can see in the right hand side components combine as variants. If I click on this, then you will see that Figma creates this purple dotted outline. Now the great thing about this is you can now simply pull out an instance, or you could just use the Assets panel, as well as with any other component. It will show you the first variant if you click on this instance. Then in the right and Size Property panel, you can see a little dropdown. With this dropdown, you can now switch between the different variants in your component set. Now this is simply called property one. Now you can also click on your component set and then double click the property. Now you can call it for example, state, you could add more variations. Let's say that you want something like a deactivated state. Just open this up a little bit and then jump here to your first, or also your second variant. And you'll see this little plus sign down here. Click on it and it's going to create another one for you. Now what we can do is I'm simply going to give this 50% capacity and I'm going to call this inactive. Now what I need to do is I need to name the state. It's automatically, just call it state three, but I'm going to change this to inactive. Now if I select my instance, you can see that in the drop down, I can now choose between the new state and the two states I created before. By the way, if you have not turned your elements into components yet, there's also a shortcut, You can select multiple elements. And then you get a little drop down next to the component, sign in your top bar. Use that drop down and select Create component set. This is going to create the component set right away. Now, I did not use the correct naming convention with the forward slash. I can also do that right now. So I can name this one card, then I go inside. And then here I have my property one, and I want to call this default. I want to have my second one called Hover. I can click on my component set again to change this to state. Now if I get an instance, you can see that this works just as before and has my Hova and Default state embedded. 34. COMPONENTS - 07 Move components to their own page: How can we move our components to their own page? Here I have my components, and I use instances of those components in my design over here. It's okay to store your component right next to your design while you're still working on your designs. But once you're done and you know how you want to set up your components, it's time to clean up a little bit and find an own designated area for your components. There are more advanced techniques and you could store your components in external libraries, but in a small project, for now, we want to just store them on their own page. Go to the top left of your file and click on the plus button. This is going to open a new page. You can call this page Components. We can jump back to our original page, which we can also call design. Now, now if we would simply copy this component, jump to the component page and paste it, then this would obviously paste an instance. We don't want that. How can we move it from the design page to the components page? What you need to do is you can either use the right click, then here you can see move to page, and then this is going to show you the page you just created. Or a better technique is actually to use command and x. This is going to cut the component. Now you can jump to the component page. You can paste the component here. Now if we jump back to our design page, we can see that if we click on this instance here and then click on our component sign next to the instance name. It's going to bring us to the main component and it's going to jump to the new page. Great, let's do that for the rest of the components as well. Let's select all of them. Command an X to cut them and then paste them inside of our component page. If we jump back to design, you can see that all connections are intact. By the way, sometimes you see that people add little icons in front of the name. You can simply add them by either pressing control command and space bar. Then here you can find different icons. Here are some that I use before for design. I'd like to use something like this rainbow for my components. Actually, if you dig quite deep inside of your emoticons, I think around here you find a component sign or actually something that looks like a component sign and look quite like using this one. 35. COMPONENTS - 08 Keeping components organised: Keeping components organized. Let's say you're working on your design and you created a separate page for your components. Now you have all your components over here, but right now, they are in a bit of a mess. Let's make sure that we, ourselves, other designers and developers that would enter our file, understand what's going on. Let's first of all cluster them a little bit. Over here I have my general icons, then I have my card. Then over here I have my components that have to do with navigation. So you can see the head, the tap bar, nested elements, and these icons which are only the taped bar icons. Then further on I have my buttons. I want to create an own section for each of them. Note we're using sections and not frame to store our components on. You find sections in the top tool bar, right under frames, or you can use the shortcut shift and S. I can now simply draw a section around the clusters that I created. Just like with a frame, I can alter the background color and I can double click on the section name and I can now name it. And I'm going to name this one here, Navigation. Let's jump over to the assets panel and see what happened. I'm going to switch over to list format so this is easier to see. And you can see that all of my components are listed just at the top layer. And you can see that it's created a folder for my navigation items. I'm going to do this for the rest of my components as well. I'm going to hit Shift S, and I'm going to draw a section around my card. I'm going to do the same for my icons, a last one for my buttons. Let's tidy up the color a little bit. I can select all of them and I copy the color that I have for the first one as well. Now, have a look at my Assets panel over here. If I now rename this, I have I have I have buttons by creating these sections. You can see that in my Assets panel, I now have sub folders and it's much, much easier to find my components. Another thing I love about sections is that if you select the section name, you can see this little icon next to it. Or in your top tool bar that says ready for development. If you click on it, then you're going to see this green bubble appear. Now if we jump over to Def mode, this is where your developers would view your designs. Then you can see that this creates a old folder telling developments which of your components or designs are already ready for the next steps in development. Get in the habit of storing your components in their own designated area on sections which you can then mark as ready for development. To start with, we store our components on a separate page, but if you have a pro plan or above and you're working in a larger team, then you might also see that components are stored in a separate file and we're using the so called shared team libraries to work with them as our system is getting more and more advanced. You can also see that you can add more information to these sections. Don't get too stressed about it. Start small and organize on sections, and in any additional information you can always add to those sections. 36. COMPONENTS - 09 Advanced component features introduction: What we've covered until now with components are really the things which you will need in your everyday work. However, components can become much more advanced. I just want to give you a little glimpse and overview of how components can become even more powerful. Once you feel 100% comfortable with basic components and basic components sets and variants, you can move on and have a look at my advanced course, a deep dive for components. They'll find all the following subjects and much more in greater depth. But now let's get an overview when talking about variants, our variants as we set them up right now can become multidimensional. That means that you're basically using the same set up as we did, but you're adding more and more properties. The perfect example for this is always a button. You could have a component set where you have variants of a primary button as well as a secondary button. If we select the instance, you can see that I have the type of the button. So I can choose between primary and secondary, but I can also choose a different states. We can add yet an additional layer of organization to our components called Component Properties. Here is an example of a button where I apply to component properties. You can see that if we select the instance in the right inside properties panel, we can now do things like show what we want to switch on and off in that component. We could choose, for example, different icons, so we can swap in different instances. We could also edit the text. You might also see a mix so that we have component set with variants and component properties. An instance would look something like this, that you have an additional property where you can choose between the state given in our component set, then you can still use the properties to switch on and off different elements. Last comes one of my favorite ones, which is interactive components. That means that inside of a component set, if you jump to prototyping, which we have not explored yet, you can connect your different versions. We can then say, for example, while hovering, um, animate this button. And in our instances, we would now see this, that if we hover over them in our design, that we can see this micro interaction. But this is much more a prototyping topic. Besides that, there is a big topic about how to document and share your components. This is very important if you want to start working on a large scale design system. We're going to touch on some of these topics later on in the course. Before you jump into this more advanced topic, please make sure that you have your basics right. And we're also about to add some auto layout and responsive magic to our components in a minute. 37. PROJECT Part 2: Components: If you feel uncomfortable with components, instances, and variant, then we can now jump in. The second part of our course project, we want to turn the design that we created into a component based reusable design. You can either use whatever your solution is from the first part or you can simply copy my suggested solution from up here, which is what I did for you. How I go about is I go through my design and then simply pull out the elements that I think would make sense as reusable components. Now, there is no one right or wrong, it's up to you, and you can also change this, or in the future nest items differently. But we need to start somewhere. I'm going to show you how I approach this. I went bit by bit. For example, I started with my hero section, because I'm re using this image over here. I actually took this inner part out. I selected all of this. Let me actually get a little closer here. I select the image, the text and the button, and I hit command G or right click, and turn into a frame. I am now taking this apart, you can see down here, I just called this info. So this is what I created here. Then I did the same for the other elements. I took out the top bar, then the down bar for the overlay. So this is this here. I went through it bit by bit. So this image, then I have my cards, obviously my tap my elements here. This is actually up to you how you want to set this up here. For example, I use this as one component. You might also have this as one component. And loose text, as I said, there's no right and wrong. I just find it a little more comfortable as I'm probably going to be re, using this part quite a bit. And I decided to then do the same for the play bar. So all of this control area is one component. Again, later on you could have this as a nested component. This as a nested component, it's up to you, but let's keep it simple for now. Now, in this file, I have my final solution. If you go to pages, you see the final design and you also see a component page. So here you can see all the components, how I organize them, set them up, named them, and so on. And this is what I am using in my final design. So I suggest that you're not getting confused with my components to just copy all of this over to a new file. Let's actually select my examples as well as pull out potential components I created. And let's jump to a new design file and simply paste this here. I quite like to have my background a little lighter. And by the way, you can change this. If you click on the canvas, then you can see up here on the page, you can change the color. I just find that a little more comfortable. Now, you can have your own file with your components without getting confused with the same naming. I can either select each of those individually and then turn them into components, or I can select all of them. Click on a little drop down and create multiple components. Not component set, that's something else as we know now, but multiple components. Now some of these components I am nesting, for example, the icons, I just need to clean that up because this one is not going to know that you want it to be nested. I'm just going to pull an instance up here of this one, of this one. I'm now going to replace these elements here with the nested counterparts, keeping it all nice and clean. We would do that, and for all the icons, let me have a look, for example, for our play button here. We would also replace that with an instance, and we have the same one here. So you can see already we're like re using, which is really nice, if we would change anything in that Play button. This will be the same everywhere. This one could be a scaled play button still, or you could have this as an own component, Again, up to you. Okay, now we need to set up these designs, again with the components. Now that sounds tedious, but it's actually quite fast. So let's do that. Let's get rid of this, and I'm simply going to drag our cover over here and then our info. And then I'm going to do the same here. I'm going to delete dose, and I'm going to replace them with instances. What we need to do, of course, is we need to place our images again. Also, I'll probably do this a little tidier than I am working here. Keep my distances and everything, but do that just to show you quickly. Have it like this. We need our images. Let's go back here. And we can simply copy our images to this file. We have them at hand. Because what I would do anyways, I'll probably get rid of the images in my component. Also, be careful to always grab the image and not our little gradient overlay that we made. Now, we need to add a fill back. This is indeed a little tedious. We would need to place those images again. We would, in our components, have them nice and neutral. And then in our design, we'd have to redo our images. But like this, we can pretty quickly set up our design again as you'll see any changes obviously because now this is component based will just follow and it will be really easy to keep everything updated. Then let's just grab our tab bar as well. You can see just like this, I have now my same design as a component based design. I would do the same for my other pages to work. It's fine to have everything on one page, But remember, we do want our components to be stored away under pages. Make sure that you make an own page called components. You can now send your components over there, either by selecting all of them right clicking, and going to move to page and components. Or you can cut them, which is command and x not command and copy. It must be x. And you can now paste them on here, they will keep the connections. For example, if you're clicking on here, you can now click on the little component icon and it will jump to your main component on the page. Remember, we do want to store our components on sections. Sections are up here under frames. We want to create sections, for example, 14 icons, and then place all our icons up here, then one for navigation and so on. You can go to your exercise file in Components and Guides. Here you'll get an idea of how I organize my components. By the way, I am using a little file handling system I created. You don't have to use this, but you can use this. I have like headlines and I have little bubbles here. So I can toggle whether something is on or in the making. And I also have a little sticky nodes to add comments. Also, remember that we have components sets here. I now organized our components, we create it. And I have my back bar, my over liber bar, pretty similar, so I can combine them as variants. For example, if I use them in my design, then you can see here I'm having a little drop down to topple between them. You don't have to do that. But it's nice if you have similar items and want to organize them as we discussed in our previous sessions. In the end, our design is entirely made up out of instances except maybe some text here and there. And remember in instances we can overwrite, we were overriding older image fill, so adding older images. And we can also do the same with text. We can, for example, change the name of albums here if you want these little three dots here. If something is too long, then you can do this. Let's jump back to our components. You can do this by selecting the name, and then also go to the extras. And down here you find the text that cuts off with a little dots. Remember, any change in a component, let's for example, turn this one here around, will result in a change in the instance. 38. VARIABLES - 01 Introduction to variables: Introduction to variables. A variable is a symbolic name for a piece of data. It's like a placeholder. Let's say we have a variable x and we assign that to the color of red. We can then use it across our design. As soon as we change our variable x to the color of blue, we keep the variable name, but we change the variable value, then everything in our design would follow. We still use components. We have our components. But inside and around those components, there are a lot of things like spacings, different colors. We're going to use for all of this, we're going to use variables. In short, components are reusable objects. Variables are reusable properties that we can apply to those objects. Sounds all still a bit abstract. Don't worry, let's jump in and try it out ourselves and it will become much, much clearer. 39. VARIABLES - 02 Working with colour variables: Working with color variables In our design, we usually have a set palette of colors, and we want to make sure that everything in our design follows this palette. In my design here you can see that I am using red, but some of the tones of red are a little bit off. What I could do is I could now select all the different elements, use my color picker, and then jump in and pick the correct color. However, that will be quite tedious at some point. I might also want to change this red here to another color. This is also why I don't call my colors by their name. I don't call them orange, red, and blue. I give them semantic naming. So I can always change them. I call them primary for my brand colors. I give them a number. This allows me enough space to, for example, add another tone between 20 and the 50. I have some neutrals here. Also, I could add more tones of grade between the 30 and the 90. You can also name them. Anything else? For example, call to action or background. Just make sure that it's semantic. Now, in order to reuse these colors, let's set them up as variables which we can apply across our design and components. To open your variables, make sure that you click on the gray canvas area. And then on the right hand side you can see local variables. If you click on the icon, it will open a model. By the way, variables are relatively new feature, so you can see in my version they're still in beta. This look and feel might change quite a bit to create a variable, click on Create Variable and then choose Color. Now I'm simply going to call this 120. Now I can use my shortcut to create more. So I'm going to hold Shift and Enter, and I'm going to call this 150. I'm going to hit Shift and Enter again, and I'm going to go for 80. You could also use the drop down down here to create more variables. Now to add a value, simply click on this field here. And then choose a color picker. And pick your value from either the style sheet you set up or directly from your designs. Let's also create our neutrals. I'm going to have another one with 90, then I'm going to use my short cut again. And I'm going to go for 3,010.0 Now I'm doing the same. I'm simply going to pick them from the style sheet that I already set up. If you hover over your variable, then on the right hand side, you see the added variable sign. And you can click on this little icon here. And then you can add it more information. And you can also scope it. Scoping means that it will only be available for certain fields. Great, now we created our variables, now let's apply them. I could select any element and then via the film menu, click on the styles icon. This is still a little strange that we're using the styles icon to use variables. I would expect this to be changing in the future. For now, let's click on here to open our libraries. And here you find all the variables you set up. Notice that variables have a square and styles have a circle. We can click on this and this would apply the color variable. I could do this across all of my design, which again, would be quite tedious. Remember, we want to work with components and you can see that my design is set up in instances. Let's go back here, let's reset this fill, And let's jump to the components that I used to create this design. I place the design next to my component so you can see this better. Usually you would have this on an own page or even an external file. What we want to do now is we want to go through all our components and make sure that our viables are applied. Because you can also see some of them. Like for example, the harvestate of my button isn't even visible in my design yet. Still, I want to give the information about the correct variable. Here, let's just check because here we can see that currently nothing is applied. Now we could go through these components one by one. So I could select the background here, apply a variable, then I can select the text. But there's actually quite a nice way of doing this, just select all of this. And then you can see here the selection colors. Now I can see here, I even have an old style applied and I want to use my variables. I also have a mix of colors applied. So you can see I have different tones of red. I want to have all of this aligned with my variables. We're going to do is, for example, if we have an old style, then just detach this style. Now let's go bit by bit. This one is a white and then I'm going to go and select a variable for each of those colors. Because I am using the selection, this is the outline of my component set. I'm going to leave that one alone because I am using this selection. It's really going to get all the colors for me. Here we go, the last one, let's even out the red of our little bookmark. Now let's have a look at our design. As I select any element in my design, you can see that the variable was applied. This is this little square you can see in the color as well as in the name. As I run through here, even like down to the deepest nesting, you can see that everything is applied correctly. There might be some elements on my canvas here, for example, this text that is not a component. What you can do is you can also select this entire frame, and then you can see some which are left over and we can also clean them up. If at some point you want to edit your variables, then simply click on the canvas background, open local variables, and change your variable value. Your entire design will follow. 40. VARIABLES - 03 Organising with variable collections and groups: Organizing your variables, collection and grouping. He can see that I have all my variables, but on my style sheet I actually categorize them. So I have primary, I have secondary, and I have some neutrals. Now, instead of having them all in this like one row, I want to add a bit of order. And I can do that with grouping. To group your variables, simply select them and then hold Shift and right click. And now you get a menu and you can choose to group. You can see the group on the left. And you can double click it and then you can name it. I'm going to name this one primary. If I want to see all my variables again, then I just need to click on the top. Now I'm going to do the same for my blue. I'm going to call this one secondary. I go back so I can see everything. And I'm going to do it for my neutrals as well. So let's select them all. Shift and right click now, let's name them Neutrals. This is organizing my collection itself. But I can also have multiple collections. What does that mean? This is a collection that holds all of my color. On the top left, your variables model, you can see a little drop down if you click on that. First of all, let's rename this collection and let's call it Brand Colors. Now I want to add another collection. I'm going to click on Create Collection. In this collection, I want to save my sizing. It could be spacing. This could be size of certain cards or elements. I'm simply going to call this one size. I can now add more variables here, and I'm going to go for numbers instead of colors. This time I can, for example, set up my spacing system so I could say the smallest spacing which is eight, actually it's called this x. Then I can create another one, and I can call this, and that will be 16. I could also add numbers, which could be my card width. So I could call this card, for example, have a card, let's say at 320. What sort of collections, How many and in which way you need? Depends purely on your set up and project. Usually, you at least need a color collection. If you want to jump back to your color collection, then you can simply go to the drop down and go back to your brand colors and you can see and edit it here. 41. VARIABLES - 04 Size and spacing variables: Size variables. We can also work with size variables in Figma. To apply them, simply select an element. And then in the right hand side properties panel, if you hover over the fields, you'll see a variable symbol appear. Wherever you can apply them. We could add our variable for a width and also for things like radius. Now if you just apply those sizes to any design, you'll notice that this doesn't really work because the design doesn't respond. For this to work, you need to set up your components as auto layout components. This is something that we're going to do at a later point. As we start adding auto layout. You'll notice that this is where the magic of variables and sizing happens. Because now as we apply our sizes, the whole card will respond. Also, we can add all the padding and margins with our variables. That means as we set this padding and margin and then resize our components, everything will stay in place. But more about this in a bit. 42. STYLES - 05 And what about styles?: So what are styles in Figma for? You might have noticed that in Figma, you can set up variables, but you can also set up styles. In some cases, like, for example, with colors, it's almost identical to create and to consume them. So it's quite confusing to understand why we should use one or the other. Let's understand this better. We use variables for single values, so things like a color or a size. Styles, on the other hand, we used to hold several values together. Think of them like a CSS class. A variable could also be an element in a style. Let's say I created a variable called variable size S, and it holds the value of 24. And I created a style called headline strong. Now, my style is made up of several values. Just to name a few, this could be typeface, size, line height and weight. Currently, I set all of them manually, so I say size is defined as 24. What I could also do is I could use a variable here, so I can set the size to the variable size S, which at the moment is also 24, so it wouldn't make a difference. However, in a more sophisticated design system, this would come in really handy because what would happen is that I would have several textiles. So let's say I have the same headline but a soft version. And I could use the same variable. Now, if at some point I want the size to change for all of those headlines, I would only need to change my variable size S, and everything would follow. There's no right or wrong. You can use no or as little variables as you need in your styles or have them all variabled up as much as you need. I would recommend if you're just getting started, keep it simple because otherwise, this might be quite overwhelming. It's really something you would use in a more sophisticated design system. Other areas in Figma, where we would use styles is, for example, effects. So any shape or any frame in the right side properties panel, you can see effects, click on plus, and then you can choose the effect. So you have things like drop shadow, blur, and so on. You can also click on the Little sun icon here and change any of these values. In all styles, if you hover over the input field, you see the little variable symbol appear, click on it, and you could replace this with any variable that you created beforehand. Now, as soon as you like your effect, you can save it as a style. Click on the style symbol and then click on the plus button. You can now name your style. You can also add a description and then create the style. If you click on the gray Canvas area, then you'll see an overview of the styles that you currently have saved in this file. On any other object, you could now simply go to the effects menu, click right on styles, and then select the style and apply it. We've already come across grit styles. To remind you, you can apply a grid to your layout. Click on the icon to change it into a layout grid. And as soon as you like your grit, you can now save it as a style. Same procedure. Click on the styles icon, click on the Plus button, name it, and save it as a style. If you click on the gray background of your Canvas, you can see all your styles in your file displayed here. You can also click on the added field to alter them. So, to give you an overview in Figma currently, we have color number string and boolean variables. And then for styles, we have grid effects typography and gradients. And again, this might change slightly over time. So if you're just getting started, you could just use them in isolation. So, for example, you might want to use variables for colors, but then you might just have typography styles where you don't use any variables at all. And that would still work fine. But as you're scaling your design and become more systematic about it, like in a design system approach. You're going to notice that you might want to use variables inside of these styles so that you have reusable values. You're not going to need all variables in all styles. For example, in grids, you probably only need numbers to set your gutter and your margins. And then in something like a gradient, you're only going to use probably color variables. In typography, you're going to see more of a mix, for example, numbers, to define size and line height. But you're going to have a string because this is how you would define the font family. If you're just getting started, my recommendation would be, set up your color variables. This is really a must. You should also have typography styles. Later on, you might want to add number variables. For example, if you're working with auto layout to control your spacing, and you might want to have some grid styles as well. You can, of course, have effect gradients. It depends what you need for your design. But keep it simple and I would keep them separate for now. Once you feel comfortable, you can always edit your styles and then turn any fixed value into variables. 43. STYLES - 06 Typography and styles: Setting up text styles. To create a text style, select a text, and in your right hand side, text menu, you see the style symbol. Click on it. Click on plus, and you can now name the style. I'm just going to call this text style. You can add a description and create your style. I can now select any other text and then via the styles menu. I can select one of my created styles and it will be applied. If you want to change the color, this is separate from the style, simply choose any variable you set up via the fill menu. If you want to detach a style, then simply select a text and then right next to the style name, you find the detached symbol. If you want to delete a style, click on the gray Canvas area where you find an overview of all the styles. You can add it styles here, and you can also right click and delete the style. If we're working with a designed with components, then I recommend that you always apply your style to your components. Instead of randomly picking texts and turning it into styles, it's better to have a more systematic approach. So I personally like doing this is that once I know I like my design like this, I'm going into refining it much more. I pull out a copy of all the texts that I used across my design. This might be my components. If I already created some, this might be just purely from a raw design. And so I pick everything I used, and then I place it in order. So from the largest and most prominent one to the smallest one, and this allows me to create a hierarchy. So I end up with something like this. In this way, I get a good overview. I can also combine text that's pretty similar and I can clean it up for things like line height. I then name it accordingly. It doesn't matter what names you use. Just make sure that you have a semantic setup. I like doing it this way around, but some people prefer first creating a hierarchy and then using it on their designs. That's up to you. Once I'm happy with my setup, I can now start saving it with the given names. So once we did that for all our styles, click on the gray background area, and you can see all of them here. You could further organize them by selecting certain styles and then either right click or use the shortcut Command G, and you can create a new folder, for example, for all your headlines. To apply the styles to my components, I simply select the text, and by the way, if you hold shift down, you can select multiple at once, and I now from the dropdown, apply my new styles. I can also correct little inaccuracies. For example, here, I probably want a default strong. Once I've done that for all of my text across all components, if I jump over to my design, you can see that they inherit from my component, even if they're overwritten because that only concerns the content, not the style. Any change in style would obviously reflect throughout all components and there for all instances. 44. VARIABLES & STYLES - 07 Documenting variables and styles: Let's talk a moment about documenting the system behind our design with our components. We need one component as a master for our instances to link back to. We need to store each component somewhere, ideally on its own page or its own file, with some additional information. Now our styles and variables don't point to a master style or variable. We would not need any reference or overview in our file. However, I strongly recommend creating an overview anyways, to give a comprehensive understanding and documentation of use. This is useful not only for yourself, but also for other designers, and most importantly for other developers who will later build your design. Let's have a look how to document color for colors. The simplest way is to add a Swatch of your variable color and include the name you assigned it to. We want to use semantic naming, so avoid names like orange, red, or blue. Instead, use descriptive names such as primary neutral background or anything along those lines. The numbers behind the name are there to allow you to add more variations of the color. Therefore, I would recommend using steps of 100 or steps of ten. Because if you go 123 and want to add anything in between later on, then you don't have any space. I recommend adding an additional layer and create separate variables for your text colors. Even if this color is already represented in the neutrals, it makes it easier to keep an overall control and make sure the contrast is right. You can go even further and check these colors for correct contrast against your brand colors. You can use an online tool like Web Aim, or you can use any plug in Figma, something like Stark or any other for this spacing. Now I also like to add some information about the spacing I use, but this does not require a lot of documentation. In most cases, you would use a spacing system of a multiple of four, or 88 is a magic number in web design for various reasons, including avoiding half pixels. For example, if you would use five when scaling it down, it becomes 2.5 which is not ideal. Spacing system also saves you a lot of discussion with developers, because if you're a pixel off here and there, they'll know where to round it up or down to. I usually include a simple information sheet about the eight point spacing system to my style sheets, along with an example of how to use it. I also like to set up variables accordingly. In web design, we don't use the so called hard grid. Hard grid means that there would be some pixel grid in the background to align to. We don't do that, we use a so called soft grid. This means that our spacing system always works from one element to the other. And also within, for example, our components. I apply the same principle to typography. I include an overview style sheet for my typography with a focus on showing the hierarchy. You can create a hierarchy randomly or use a system like a ratio. There are great online tools available for this purpose. Alternatively, you can simply jump in steps of eight, which works great with your spacing system. For each of the styles, I provide additional information such as the type face, the line height, the weight, and anything else. I prefer to present this information in a chart format, but it can also be viewed in Figmous design mode or death mode directly. You might opt to not even add this. Again, I would recommend using a semantic naming approach. There are no strict rules, but avoid naming after the exact style. Don't use something like poppins 24 bold. Instead, opt for names like head line 03 or Headline S. If you're designing for a responsive page, you might need to adjust your text size at given breakpoints, and you should also add this information to your type scale. This is a more advanced topic and I have a whole separate deep dive course on this. I have some free examples of different responsive type scales on my Figma community page for you to download any additional styles like gradients or shadows that you might be using, just make sure that you also add a page with the information to your documentation. You can store this information about your styles and variables on a separate page in your file, or dedicate a separate file to it and use it as an external library. In general, documenting goes from very basic to super detailed and advanced. In the end, the important part is to communicate the system you're using in the way that fits your team and your resources and budget. Start small, and you can always add and improve your documentation. 45. PROJECT Part 3.1: Colour Variables: If you feel uncomfortable with variables and styles, then let's add that to our course project. Variables are still changing a lot. So you might see a different set up in your exercise file than what I'm showing on screen. I always try to keep the exercise file up to date. So also make sure to pull the latest version. What we want to do is we want to start with creating our color variables. I took out all the colors from our project for you already in these swatches, and now we only need to set it up in the right hand side. If you click on the canvas, you see local variables in here, you can open the color variables that I already created for you. If you don't see them, then there is a little switcher. You might see some helper colors that are also set up. Make sure that in the collection you're on color and then you can see the different colors to apply them. Remember, we can just have any fill. And then via the fill, we click on the Little styles. And as I said, I expect this to be changing quite a bit in the future. And then we can select any of the variables that we set up. Now remember, we created our components in a separate file, and we want to do the same with our color variants because otherwise we would just be in conflict with the ones that I already created for you in this file with a solution. Let's jump to the file where we set up our design. And remember we have our components here on a separate page. Let's just jump actually to our component page and paste our color set here. We can draw a section around it and also have this nicely organized. Let's call this color. You can also change the color of any section. I'm going to have this white instead. Doesn't matter what you use, it's just for better visibility. Now I want to create my variables and I click on local variables and there's nothing created yet. And I click on color variable. Now I can simply select the name that I gave it. Again, you can give this any name, just try to be semantic. Now select the Swatch. And with the picker, I'm picking the color from my set. Little shortcut. Hit shift and enter. This way you can quickly create multiple variables and then fill them in. I'm going to do this for you. Here are my variables. I quite like adding separate variables. Four text, you don't have to, you can also use this, but I'm going to add another color variable which I call text on dark primary. This is actually going to be just the same color as here. It's just going to be a simple white. But I quite like keeping it separate in case I want to change anything later on. I can also check if the contrast is strong enough. Here you can see I am giving this range, so that means that you can use this color on all of those neutrals. And I did check this beforehand. I'm going to create a second one which I'm going to call text on secondary. This is also, again, this is one of my neutrals right now, but this might change in the future this way. I have it nice and separate. There is one more little thing, you can scope colors. Let's actually just make this a little larger here. Then what you can do is if you hover over the color, then you can see this little edit field. And here you could say that you only want this variable to be visible when you're selecting text. I'm not going to do this for now because it's a little advanced, but just be aware that it's there. Again, variables are changing rapidly, so this might be placed somewhere else, but it will surely be found with the edit field. Now that we've created our variables, we want to apply them and very important, we do not want to apply them inside here. We don't want to add them in our design. We could add them in our design. But it makes much more sense to go to our components and apply them to our components because then all our instances will inherit this might see minus now. But if you're having hundreds of screens, then this is making a huge difference. It's actually much faster to apply them to your components. What I do is I select all of these components. And then with the selection color here, I'm simply going to fast pick all of these and change them into, um, my variable colors. I'm going to do the same here, and I can now select this. Mind you, I am working with separate colors for my text. If I do this, I would still need to select the text separately. And then I'm just changing from this one here to my text color. If this is a little too advanced, if this is a little bit overwhelming, then just go bit by bit. Select this one and apply one color. Then select the next one and apply the next one. It's really up to you. If it's too overwhelming, then just go a step back. But for now I'm going to go the fast way. I'm going to leave the gradient alone. Very important, and I'm just going to go like this this way. This is also really handy if you're designing and you're having like similar colors and you're cleaning up. Then you can just combine them here and make sure that everything is nicely set with your variables. Only if I've did that again, then I need to make sure that my text is set in the text variable. Once I'm done, I'm simply going to pick out the text. I'm going to change this text here into text on primary. I'd actually need to create another one, for this one here in the long run, a dark text, and for this one. But for now, I'm just going to leave those alone. Did I grab this one? Let me have a look. This one here is the text on secondary. You can see this is like the gray one. If we now select any of our instances, let's select this text here, for example. Then you can see that it automatically has the variable applied. We don't need to worry about the design. There are still some elements, like for example, background colors that I might have to sort out. I usually go through this and then for example, this fill, I would want to go in line with my variables. I would clean this up a little bit of, for example, this text here. Another good way to do this is let's select this frame. And then here you can see unused colors. If I click on this little target, then it's going to tell me which ones are not using variables or which ones are using this color. I can simply change them like this. Of course, any change in the variable, let's change our highlight, for example, to a red, is going to result in a change across the entire design. 46. PROJECT Part 3.2: Typography: Now, besides color variables, we also want to turn our text into styles. Again, this is currently styles. Hopefully Figma is soon going to provide us with variables for this as well. And I'll update I'm using my picking method which I discussed during the course lessons. Again, I just want to stress, make sure that you first run through all the sessions before you jump into these exercises. Otherwise they'll be very overwhelming. How they work again, let's just refresh, is that I simply pull out everything that I am using in my design. From here, I just need to copy that out. Copy and paste. I am creating these little hierarchies. I'm also using here my small text. This way I am clustering them. If we jump back to your exercise file, you can see this. That here I have all of this and I clustered it. And you can see that up here, I came up with some headlines of 24 pixels, then 16 body text, and so on, and a very small one down here. Now if you're designing freely, then you might have something where you have a 32, 34, and this is also the moment where you can group all of them. It's not always going to be that clear. It's probably going to be a little bit of cleaning up if you're deeper into a more creative project. Once I clustered them, what I did is I created title one, title two, title three, and so on, and some body texts. And I have this scale. And I now want to turn this into styles. And you can see if you click on the gray background color. I created these styles already in your exercise files, so they would be ready to use. I could simply click on here and then jump into the style section and select any of these styles. Now we want to create this same styles in your separate files. So we're going to do the same as with our components and colors. We're going to jump in here in the separate file that you created, and we're going to add our styles here. Again, we can add a section around it to keep everything nicely organized, to have this white as well for better visibility. Now I'm going to go one by one, saving these styles. I'm going to go for this one here and I'm going to click on the style button on plus I'm going to call this one title one. I can add more information where it's used for and I can create this style. Now I'm doing the same as I did with my color variables before. I am not going to apply this style in here. Figma would let me do this. And this is a little dangerous. We don't want to have that in our design. We want to have that in our components. So everything in our design follows. For my title, I would start here. I would select anything that's a title, and then I would choose the title. I would then create my title. Two, I actually prefer first creating all the styles, and then I'm running bit by bit through all my components to make sure that everything is set up. If you jump over to your design and you click on the title here, then we're getting a better price. It didn't inherit. If I click on the title here, then it did inherit What happened sometimes if we paste text in, even though we didn't mean to, we were accidentally overriding a style. What we need to do in this case is to select our instance and then reset it where the three little dots are reset all changes, and unfortunately, that also resets the overrides. I just need to put that text in here again. Now if I select, you can see that it now has the correct style. 47. RESPONSIVE - 01 What is auto layout?: What actually is auto layout. Auto layout allows you to create dynamic frames and components that respond to the size of the content. This way you can work with changing content such as different lengths of text. Yet, always keep your layout and spacing intact. You can use auto layout on the smallest elements of your design, such as buttons, up to larger and complex nested components. And you can even create entire pages with auto layout. Auto layout not only adjusts the size horizontally or vertically, but also allows you to add set padding, as well as space between elements that will stay in place even when changing content or adding items. Sweet, you can align and distribute items inside the pairing container with auto layout and choose in which way you want them to resize. With a few simple clicks, you can really create magic with auto layout. But I have to be honest with you, in the beginning it's a little confusing. And it seems like you're creating a layout with chewing gum that is really normal and you're going to get used to it. Really bear with me. And let's walk through this step by step. 48. RESPONSIVE - 02 Adding auto layout: Let's get started with auto layout. With auto layout. Our design elements can respond to the content. Here I have a button without auto layout. You can see that if I change the content, then nothing would adapt. Now if I add auto layout, which I can simply do by selecting this button. And then on the right hand side in the Properties panel, I click on the plus button, Next auto Layout. If I now change the text, you can see that it automatically adapts to whatever content I'm given. Let's do the same for my card I selected, I add auto layout, and now I converted this into an auto layout frame. You can now see if I change anything about the content, then everything will adapt, but it will still keep all its padding. Now this padding and spacing, if you select the auto layout frame again, you can see that in the right hand side properties panel in the menu here. You can see that you first get something called the Gap between the items. This is all the child items. My child items here would be my image, my headline, and my text. Let's just get this one back to its original state. If I would change this, then you can see that it changes the gap between these elements. If you hold shift pressed, then it's going to jump up and down your nudge amount. You can also adjust anything right on the canvas or you can double click and then type in the value you're after that works the same for your padding. Here you have your horizontal and your vertical padding. You could change this right here in your properties panel. You can also just type in any number you're after. You could also adjust it on the canvas by using the handles or by simply double clicking and adding any value with the alignment menu. You can now align your elements inside your auto layout frame. Let's just make this image smaller so you can see it better. You could align everything to the right, everything to the center, or everything to the left. This aligns the entire text box, not the text itself. If you'd like to align the text, then you still need to use the text property settings. Auto layout is really good at guessing the direction you're designing in, but if you ever want to change it, then you could use these errors up here. So you could change from vertical to horizontal. Wrap is something that we would use if we have more auto layout elements, nested element next to each other. It's nothing you need right now. In the beginning, you can move elements in auto layout, either by simply dragging them or you can use your error keys on your keyboard to go up and down. You'll see that in the layers panel, they're going to change position according to where you place them. You can also remove the auto layout feature at any time simply by selecting the frame. And then next auto layout, click minus, It will leave you with a simple frame. Besides the properties panel, you can also use a shortcut shift and A to create an auto layout frame all shift and A to remove it or you can simply use right click. 49. RESPONSIVE - 03 Auto layout components and variables: If you're using variables and set up a collection with your spacing values, then you can use them in auto layout. This is a great way to assure consistency across all different elements and components in your design. To apply them to an auto layout frame, simply select the frame. And then in your Auto layout menu, where you find your padding and spacing values. If you hover over them, you see a little variable sign appear. Click on it and you get a drop down with all the values. You can now choose the value here. After you can also use it for your spacing. You just need to go apply variable via the dropdown. You can now choose any variable you'd like to apply. You can of course, apply the same variable multiple times across different elements. You can always correct them by simply choosing another variable. If you would like to remove the variable, then simply click in the field and hit the back button twice. And you'll see that the little gray outline box symbolizing the variable will disappear. Remember in figure we're working with a component based approach. It would be good practice to turn any auto layout frame that you're using multiple times into a component. If we now pull out an instance, you can see that the instance will inherit any spacing values you applied with variables as I am altering the text in the instance. These variables will stay in place. Of course, as with any other component, this would work with any other variable as well. For example, if you would set a color variable to your component, then all instances inherit. 50. RESPONSIVE - 04 Responsive card with resizing: Resizing with auto layout. We've learned that we can simply turn any element into an auto layout frame. We can adjust the spacing and the sizing and padding as we alter the content, then we can see that our frame corresponds. Now, it works really well like this, because if we have a look again, this is a vertical auto layout frame. But what we also want this frame to do is that if we resize it, then we want our content to also respond like that. For that to work, we need to add an additional layer of auto layout which is called Resize settings. You can find your Resie setting in the right inside properties panel, right below width and height. Now while we set auto layout to the entire frame, we want to set our resize setting to all elements within our auto layout frame. The resize setting is usually the part where people get most confused about auto layout, but it's not that difficult. It's really just understanding at once and practicing it a little bit. The crucial part is to go step by step. You can't rush this, go bit by bit. The first thing we're going to select is our image. Now let's go to our dropdown, and let's set this to fill the container. That means that if we resize the container, it's going well what it says fill it, always respecting the padding that we said left and right here, we're dealing with a horizontal set up. I'm not worrying too much about the vertical set up still. I'm going to have this one here at a fixed height. That means that my image is always fixed at this specific height. Now I'm going to go with the next element, which is my text. I want to do the same. I don't want this to be fixed at the size. I want this to be horizontally to fill the container. I'm going to do the same for my copy text. I also want this to fill the container. Now with text, I don't want to fix the height because I don't know how high this is going to be. If I add more text or if I resize. This is why I want this to hug. Hug is a really cute little feature. Basically think of it like giving a hug to the vertical content when dealing with copy text and auto layout. And hereby I mean anything that's not a button or a link, then make sure that it's always set to auto height. Usually auto layout does it by itself. That's already pretty much it. Let's resize our box now. And you can see that everything follows nicely even if I change my text. So let's add some more copy text here. You can see because this is set to auto height and hug, the box automatically expands an auto layout response. I can still change things like my spacing and my sizing with the auto layout menu. But if I resize, then everything will behave the way it was intended to. The auto layout feature Figma is pretty smart. If I, for example, have a button here I want to add and I turn this into auto layout, then you can see it does not only automatically pick up all the spacing, but it also already gives me a suggested resize setting. Now in a button, hug horizontally, and hug vertically makes sense. Because if I change this, so let's say change it to read more, then you can see that I want this to be hugged horizontally as well. By the way, I can also drag one auto layout frame inside another one. The button would be nested and it would keep its resize settings. If we wanted to move it around, then what we could do is use the alignment. We could also change its resize settings. For example, if we wanted a full size button, then we could change this to fill container and it would sit in the middle. If your text is not centered, then simply use the alignment tool. To do so, really play with these settings to familiarize. 51. RESPONSIVE - 05 Auto or space between: There's one feature which is a little bit hidden, but I use it all the time. I want to make you aware of it. It's called auto. This feature was previously called Space Between Figma and is still called like this in flex box. You might also hear this name being referred to basically. Here we have our frame with three child elements. If I re size then you can see that I can align this, now it's in the middle. I can align it to the left, but it will always keep its spacing. Now in the spacing with the dropdown, I can switch this to auto with auto. The space is equally distributed between the children. Besides the dropdown, you can also simply click on the handles. Now if you type any value, then it will jump back to the original setting. Or if you double click again and you type auto, then it will jump to space between or as we call it now auto. Another handy shortcut. Click on the alignment tool and then simply hold command and press X and you can toggle between the two. Auto is really, really handy when we want to create things like a navigation where we want to sit some elements on the left and stick others to the right. The great thing is if we add more elements, it depends where we add them. Now, this would be a direct child. Now we have three child elements. If we resize, the available space is distributed between three. But if I place this inside of my nested frame here, then I get back to my original setting. A lot of the time also will be just the solution you were looking for. Keep it in mind. 52. RESPONSIVE - 06 Nesting auto layout with system: Let's talk about Figma superpower. Again, nesting and especially nested auto layout. Auto layout can feel quite overwhelming in the beginning, but it's really not that difficult. It's about applying the features in the right order in a structured way. Let's do a little recap. We have our auto layout frame, which we apply that comes with the menu. In this menu, we have things like spacing. We can align our elements in the auto layout frame and we can set directions. Don't forget about our secret hidden champ right here, which is auto. Then we have the resize menu. This is also part of auto layout, but we find it at the top right below the width and height. In order for our elements inside of our auto layout frame to behave the way we want when resizing, we need to set them. Now comes our superpower, which is nesting. When we combine all of this with nested auto layout frames, then we can really build almost anything. Let's go through some examples to understand this better. Here's my first one. I have a frame and I want to turn this into an auto layout frame. Right now, it doesn't respond if I resize. Now, if I would simply apply auto layout to this parent frame, then see what would happen. I could tidy up my margin and my padding, but the problem is that inside here, these elements would all have the same distance. I don't want this because this is a unit and then the rest should follow. I want a different spacing inside here. But now I can only change all of this. This is because when I apply auto layout, it's going to look how many child elements are inside the frame. It's then going to distribute them evenly. In order to change my layout, I would change the amount of child elements. Therefore, what I will do is I will nest my headlines. I'll basically group them together as one element. Now, auto layout is just going to take everything on this first layer, so the first children and distribute those evenly. And I can now independently handle my headlines. Let's do that. In our example, I'm going to select the headlines. I'm going to press Shift and A, which is the shortcut for auto layout. Now you can see I created a nested frame. I could now name this, I'm going to call this headlines. Now I can apply auto layout to the parent frame. I can either use Shift as well, or I can use the menu. In my case, I need to tidy up here a little bit. Sometimes it catches the numbers quite well, sometimes not so well. I can now change the padding and notice how it's changing the space between the child elements and not between my headlines anymore. If I wanted, I could select my headlines independently and I could change the space here as well. Great, we've done our first part. We nest it and we added or to layout. Now we need to go to the second step, which is getting our resizing in order instead of randomly applying things have a bit of a strategy. Mine is I always start from the most inner element, I select my nested frame, I hit Enter. This is a shortcut to select all the child elements. Now I set them all to fill container. Now you can see that this jumped back. The reason is because the main container, the frame holding them is not set to fill container yet. I'll go one step up and I now say fill container. Now my image, I'm going to leave right where it is. I'm going to go for my text and I'm going to say fill container. It might re size like this because it's going to look for the largest element which is currently my image. But now you can already see this is working really well in what I'm after one. Let's go for this one. Now, if I would simply apply auto layout, then what it would do, it would stack them vertically, probably below one another. We would probably end up with something like this because it would only have a look at the direct children and just stack them in one direction with the same spacing. We don't want that, We want to do is we first want to nest the right hand side, and we want to nest this vertically. Then we want to have our parent frame also as an auto layout frame running horizontally. Auto layout usually catches up on the direction itself, but we need to do the nesting for it. Let's select everything on the right. Hit shift A, So I have a nested auto layout. I'm going to just call this right for now. Now our left, we don't need to nest because this is just an image, there is no more elements. Then we can go for our parent frame, hit shift A, turn this into an auto layout card. Again, have some strategy. You can go from the most nested one outside or you can go bit by bit. Let's go just the other way around. For this one, I'm going to go step by step. I'm going to take the image, actually I want to leave this as fixed right now. I'm going to go with this one here and I'm going to say fill container. I'm not going to hit Enter because actually this one can set to hug because it's like a button basically. Then I set this one here to fill container in my headline. To fill container, it doesn't matter which way round you're working your way up or down. You just need to make sure that you catch all the elements. If you make a mistake, no worries. You can always add resizing behavior later. Let's have a look. If that already works, that looks just fine. If I wanted my image to stay on the top, I can do this with my alignment. Don't forget about this. Now, I could also have my image set to fill container and notice an auto layout. When you have all of the children set to fill container, then they will always equally distributed. Unfortunately, right now, there's no way to say you take up 13 and you 23 or something like this. Let's do a quick last one and set up this navigation. What I'm after is that I have two child elements. I want the logo on the left and I want something on the right. Let's nest that. I'm going to grab everything over here on the right. I'm going to hit Shift and a I created the layout structure I'm after now we need to add our resizing. Well, actually do we, we actually don't. This is the perfect moment to select our auto. Now let's turn this into an auto layout frame then. Don't forget this little drop down here with our magic button. Let's hit auto. Just like this, I created a responsive navigation. It's really not that difficult. It's really about getting your structure right and then adding your resize settings as usual. A lot of practice. Practice, practice. There are no additional secret ingredients to auto layout. That's all there is. 53. RESPONSIVE - 07 Absolute positioning: We can absolute position other elements inside auto layout frames. What does that mean? Here I have an auto layout frame. I want to drag this new sticker in here, and I want it to sit on top of my image. Now if I simply drag it inside auto layout frame, you'll notice that I cannot pull it on top of the image as it becomes part of the auto layout. As soon as it enters the frame. What I can do now is place it inside the frame, select it, and then in my right hand sides, frame menu, the very top there is the hidden little button called Absolute Position. If I click this, then I'll take it out of the auto layout flow. I can now position it freely inside my frame. However, as I've resized the card, you'll notice that it doesn't respond to the width anymore. This is because it's no longer part of auto layout. Therefore, resize doesn't apply. However, I will now see constraints appearing again for absolute positioned elements. I'm going to fix this to the right hand side end to the top. Now as I resize, it's going to stick to the right hand side of the frame, just as I wanted to. By the way, if you want to add something like an alert bubble that goes beyond the frame, you can also do that. Add it to the frame, set it to absolute positioning. Then you might have to position it a little bit with your arch so it doesn't go out of the frame. Then what you need to do is select a parent frame and untick clip content. You'll now be able to see it and it will always move with your frame. 54. RESPONSIVE - 08 Auto layout pages: We can also use nesting to set up entire auto layout pages. In my example here, I have a component set with two variants, one for mobile and one for larger screens. Here I have an instance of this component and you can see it's already set up with auto layout. I have a card component which is also set up with auto layout. On the right hand side, you can see that I have a set of instances and I already added some contents, some images and headlines here. Now we want to set up a frame that holds all of this. Let's press, we get our frame menu. And I'm going to just pick a random iphone size. I can now add my instances to this frame because they're all set up with auto layout already. I don't need to worry about the details. I can now go for the bigger layout. Now I could add my cards one by one, but what I'm going to do instead is I'm going to select all of them. I'm going to hit Shift and A. Now I created an auto layout frame around here and I'm going to call this Card group. I can now tidy up this group, for example, let's add some spacing. What I can do now is I can add this inside of my frame. Remember, we can select the parent frame. And then with clip content, we can see the full overflowing content. Let's zoom in a little bit here so we can see this better. What I want to do, I might want to reshuffle this a bit. I can do this with going up and down with my arrow keys. Now I have my general layout. And what I want to do now is I want to add the resizing so that it behaves with my frame. Therefore, I need to turn this parent frame into an auto layout frame as well. It automatically set the parent frame to fixed and fixed. And this is just fine because I'm dealing with this preset fixed size. So what we're going to do now is we're going to do the same as when we set up our elements like the navigation and the cards. We're going to go through it bit by bit, setting up the resize settings. We don't need to worry about the cards and the navigation itself because that's already set up in the component. I'm going to take this instance as a whole and I'm going to say this entire instance, please fill the container. Let's have a look if that already works. Okay, that's great. Now we're going to go for our cards again. I can first take the parent group, the card group and I can now say fill container. My cards inside of this group still don't know how to behave. If I select one of them, you can see that they're still fixed. Let's select all of them. Let's use our shortcut to select a card group. Hit Enter and the select all child elements at once. And now I'm going to say field container and in height content because I don't know how this is going to resize. That's great, but I want some padding left and right now. I already have the padding inside of my navigation because this is a natural part of the navigation with my cards. I can just add it to my Card group. I select my card group and then I'm going to add some padding. I'm using my variables. You could also add a number here left and right. Now everything is resizing correctly. If you're dealing with mobile screens, then I recommend that you use the preset menu. Because this way you get a more accurate representation of different screen sizes. That works well, but I might want to add some more sizes. Let's press again, and let's say I also want to have a desktop version. I'm going to copy over an instance of my navigation. I can either copy this instance right from here or I can use the small version and simply change it over in my component properties window for now. Before we add auto layout, let's just add it by hand. And you can see this is also set up with auto layout already. We don't need to worry about this component or instance itself. I want to add my cards. I can either set this up from scratch or I can just copy them over from my mobile version. If I would just adjust them to the screen size, then this would happen. Now this is because the auto layout is set to a vertical layout, but for this layout, we would need to change to horizontal. You might find switching over a little confusing in the beginning. Just work from scratch. I want to adjust the margin And padding. Here you can see that in my navigation, I have a left and right padding of 48. Let's also select my Card group. Let's also set the padding to the variable of 48. We can also set the height of our card group to hug the content. It's always as high as the cards. We could now turn the entire screen into an auto layout screen. Hereby we can also use variables to adjust the space between. You can choose between using variables or just type these numbers. Now, because we already set the recites behavior here and copied it over, it's going to stay the same. This is set to fill, this is set to fill, and all child elements are set to fill as well. If I am resizing the parent, then you can see that everything resizes nicely with it. A little extra tip. A bit more advanced. You can select your component and via the width dropdown, you can choose a min and max width. Now if I set a min width, let's just say I set that to 260 pixels randomly for now. Then you can see that if I pull out an instance, I cannot make this any smaller than the set amount. The great thing about this is now that I can select this whole row and I can set it to wrap. Before we do this, let's have a look at the normal behavior. It would just stop here. But if we set it to wrap, what it would do now is that it would now wrap into a new row. By the way, you cannot control when your navigation, for example, would be too small. The moment you need to switch over to the other version. This is really something you need to test by hand, Figma and document. As you can see, it's very important to first set up your components, make sure that they're responsive. Once everything is in order with your components, you can then bring them over and turn your pages into responsive pages if you want to. This is nothing you have to do. 55. RESPONSIVE - 09 Constraints in Figma: Constraints in Figma. In Figma, we have yet another feature that lets us control the behavior when resizing. It's called constraints. Select any element inside a frame. This must be just a simple frame, not an auto layout frame. Now you'll see blue dotted lines that point to the next parent frame. These are the constraints. You can also see them in the right hand side menu under constraints. However, only on standard frames, they're not available on auto layout frames. Per default, these constraints are set to top and left. Notice how even when you have nested frames, they'll always go up to the nearest parent. If we resize, it seems like nothing happens because they're set to left and top. However, if we change those constraints, for example, let's set them to left, right to this box. And then on this red dot here, I'm going to set them to bottom and right. Notice how they change and they show you which side they're pinned to. Let's set this one here to center. You can use the drop downs or you can simply use the icon and click on the different directions as we pinned them in their new directions. And now re size, you can see that this changes their behavior. We can set them horizontally, or we can also set them vertically. Pinning them to one side or to the bottom seems very obvious. But sometimes we get a bit confused when we talk about center, the so called left right scale. The difference between them is that fixed simply has a fixed left and right margin. Wherever you placed, it's going to keep that distance scale has a percentage margin wherever you placed it. And center just stays in the relative center. And the same obviously works horizontally and vertically. 56. RESPONSIVE - 10 Constraints and grids: Constraints and grids. So instead of setting up everything with auto layout, we could simply set up our component as auto layout components. And then what we could do is use left and right to pin them to the left and right sides. And we do the same here. And we can even add elements like this little bubble here and set it to the bottom and right. Now if we're resizing, then we're getting pretty much the same result. But it's much, much easier than setting up an auto layout frame. However, you will notice, while this works really well for simple mobile setups with just one element, as soon as you add more elements, then it's just not going to work. Because the problem here is that if we're using left, right, then it's going to take the full distance, it doesn't know about these other elements around. What we could do is select all of them and set them to scale. But with this, it would work, but we wouldn't keep a set distance. We couldn't really keep our padding aligned with, for example, our navigation. A great way to deal with this is to add a grid. Because have a look, if I'm adding my left and right constraints in a grid, then it's now going to look at the nearest column because it's taking the columns as parents. Therefore, what would happen now if we select all of these cards and set them all to left and right, is that they would stay in the designated columns while resizing. Now we can do the same for our navigation up here. Let's set it to left and right. And you can see that with just a few clicks and very few complications, we're getting a responsive set up and we can test our design. Now, this is really handy for just a quick test. It also works really well if, for example, you're working with uneven numbers. Let's say you don't want to distribute everything evenly. Wouldn't work with auto layout, but it works really well with a grid. However, there are also downsides to this, because the grid doesn't respect any of the vertical padding. It doesn't know the distance between here and here. If you add more elements like text, then things start flowing into one another. But this is purely a figma problem. This is not going to be an issue in code later on. I still like using grids for quick testing. This is, however, not a replacement for auto layout. Your components should always be set up with auto layout, but sometimes it's just much faster to quickly test them with a grid and constraints. 57. RESPONSIVE - 11 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 test it on different screen sizes. Anyways, however, you should use the same master size for all screens that you're 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. 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. I usually use a mobile screen and a desktop screen as my master sizes. Best discuss with your team and your developers to make sure you're all aligned. 58. PROJECT Part 4: Responsive: As soon as you feel comfortable with auto layout and constraints, let's jump into our course project. Remember, there's no new information in this. This is just some additional practice to deepen your understanding of this topic. Under part four responsive, you see some instructions and also some examples where the actual responsiveness happens is however, in the components. If we jump to our component page, then to each of those component where it makes sense. For example not to my icons, they don't need auto layout, but anything that would re size have content that is reshuffling. I added auto layout and you can click through those components and also make sure that you're opening the layers. So here you can see how I nested everything. And then on the right hand side and the properties panel, you can see the auto layout settings and also don't forget about the resize settings, really open these layers so you can see where everything is Nested. Nesting is really important to get this right. And remember, responsive design is the most challenging part in Figma, So really be gentle with yourself and just use these components that I set up for you as a reference. This is one part that we're adding it to some of the components where we need it. For example, my icons would not need auto layout, they're just standard icons. Then there is another part. So if we jump into our design, now all our instances here will inherit. So you can see on the right hand side that this has all the settings from before. And you can also see that inside of here, in the layers panel, that this has the same nesting. This is all inheriting. I don't need to add that every time I use this component or an instance of it. However, when I place it in a new design, what I do need to do now need to tell it how to behave in relation to this new environment that is placed in. There are several ways you could do this. You could set up the entire frame with auto layout or you could use constraints, which is what I'm using as I find this a little easier to handle and also still gives me more flexibility in the design. For example, you can see that this instance here has constraints set to left, right, and top. And you can, for example, see the tap bar down here has left, right, and bottom. If I now select the screen and then I use my dropdown, I can now try out all different sizes of current phones. So I usually try out the smallest one. This is not a common size, but it might still be around. So I make sure that everything still fits and then I use the largest one. And I can just jump in between here and make sure that my design works well for all sizes. You could, of course, also just grab it and resize it by hand. However, I find it a little more reliable to use this drop down here with real sizes. Now let me guide you a little bit when you jump in this exercise because you would need to add this to the components that you created in your separate files that still don't have any auto layout applied. If you have not set this up, then what you can do is jump back to exercises and just grab the suggested components that I created for you in exercise two. Now you would need to copy that to a new file, turn all of them into components, and what you should do is also make sure that you're nesting those icons again, or you can just get rid of it and forget about the nesting for a minute and concentrate on auto layout. That would also be fine. You can then set up your design with those components. If that's a little fast, then jump back to this session. Jump back to our course project part two, where we talk about components. Now if you followed along all the different steps of the course project, then this is something that you should have right now. You probably have your design set up here and you also have your components, and your design is made up of instances of those components. However, right now there are no constraints applied yet. Let's first jump into our components and make sure they behave correctly. We're starting at the very beginning. I don't need to add auto layout there, just as there are. Just fine. Now our tap bar here, I do need to add auto layout. I already set up this tap bar that each of these icons here has its own frame. This is making it quite easy for me. I can simply apply auto layout. I apply auto layout to this frame. I apply it to this frame and apply it to this frame. I can now apply auto layout to the entire bar. I now simply need to hit Enter. This way I'm selecting all the nested child elements at once and I can now set that to fill container. They're just going to fill up the available space divided by three. Let's have a look if this is working. So I'm just going to pull out an instance and I'm going to resize. That. Looks fantastic. That was that. Okay, next one, our top bars here. You could actually argue and say, well, I'm just going to leave this with constraints and it would work. It would work, but as soon as I'm having a proper resizing, I quite like to have it all uniformal. Also to have all these distances here correct with auto layout. So I'm going to add auto layout to this. I'm going to bring it back to the full size. I think I have everything at 390. It actually wouldn't matter because it's responsive now, but I quite like to have that just all the same. Now, I simply tidy up so you can see here, this is already working nicely. I have left and right, I'm just going to lined at in the center, so I have to bottom left and right, all the nice spacing. Let's have a look if this is working. Yeah, that's just fine. I'm going to do the same with this one down here. I'm going to apply also a layout. You can see for example here, the spacing is a little off. I'm also going to make this 390. Again, this could be any size, it's responsive. Now, I'm going to tidy this up and also have this at 16. This way, both of them are identical with all the spacing. Okay, great, let's jump over here. Our design elements in my playlist cover. Actually, I'm going to leave this and I'm going to use constraints on here. Even though I just said I prefer having everything with auto layout. I find that to start with this would be a little tricky. It would still work with auto layout. You could select it, you could add auto layout. Then you would have to select this gradient here. You would have to position it absolute, Bring it back in, You can see it's still working. But it's getting a little tricky. Let's jump back here. What I'm going to do is I'm simply going to set this here, so the overlay, It should actually be called gradient. The gradient I'm going to set to left, right, and the image I'm also going to set to left, right. I'm actually going to do the same for top and bottom. That means that they're always going to be scaling correctly. Now this little one here, I definitely need to add some auto layout here. We first need to nest because what would happen if we just apply auto layout? It would do something like that. We don't want that, we need to nest. I actually want these two here to have their own distance. I select them, hit shift and A, then I select those shift and A. And now I can apply auto layout to the whole frame. Okay? So remember we're doing our three steps. We're first thinking about the nesting, then we're adding auto layout, and then we're resizing. Now we need to add the resize behavior. I'm going to start with this button here. That's fine as it is actually. No, let's set this actually also needs to be an auto layout element. Let's add that hug hug. That's perfect. Now this one here, I want to fill the container. I want to fill the container. Then this container, I also want to fill the container. And this one here, I'm leaving it fixed. Let's try that out. Let's just pull out an instance to make sure it works. That no, actually doesn't. This one here, we forgot that, also needs to fill the container. Let's just add some more text and see what happens. We can see that there's a little error. Okay, let's find that error. Fill the container, that's also filling the container. This is, let's just go bit by bit fill. This is said to fill, this is still said to k. Here we have the issue, fill the container. You can see if you pull out this little testing here, then that's really helpful. Another thing I probably would do is I would center this. So it would be something like this. Okay, fantastic, that's working now as well. You can see over here in your exercise file that actually this is the example I am using. So you can see first we're thinking about the nesting nest, then we're thinking about the auto layout setting. You can see actually a position, everything at the bottom, it's up to you. And then I apply the component here at the very end. It doesn't matter when you turn it into a component. You can play with those examples here as well. Let's jump back, our cover. Our cover. I do the same as here. I just leave it important. Just always grab all the elements inside and just make sure that they all have some sort of setting. You could place images right on the frame. I am using this little shape simply because this allows me to copy and paste images faster. But a shape is fine or a frame is fine. It's really up to you. This card here. This is actually really easy one, because it only has two child elements we can apply to lay out directly, no need for more nesting. The only thing I'm going to do, I'm going to set this text to fill the container. Let's just also give that a try. Let's copy some more text. And you can see, yeah, actually this has a little dots. I don't want this to go into next row. Perfect. Remember if you want that, that is in the little extra menu of your text properties, and then you find it down here. Next one up. This one needs a bit of nesting as well. And by the way, you might encounter slight differences between what I'm showing you here and how my final set up in the exercise file is. There is several ways that you could tweak this, but it should be similar. The important thing is pull out an instance, dry it out, and make sure it works. Here we first of all need some nesting, so let's grab those two, shift and eight, create an auto layout frame. Now let's add auto layout also to the parent and make sure this is all tidy. So I want this to be 16 as well. Now if we pull out an instance, you can see that this doesn't behave yet the way we want it to behave. So what I want to do is I'm taking this middle bit and I say fill container. And now this is going to take up all available space. And it's basically going to push this little button to the right, and it's still going to stay on the left. However, always make sure that you also test with more content. So here you can see that what we forgot now is to set the inner children, so I hit Enter, I get all the child elements. You can also just pick them one by one and I set them to fill container. And this one up here as well to fill container. So if you're pulling out an instance and playing a little bit with the content, you can always get a quite good result. An idea of what is happening by the way, to avoid things like this, like if this is getting too small, the overflow, this is not auto layout, this is simply our old friend clip content. Just run through the rest of the components by yourself. So just those two to finish off. Remember first we're going to nest, then add auto layout, and then resize the holy three. Once you've finished with this, I did that for you. Then let's jump back to our design. You can see if we just click on one, then you can see that they all inherited those settings. Now we just need to add our resize behavior here. I'm going bit by bit. I'm selecting this one left and right and top. Then this one in here. Actually, let me switch on my grid because I do want to position this with the grid. Remember that constraints behave with the grid. I'm also going to set this to left and right. Then here my text to make sure it's the full width of the grid left and right. I already played with this. Apparently this is also set to left and right. Now these ones here, I need to select them. And now I'm going to right click and frame the selection because I want them to. Otherwise it would stick to the grit in the background and try to rearrange themselves. Now this is just like one element that I can position left and right. I'm going to do the same with this one down here. I'm going to frame selection left and right. Obviously my bottom bar left and right, and I want this to be stuck to the bottom. Let's try out, and as always it's just about trying and fixing stuff. If it doesn't work the way you expect it to, let's look quite promising. Let's have a look at our little one. And that's also looking fine. Perfect. Let's jump back to our standard size. Just go through this bit by bit. So select all of this here, little tip, this whole overlay. You need to make sure that it's stuck to the bottom. If you're resizing, if you want to have a thick peak, then just jump to our exercise file. In final design, you can see my designs. And you can simply click in here. And you can see the way that I set up the constraints for the different instances. And yes, it's going to feel a little bit like working with chewing gum in the beginning, but trust me, you're going to get there. It's going to get easier the more you do it. 59. PROTOTYPING - 01 The Figma prototype workspace: So let's get started with some basic around the workspace when dealing with prototyping. Here we have some design set up, some for mobile and some for desktop. Per default, we're going to be in the design tab. Next to the design tab, you find the prototyping tab, or you can also use a shortcut to toggle between them. Alt or Option 8.9 We're going to get to know this menu here in more detail. For now, just note that if you click on the gray canvas, then you're setting the overall prototype settings. Any device that you want to set, going to get to know more about that later. And if you want to change the background, and that's going to be in the presentation view, which we're going to have a look at in a minute. If you, however, select any frame on your canvas, then you'll see that the prototyping menu here changes. This is where we're going to be working most of the time in here in our design file. This is where we're going to set up the design and all the behavior of our prototype. If we want to see our prototype in action, then we need to hit the little play button at the top right hand of your file. This then jumps to presentation or preview mode. You can simply use your keyboard keys to jump to the next frame, even if you have no connections set up already. Note the order that Figma uses here. This is really handy because Figma actually picks the first framed it finds, and then it goes through the row of frames. If there's no more frames, then it's going to jump to the next available frame. This doesn't have to be a clear row, it could be something like this. But Figma is going to interpret this as a row and go through the frame one by one. You can also set a device for the preview. Make sure nothing is selected and click on the gray canvas background. And then you'll see the drop down for devices in a prototyping menu. Here you can choose a device. Make sure that the device you're choosing matches the size of your frames. If we now select a screen and Jim back to presentation mode, then you can see that we now have a device around it. We can still toggle through the designs, but note that it only fits the device that you set. As soon as we go to, for example, our desktop layouts, this wouldn't work anymore. The solution for this would be to store your mobile and your desktop designs on different pages for your prototyping. By the way, we can also add videos or animated gifts to our designs. In our design mode, this would not show up, but as soon as you jump to presentation mode, you can see your videos in action. This is only a pro feature. Besides the presentation mode. You can also select Single Screens and Figma. And then hit Shift and Spacebar, and you'll get the infile preview. If you forget about those shortcuts, then right next to the Play button, you find a little dropdown. And you can also activate the infile preview and you see the different shortcuts. 60. PROTOTYPING - 02 Setting scroll behaviour: In Figma, we can set up our designs in such a way that in presentation mode some elements are fixed and some are scrollable. Let's have a look. Here I have the design of a mobile screen. I want the navigation on the top to stay fixed while the content scrolls. I have another Add button down here, which I also like to stay fixed. Let's have a look at presentation mode, how this looks right now. If I press on the play button, I can see my prototype. And I can see that if I try scrawling it, absolutely nothing happens. Let's jump back and set this up for scroll to actually work. We need content that is larger than the frame. Here I select the parent frame called Mobile, and on the right hand side you can see a little checkbox called Clip Content. If I uncheck this box, you can see that my card group is actually much larger than my original frame. This is really important if you do not have content that you can clip and that will basically overflow your frame, then you cannot add scrawl. You can have this checked or unchecked. It doesn't make any difference. What you need to do now is to jump prototyping mode. Click on the prototyping tab on the top right corner. And then in Overflow Scrawling, choose Vertical scrawling. Let's jump back into our presentation mode and see what that did. I can now scrawl the content, but as you can see, my header and my button here are not fixed. Let's go back and set this up. Choose the element, in my case, the header that you want to stay fixed and jump into prototyping. You will see under position the option to fix stay in place. Notice that here on the child element, you also get the option to set the overflow behavior. That would be the scrawling behavior within this nested frame. In this case, we don't want any behavior. We already set our vertical scrawl to the parent container. Let's also fix this button down here. We're going to set this to fix. Stay in place as well. Now let's play and have a look what this looks like. My parent container scrolls nicely and all my fixed elements stay in place. If you ever experiencing scrawling not working, then make sure that you check three things. First of all, in your design tab, make sure that you have clipped content that is larger than the frame you're dealing with in the prototyping menu. Make sure that your overflow scrawling is set. Once you have the parent element set up, now choose the child element you want to fix in place. Go to prototyping and then position, choose fixed, stay in place. 61. PROTOTYPING - 03 Connecting screens: Linking screens, and Figma is actually really straightforward. Here I have a simple example. On this home screen I have different color shapes. Once I click on one of these color shapes, I wanted to jump to the detail page for each color. Make sure you're in prototype mode. And then select any shape frame text, It doesn't matter. Once you hover over it, you'll see those little bubbles appearing. You can just pick any bubble. It doesn't matter which side you're selecting. Now drag out a connector and simply attach it to the frame you want it to be connected with and let go. And that's it. Figma will automatically open the Interaction details panel for you here. You can further customize your interaction. You can do this right away, or if it's closed, just click on the connector or directly on the interaction in the panel and it will open again. An interaction is always made up of a trigger, an action, and a destination. This is the top part of this panel. Here on click is our trigger. Then our actions navigate to the destination is our frame called Orange. Now I can alter trigger action and destination simply by clicking on them. I could swap trigger from click to drag, hovering mouse Enter and so on. If we want to change screens, then it's usually going to be on click. I'm going to leave it at this for now. My action is navigate to. That means we're going to jump to a new page. This is the one you're probably going to use the most. There's also back, that means you're going to jump back to the previous page. Then there is some more advanced settings you could do with variables. You can scrawl to elements on the same page. You can open external links. You can open overlay and swap them. Then the destination. I could also choose any other frame from this dropdown. However, you'll notice as you're dealing with more frames, this is a bit tedious. I prefer simply selecting my connector and then choosing another frame simply by moving it around. Below is the animation part. This is how are things animated and behaving once the interaction is happening. Now this is the fancy part, the part where you can set up all this magic behavior, things morphing into one another, and so on. However, just a word of caution, micro interactions are really useful. However, I recommend that you first make sure that your actual connection and your usability is working and everything makes sense. Then later on with your development team, you can think about what animations and interactions you would like to add. Because what sometimes just one click in Figma is actually quite difficult to set up in CSS just to have it a little smooth, I'm going to go for dissolve. He can set the time it takes to dissolve into another screen and we could also choose one of the preset behaviors. I'm just going to leave it at ease out for now, which is pretty nice. Let's have a look at what that would look like in our preview. I'm going to select the parent frame, and I'm just going to add a mock up around it. I'm working on an iphone 14 size. Okay, let's hit play. Here I see my home screen. If I now click on my orange shape, I can see that it navigates to the sub page. However, if I'm clicking on Back, then nothing is happening. Let's set up the other interactions as well. Let's jump back to our Figma file here. First of all, I'm going to connect the other two shapes. I'm simply going to drag out a connector. And you can see that Figma saved the presets that I just used for the orange one. This is really nice and helpful to speed up your work. The next thing I want to do is if I click on back, I want to jump back to home, or actually wherever I came from, I can select all of these buttons at once. If you hold down shift, you can select multiple. Now I could either drag out the connection from here or I can click on the Interactions Plus button in the right hand side properties panel here, I can set the interaction. And I'm simply going to go for back. Let's jump over to our prototype that's working just perfectly. 62. PROTOTYPING - 04 Dropdown menu with overlays: Let's have a look at Overlays and Figma. Perfect example one. Overlay is a menu. It's basically its own frame. But if we click, for example, on work, we don't want the entire frame to change to this menu. But we want the menu to appear below our navigation. Here, we pretty much set them up as any other connection. Let's select Link over to the menu. Now on click, instead of navigate to, we choose Open Overlay. In the Overlay menu, I can now choose the position center, top, left, bottom, and so on in relation to the parent frame. Or I can also choose manual, which is what I would need here. I can now see this little preview of my overlay. And I can position it on the frame as I need it. I can choose that. It closes automatically when someone clicks outside, any area around here. I could add for a menu that doesn't really make a lot of sense, so I leave it as usual. I can choose my animation, so I'm going to have this also as dissolve as usual. Okay, let's have a look what that will look like. Let's hit Play. I can see that if I click on Work, my menu appears. And if I click again on Work or anywhere else on the canvas, it's going to disappear again. I can now simply connect any of these sub menu here to a new screen. 63. PROTOTYPING - 05 Animation types: Different kinds of animations. In prototyping, we have the option to change the kind of animation per default is always set to instant. Let's hit Shift and space bar and then we get our in file preview. If I click on here, you can see that I have an instant change. By the way, if you press R, then this is going to reset. Let's change from instant to dissolve. And you can see I get some more options. This is the time it will take to dissolve. Then here you can see I can choose the kind of ease in, ease out and so on. Let's click on that to have a look. You can see that I'm getting this much smoother animation. Further on you get the so called moving animations. Move in, move out, push, and so on. Let's take push, you can see that you get a little picture with the moving animation. You can choose from where it's going to push, for example, from bottom up or from left, right, and so on. Now let's have a look. You can see that this pushes in the entire new screen. Now I want to highlight one last animation, which is Smart Animate. This is really the magic one. What Smart animate does is it looks for layers with the same hierarchy and name between different frames. Or also inside of component set between different variants. Then Smart animate magically animates things like color, size, position, and rotation. Let's reset our frame and have a look what smart animate does. We can play with the speed, and you can see that we're getting these really nice, smooth animations. And we can also play with our triggers. I'm going to get rid of this animation. I'm actually going to select the entire frame to animate into this frame. And I'm going to say, after delay of, we're going to keep it at the same smart animate. I'm going to say if I click on this image here, then it's going to smart animate over here. Let's open our preview. You can now see it automatically animated from the first to the second screen. Let's do that again. Now if I click on the thumbnail, then it's going to smart animate from the second screen to this third screen. The important part for this to work is that you need the same name and hierarchy level between your different screens. Now it doesn't matter if within one hierarchy level, for example, you would move the images around. Or if you have an auto layout frame or a standard frame. The important part is the same name and the same hierarchy for smart animate to function. If we have a look then at our second screen. If we unclip the content, we can see that, for example, this text has always been here. Otherwise, it could not animate in that nicely. It would still animate. It would show up, but it wouldn't have this nice moving animation. The same from my images. If I want them to move, then first of all, they need to keep their hierarchy so they're still inside an image group and they still have the same name. Then the ones that are invisible, I simply set the opacity on the second frame to zero. You need to be quite smart about showing hiding, and positioning your layers to get the right animation. This is why I would also recommend to keep your prototyping separate from your design. 64. PROTOTYPING - 06 Interactive components: So far we've used animation between different frames. Now I'm going to show you one of my favorite features, interactive components. They're basically re, usable animations set inside your component as the name states. For this to work, we need components or rather component sets with variants inside. If you're not familiar with this, a variant set is basically two components. Two or more components actually you can see here, I use the naming convention, button forward slash default, button forward slash hover. They are of the same family, that just a different state of the same thing really. Then over here on the right hand side, I can say combine as variants. The great thing about this is if now pull out an instance here, then you can see that within this button, both instances are just saved as different states across my design. I'm going to use many instances of those elements. I cannot only save the different states they have within this instance, but I can also save the behavior I need to be on my prototype settings. And then for example, to save a button behavior hover state, I want to add. I'm simply connecting my two buttons as I would do before with any other frame. Now you can see that in my menu says on click or I'm going to change this to while hovering. And it has changed to set this change to here is only going to be active within component sets. Now I can use instant dissolve or smart animate. I'm going to use smart animate as it's simply a color. Let's have a look what this does, that we can view this in our preview mode. I need to draw a frame. I can now add an instance of my button to this frame. Now let's have a look. I hover over my button. You can see that I have this behavior safe here. And this is going to be the same wherever I use this button, okay. Now I want the same for my switch here, but I want this to be dragged over here and then turn into this switch. Now in this case, I don't want the entire switch to be activated, but I want to take this little bubble here. I want to select this bubble, draw out an animation. And you'll see it will say on click in this case I want on drag change to and want to smart animated over here. Now in this case I need to return the favor on drag, it's going to turn back into my original state. Now what I'm going to do is I'm going to drag out an instance. Place it on my frame, and let's have a look if that works. Here is my toggle. I drag it and you can see that it changes the color with smart animate. 65. PROTOTYPING - 07 Figma Mirror – Preview on your device: A Figma has a fantastic app that lets you preview your prototypes on your mobile, go to the Figma website, and under products you find the tab downloads. Within downloads, you can either download the IOS or Android version of the app to your phone. Once you open the mobile app, you're prompted to login. For the login, just use your standard Figma login. It's actually important that you use the exact same login as you do for your working files, otherwise mirror is not going to work. You will then see an overview of the files on your account. However, have a look at the bottom right and click on Mirror. Once you click on Begin Mirror, this will mirror any frame that you select at this moment in your desktop app. Any prototype settings will automatically be visible here. I love having this open while working on my mobile designs. This allows me to see and test my design in a more realistic way while designing. Just make sure that you check that the size of the frame you're designing on is actually the correct size for the mobile phone that you're using. In my case, I have a physical iphone, 14, therefore my screen is also set to those dimensions. The app will scale up and down your design. It will look real even if you're using another size. However, this can really lead to errors when it, for example, comes to testing touch target sizes. You can also share your mobile prototypes via the link. Make sure that you copied the link from the presentation view. It will then automatically open in the Figma mobile app if installed on a phone. Again, make sure that here, the size of your prototype corresponds with the physical size of the phone being used. You don't need to worry about resolution in this case, because the link goes back to Figma, which takes care of that. 66. SHARING - 01 Sharing and inviting others: One of the great advantages of Figma is that you can invite others to your files, teams, and projects, and collaborate in real time inside your Figma design file. On the top right hand side, you'll find the Share button. Just click on it and you'll open the Sharing menu. In here, you can see who already has access to this file and you can also see if they have edit or view mode. If you're admin you could change this. We can invite others to our file by simply adding their e mail address and then choose between view or Edit rights and send invite. You can also set the rights for the link and then simply copy that link to invite down here via copy link. If a person is both invited to a file and given direct link, then the invite permission always overwrites the link sharing permissions. If someone is working in the file the same time as you. Then you'll see their cursor moving around and you'll also see their icon in the top right corner. For developers, the interesting part about our design is deaf mode, You can toggle on deaf mode in the top right hand corner. The design in the canvas will still be the same, but we will get other panels instead of layers and we get more information in a properties panel targeted for development. You can also invite, right from here, click on the Share button, which is now green. Here you find the settings you're already familiar with to invite the deaf mode. Besides sharing single files, we can also invite and share either our entire team or our projects. Let's start with the project. Here I'm in the project where you can see my file is held that we've just been looking at. Now in the top right hand corner, I can click on Share. And then I get a similar sharing window where I can choose view or edit rights and either share a link or invite via e mail, just as before. Pretty much. I can also share the entire team in the team, again, I find my invite button at the top right corner. And by the way, these buttons tend to change around a bit. You might have to look for them in other locations as Figma updates their user interface. Here you can see, again, we have a copy link, or we can invite by e mail. You can also see all members that you invited to this team, and you can change their permissions further on. You can click on Settings. And here you can set up more things like for example, enable team white libraries, change your billing plan and so on. Anybody you invite to a team will have access to all projects within that team and hence all files within those projects. The same for projects. If you invite to a project, then they'll have access to all the files within. Depending on the Figma plan you're on, you're going to see variations in the available features. The user interface might also look slightly different. Certain invites, such as edit rights, might come with a price tag attached. Make sure that you check with the current pricing regulations and your plan before inviting. 67. SHARING - 02 Setting up a thumbnail: Adding a thumbnail per default. Figma gives you an overview of what's inside of your file as a thumbnail. Now you might have seen in some files that they have a nice thumbnail stating a name and giving a little overview. Let me show you how that works. Let's jump into this design file here. Now you can see I already set up a thumbnail. I could add a separate page and call this home and add it on here, or I can just have it together with my design. It doesn't matter. The thumbnail is just a simple frame with the size of 1,600 by 960. I then like adding things like a category. This, for example, would be a design file, then I like adding a project name, a short description. It's also always a good idea if you're team with many to add who is responsible or who edited this file Lust. Now on the right hand side, I like editing an image. And you can really set all of this up however you like. It's just a frame, basically just another design. What I like doing is I add a little bit of info of what this looks like. Just copy some representative screens or just a representative component in here. Then I can just resize this. Remember the trick is, hit K and I'm in the scaling menu now. Now I can scale this down. I'm just adding it to this frame to give a little more context. Once I am happy with my design, then I simply select this thumbnail, right click in the menu. You find sets thumbnail, you'll see this little thumbnail icon next to its name. If we now jump back to home, you can see that I now have my thumbnail set up. If you visit my community page at Figma.com forward slash at Moon Learning, you can see the Moon Learning file labeling set and you can get a free copy. You can find different file labeling tools in here and amongst those, our thumbnail in light and dark mode, you can pull out an instance. Make sure to detach it, because otherwise it won't let you save it as a thumbnail. You can now alter it with your own design and use it as your thumbnail. 68. LIBRARIES - 03 Shared team libraries in Figma: In Figma, we can create shared team libraries. Shared team libraries are a way for teams to create a centralized library of design assets that can be shared and reused across multiple design projects. You could store your variables, styles, and components in external libraries. Your colors, typography, set up, and any components from icons, buttons to cards and navigations. An update of the variable, style or component in the shared team library would result in a prompt to update any design file that uses this style component or variable. You can work with one or many team libraries. It's important to note that to use a shared team library feature in Figma, you'll need a Figma pro plan or above. This means that additional costs may apply depending on the number of editors you have on your team. Please make sure that you check with the current Figma pricing plans for more information. 69. LIBRARIES - 04 Setting up a shared team library: Let's create a shared team library in Figma. Here I have an example file. This is simply a Figma design file that contains two components, a button and a card. Jump to the Assets panel right next to Layers, and you'll see the little book icon. Click on that and you open the Team libraries and click Publish. You can now add a descriptive message of the changes you're making. I'm just going to name this first Publish. You'll see a summary of the components you're about to publish, and you could check or uncheck them. If you're ready to go, simply hit Publish, and that's it, you publish the library. If you have a look at your files thumbnail, you can see that the normal design files have a blue thumbnail. And if it's published as a library, it's going to turn black. You could always unpublish, simply jump into the file, go back to the team library icon, click on your library and select Unpublished, But we're going to leave it as a library for now. Little tip. Any components you want to exclude from being added to your team library, simply use an underscore. 70. LIBRARIES - 05 Connecting to a shared team library: Let's connect our design files with a published shared team library. Connecting libraries is really easy. Here I'm in a design file and you can see I have a frame and I have some text here. And I want to use my components from the library to remind us this is the button and the card in the shared team library that we just published. I simply jump to my assets panel and click on my team library symbol. This is going to display all the libraries across your team. This is quite a bit for my file, you might only see the library that you just saved, which in our case is library version one. Simply click to add your library to this file. As you can see, you could add multiple libraries. You can close this window, and then in the Assets panel, you can see the components from that library, and you can simply drag them over onto your canvas. This will create instances for you. Let's overwrite our content, the images, as well as the text. I'm just going to speed this up a little bit for you. Let's also change the button text slightly and move it into position. I'm also going to use unsplash Plug in and add some images for my authors. If you select any instance on the right hand side next to the instance name, you'll see a little symbol that says go to main component in Library. If you click it, it will open up the original library with the main components. 71. LIBRARIES - 06 Updating shared team libraries: We can also make changes to our libraries and update across all files using them. Here I'm in my shared team library and the components of this library are already used in design files across my team. Let's just change the layout a little bit and let's move this part up to the very top. Let's take the line with it. You will now see that in the Assets panel, there's a little bubble indicating that we need to update our changes. Click on the library book icon and then click on Publish. You'll now get an overview. We can see which items have been changed. So this is our card component and we can also see unchanged components. Before we publish, make sure that you add a short description. Now click on Publish. If we jump back to our design file that uses any of those components, you can see that at the bottom you'll be prompted to update. It says components update available and let's review. You can now either update all changes automatically. But there is another nice little feature, If you select any of the instances, you'll see right next to the instant name and the properties panel, a little circle appearing that says Updates available. Click that, you can select Review Updates. You now get a side by side view of the changes made in another little feature I like, especially if you click on Overlay, you can get the components on top of each other. This is really handy when you're dealing with little changes in padding. I'm going to accept that change and simply click Update All. Now my design is aligned with the current version of the library. Again, you just need to make sure that in your team, everybody working in the component library publishes necessary updates and that everybody consuming styles, variables or component from libraries also accepts and publishes those updates in the design files. 72. SHARING - 07 Sharing design, components, styles, and variables: Let's have a look at what we would share. How would we document our design components? Styles and variables. Let me give you a quick overview of a file. Let's start with components. We either store our components on our own separate page within our design file, or we store them on an entirely separate file. We can connect a separate library file with our design files, wire shared team libraries. Wherever you store your components, I recommend that you place them on sections. This will create folders in the assets panel, making it much easier to keep everything organized for you and anyone you're sharing with you can easily rename and reorganize as your project is growing without losing connections to instances. Plus you can also always add more information about your components to those sections. But don't stress too much about this in the beginning. Start with simply placing them onto their own section. Another benefit of sections is that you can mark them as ready for development. The same principle applies to our styles and variables. They can be stored locally in the same file. Clicking on the gray canvas area provides you with an overview in the right hand side panel. Alternatively, you can store them in external files connecting via shared team libraries to design files. Unlike components, there is no connection to any canvas element for styles and variables. Nevertheless, I strongly recommend creating an overview for yourself, other designers, and developers, for our color variables. This would be a color style sheet. Then I add a typography hierarchy and information about common spacing and layout rules. You can also include other rules or other styles like blurs, shadows, and gradients. This not only helps convey technical information, but it also provides insights into the designs use and underlying system. As always, with design, establishing a visual and functional hierarchy is crucial. Now, in addition to these guidelines, we obviously want to share our designs. For mobile design, I just use one. But for web apps and websites, I typically have two master screens, one for mobile and one for desktop. There's no set rules, adapt that to your project needs. This is one figure page providing an overview of all screens. Some teams also have a page per feature. Again, absolutely up to you how to structure this. I can also use sections to structure my designs and mark what is ready for development. If you're working with prototyping, I recommend adding another page for your prototypes or maybe even another file, as it may involve some tweaking and additional screens. By the way, I usually prototype critical workflows like sign ups and specific features, rather than the entire product. You can use flows to mark the different sections in your prototype. I personally like setting aside a page in my file as a playground area for testing responsive behavior and any uncertainties. However, I only include them into my component documentation or design documentation if they're relevant. I also use some sort of file management system where I can add headlines and some additional information with bullet points. That's it, you're ready to go. 73. SHARING - 08 Dev mode Sharing with development: How to share with developers using Deaf mode. Please note that Deaf Mode is not included in the free plan. Here I have my design, which is set up of components which are stored in another page to enable better sharing with development. Figma has a so called deaf mode. You can switch on deaf mode if you click on the toggle in the top right corner of your screen, you'll have the same design overview. But you'll see that your panels on the left and right slightly changed. If we select any element, then we can see that in the right hand side, we're getting information that's appropriate for development. Let's have a closer look. First of all, we can see up here, this is a component and we're using an instance. We could jump to the main component by clicking on the component icon here, you can see it automatically jumped to the other page and is showing me the detailed component. We can either inspect the component or the instance here. For example, if I select the text, then you can see I am getting the color, in this case the variable, the font family size, and so on. By the way, you can choose whether you want this information displayed in CSS in IOS, Android, or also in Ram, or Pixels. This is nothing that you need to worry about, but this is something that your developers will find very handy to set up. If we further click around our component, you can see that all the little distances and spacing that we set up are nicely displayed and can simply be copied. Let's jump back to our instance for now. You can see that also just by hovering over our instance, we're getting all this information as well as a distance to any neighboring items. Another feature I really love is that if you select any instance that is part of a component set, you get a little button called Opening Playground. In that playground, you can see the different variants of that component set. Once you start setting up even more complex components with component properties, then this is also going to display here. Another great thing is that all your assets, for example, images, or up here you can see our little kin are really easy to be downloaded. You don't need to export assets separately anymore. You can see that this is automatically going to download as an SVG. And if we select this image here, then you can download it. Png JP or so on. You can also click on Export, and you could even choose any other resolutions. For higher screen resolutions, you could go for 2x3x and so on. Export that in any format needed. Again, nothing that you need to worry about as a designer, because now your developers have all of these tools at hand. This is all the nitty gritty bits. And you could even link, for example, to deaf resources in here, you can add a link if you already have components set up, for example, in Github, you can connect to tokens and so on. This is a really, really powerful space and I highly recommend that you sit down with your development team and have a look at this. Besides that, it will also help you with the overall communication. So you can see here right now it says ready for development and we have nothing marked. Well, if we jump back to our design mode, then what we can do is we can draw a section around any design you find section in your Frame menu, or you can use a shortcut Shift S. Now let's say this desktop version here is already finished. But actually my mobile one I'm still working on, I drew a section around it and we can change the background color to make sure that we can see this a little better. If you hover over the section, then you see this ready for development. It also shows up in your top tool bar. If you click on that, then this section and anything you place on it now is marked as ready for development. If we jump back to deaf mode, then you can see in your left hand side, we now have everything that's ready for developers to be inspected. As soon as I am ready with my other frames in my design, I could simply add them to my section. And by the way, you can add as many sections as you want. If I jump back to ready for development again, then you can now see that both of them are marked here. If I click on them, I'll zoom in and I can inspect as further. Another feature I really love is that it shows you any changes in your design. Let's jump back to our design and just change this around a little bit. Let's just say I am changing the padding here. The space between is now larger, something really subtle. If I go back to my death mode and I select this design, I can now see here compare changes. Let's click on that. You can now see that some slight changes were added. Sometimes they're really subtle here, I really like using the overlay feature. Now we can see the changes and you can see this small change in padding. It's also going to tell me here the card group, you can see that the stack spacing changed 24-40 In addition, I always recommend that you add some more information about your components and give an overview with style sheet of things like the use of color and typography hierarchy. You can share right from deaf mode simply by clicking on the Share button. 74. PROJECT Part 5: Prototyping: Let's turn our course project into an interactive prototype for the prototyping. Make sure that in the pages you jump to the prototyping page. Here you find as usual the exercise as well as a solution on the right. If we select the first screen in the solution, we can either hit Shift and Spacebar and open our preview. This is a really nice and quick way to run through this inside of your workspace. But it's actually probably nicer to jump into presentation mode. Just click on the play button on the top right, and then you will get your prototype display. In presentation mode, you can scrawl and you can also click on your prototype and interact with it. This is what we're going to be building. Let's first make it scrollable and fix certain elements like the tap bar. First of all, I'm going to select all the screens that had overflow content. Remember, you can unclip over here and you can see any content that goes beyond our viewpoints. We now jump to prototype here. We can set this to vertical scrawl. If we select this frame and hit Shift and Spacebar, then we get our preview. Now we can see that this does scrawl. However, it doesn't scroll far enough because it basically doesn't respect that. Down here I have this Tapa. What I need to do is I need to give it some sort of buffer, some sort of extra space. And there are several ways you could do this. You could simply draw another frame in the background that is larger, or what I did is, let me unclip this so you can see it better. I basically packaged these card groups here. I called it Card Group and put a frame around it. So what I'm going to do now is I'm going to hold down command or control on windows and I'm just going to add some extra space. This is basically just going to use up the space. Now have a look at what happens if I now scrawl again. Now it's working. This is also one of the reasons why I would always recommend to have the prototyping on a separate page because we're going to tweak quite a bit in your designs. All we need to do now is to connect them. I added some errors here. I'm going to select this thumbnail, make sure you're in prototyping, and then you see the little bubbles. And I'm now going to connect with this one. I'm going to navigate two on Tab. By the way, you might see click here or Tab, it's exactly the same. Navigate two landing page, and I actually want this to dissolve. Might probably see instant here, that's the default. I want this to dissolve. Then from here I want to open an overlay. Notice that this is a little shorter than the other frame. I want this to move in and be laid over this original design on tab. That's correct. Now we need to change this to open overlay the overlay. This is simply the name of this frame. I want it to move in from the bottom. I have a bottom center. Yeah, that's correct. I have close. When clicking outside, I added a background of 50% you can reset scrawling position. That just means it's if you go back, it's just going to go to the top here again, which is quite nice. I'm going to do two more little things. I'm going to select this one here, and I'm going to add an interaction. And I'm going to say on Tab, go back. It's going to go back wherever it came from