Learn Figma: User Interface Design Essentials - UI/UX Design | Arash Ahadzadeh | Skillshare

Learn Figma: User Interface Design Essentials - UI/UX Design

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
119 Lessons (7h 10m)
    • 1. Introduction to the course

      2:01
    • 2. Introduction

      2:42
    • 3. Structure of the course

      1:10
    • 4. Tools

      0:48
    • 5. Intro to Design Basics

      0:28
    • 6. Layout

      2:00
    • 7. Visual Hierarchy

      5:02
    • 8. Visual Noise

      1:25
    • 9. Iconography

      1:01
    • 10. Typography

      3:09
    • 11. Color Contrast

      1:36
    • 12. Color Palette

      2:17
    • 13. Spacing

      1:12
    • 14. Composition

      1:25
    • 15. Design Guide

      0:40
    • 16. Consistent Fonts

      0:57
    • 17. Consistent Colors

      1:00
    • 18. Consistent Icons

      1:35
    • 19. Consistent UI Elements

      0:44
    • 20. Font Resources

      0:48
    • 21. Color Resources

      0:46
    • 22. Icon Resources

      0:57
    • 23. Introduction to Figma

      1:03
    • 24. Figma Requirements

      4:39
    • 25. Figma Environment

      4:28
    • 26. Shapes

      9:15
    • 27. Editing Shapes

      7:20
    • 28. Layers Basics

      6:38
    • 29. Boolean Operations

      4:59
    • 30. Text

      4:36
    • 31. Text Inspector

      4:57
    • 32. Text Style

      3:56
    • 33. Constraints and Adaptive Layouts

      5:24
    • 34. Auto Layout - New

      10:54
    • 35. Images

      4:44
    • 36. Styling: Fill

      3:33
    • 37. Styling: Stroke

      1:34
    • 38. Styling: Effects

      5:32
    • 39. Color Style

      3:56
    • 40. Masks

      2:29
    • 41. Components

      8:39
    • 42. Layout Grids

      2:26
    • 43. Plugins

      9:14
    • 44. Exporting

      2:06
    • 45. Prototyping

      5:52
    • 46. Multiplayer & Commenting

      3:04
    • 47. Keyboard Shortcuts

      3:50
    • 48. Intro to UI Elements

      0:32
    • 49. Text Fields

      1:29
    • 50. Buttons

      2:06
    • 51. Sliders

      1:29
    • 52. Tooltips

      1:02
    • 53. Selection Controls

      1:19
    • 54. Chips

      1:11
    • 55. Cards

      1:04
    • 56. Dialogs

      1:06
    • 57. Lists

      0:58
    • 58. Tables

      1:08
    • 59. Navigation

      0:50
    • 60. Menus

      0:50
    • 61. Charts

      0:52
    • 62. Steppers

      1:03
    • 63. Snackbars

      1:21
    • 64. What is Wireframing?

      0:59
    • 65. User Flows

      1:08
    • 66. Interactive Prototypes

      1:02
    • 67. Wireframe tools

      0:59
    • 68. Wireframing in Figma

      5:02
    • 69. What is a Color Style?

      0:31
    • 70. Primary, Accent, Semantic Colors

      10:12
    • 71. Grey Colors & Gradients

      4:17
    • 72. Borders & Shadows

      5:31
    • 73. Intro to Typography Style

      0:25
    • 74. Typography Guide - Part 1

      4:00
    • 75. Typography Guide - Part 2

      2:21
    • 76. Designing a Modern Finance App

      2:17
    • 77. Launch Screen

      1:59
    • 78. Sign-in & Welcome Page

      21:33
    • 79. Sign-up Page

      6:07
    • 80. OTP Verification Screens

      11:56
    • 81. Profile Screens

      13:04
    • 82. Homepage

      19:44
    • 83. Menu

      10:51
    • 84. Credit Cards Page

      13:56
    • 85. Transactions Page

      10:37
    • 86. Detailed Transactions Page

      9:42
    • 87. Transfer Page

      7:00
    • 88. Confirmation Page

      3:41
    • 89. Notification Page

      6:59
    • 90. User's Profile

      4:17
    • 91. Onboarding Pages

      7:57
    • 92. Logo Types

      2:20
    • 93. Designing Our First Logo

      2:59
    • 94. Designing Our Second Logo

      2:48
    • 95. Designing Our Third Logo

      1:52
    • 96. Introduction to Adobe Photoshop

      0:32
    • 97. Environment of Adobe Photoshop

      1:21
    • 98. Basics of Adobe Photoshop

      7:40
    • 99. Adobe Photoshop For UI/UX Design

      5:54
    • 100. Intro to 3D Modeling

      2:10
    • 101. Create Your First 3D Model

      4:17
    • 102. Camera & Lightings

      2:16
    • 103. Materials & Textures

      1:55
    • 104. Create a 3D Scene

      5:40
    • 105. Rendering & Exporting

      3:34
    • 106. Prototyping Tools

      0:58
    • 107. Prototyping in Figma

      4:27
    • 108. Mocking up an App in Figma

      1:28
    • 109. How to Create Your Own Online Portfolio?

      1:17
    • 110. How to Use Dribbble?

      0:57
    • 111. How to Use Behance?

      0:58
    • 112. How to Get Your First Client?

      1:18
    • 113. How to Start Your Own Business?

      1:37
    • 114. How to Scale Your Business?

      1:19
    • 115. Communicating With Your Clients

      0:53
    • 116. Contract

      0:55
    • 117. Where to Find World Class Design Inspiration?

      0:48
    • 118. Image Resources

      0:54
    • 119. What is Your Next Step?

      1:07
146 students are watching this class

About This Class

5d615338

Do you want to become a UI/UX designer but you don't know where to start? This course will allow you to develop your user interface design skills and you can add UI designer to your CV and start getting clients for your skills.

Hi everyone. I'm Arash and I'm a UI/UX designer. In this course, I will help you learn and master Figma app comprehensively from scratch. Figma is an innovative and brilliant tool for User Interface design. It's used by everyone from entrepreneurs and start-ups to Apple, Airbnb, Facebook, etc.

By the end of this course, you will be able to create world-class User Interface (UI) and User Experience (UX) designs. Throughout the course first, you will learn about all the Design Basics, UI Elements, Typography, etc. and then we will work on real-world projects together.

Moreover, we will design a finance app completely from scratch and I will share with you all the necessary techniques and hidden secrets you need for mobile application and web design.

This course has been designed for people completely new to UI/UX design or let’s say design in general. We will start with the most basic principles and work all the way through, step by step.

We start the course by explaining the differences between UI and UX design. And then we will start learning about Figma app in Figma Academy section. After that, we'll create a simple low-fidelity wireframe to understand its usage and benefits.

I’ll go over all of the essential tools necessary for creating an amazing User Interface (UI) and User Experience (UX). Not only will you learn about Figma app, but also you will learn about Adobe Photoshop, Vectary, Dribbble, Behance, etc.

The Design Basics section covers all the necessary principles, including: Layout, Iconography, Typography, Color Contrast, Composition, Spacing, etc.

One of the interesting parts of the User Experience design process is micro-interactions. I will teach you how to use InVision Studio for creating this kind of interaction.

With over 7 hours of content across 130+ lectures, I will take you from beginner to expert, and teach you everything you need to know in order to use Figma in a professional manner.

An amazing course for people with zero design experience, or for experienced designers that want to learn and master Figma and want to become a User Interface designer. By the end of this course, you’ll have a complete, real-world project for your own portfolio, and every student will have the knowledge and confidence to apply for a UI/UX designer job.

Course highlights:

  • Mastering Figma App

  • Tips & Tricks, make most of Figma Tools

  • Colors, Iconography, and Typography

  • BONUS! Get 2 brand-new UI Kits worth $3000.

So, what are you waiting for? Start the class today!!

Transcripts

1. Introduction to the course: If you want to become a U R ux designer, you are in the perfect place. Thes complete course will teach you all of the essentials with, well organized, an easy to follow tutorials. Hi, my name is a rash, and I'm a UX designer. Together, you and I are going to learn how to become a user interface designer using the software figure. The's course has been designed for people completely new to your UX design or let's say design in general. At first we're going to learn about the design basics and you elements, and then we will learn about Figure Mama and all of its hidden secrets together. Then you will learn how to create a simple wire frame. From there, you will learn how to set up your Stein guide and how to apply your colors appropriately to your design. You will also learn about all the principles off mobile application and Web design, and then we will design a finance some together, and I would share with you all the necessary techniques and secrets for designing a world class application. Moreover, you will learn about both simple and advanced micro in directions. We will also talk about markups and how you can create your own on nine portfolio without writing a single line of code. In addition, you will learn about three D modeling and creating augmented reality scenes. And last but not least, you will learn how to start your own business and get your first client as a you on your X designer. So during the scores, we will wire frame design and prototype a finance mobile application to develop your design skills and master all the necessary tools. Additionally, you will get access to two brand new you I ke. It's worth more than $3000 you can use them in your commercial project. So I hope you're ready to learn new skills and become a user interface designer. I see you in class. 2. Introduction: Hi, everyone. Welcome to the first chapter of these course In these section, we're going to be talking about the differences between you, I and UX design and the course structure that you can understand how the course is organized in order for you to follow it up properly. And last but not least, we're going to be talking about the tools and requirements that you need to know to proceed the course. So without further ado, let's get started. First of all, I'm going to talk about the differences between you I and UX design. Although both elements are crucial to a product and work closely together, their roles are totally different. Your ex design is a more technical and analytical field. However you I design refers to graphic design with more complex responsibilities. So let me give you an example. If you consider a product like a car, the chassis is the code, which gives it a clear structure. The other parts, such as doors, full filter etcetera, represent the UX design, which lets the car function properly. On the other hand, you ideas nine represents the appearance of the car. It's sensors, etcetera. In other words, you X, which stands for user experience, is about how a product should work. And you I, which stands for user interface, is about how a product should look. So you, as a product designer, should know how these two terms work together and how to distinguish between them. For instance, you should know what are the responsibilities off a UX designer. And on the other hand, what are the responsibilities off a U I designer? As you can see in the pictures, we have two different screens. The left one shows us how the product should work. For example, suppose that you have a screen with two buttons and to text fields. Okay, the U X shows us how these buttons should interact with the user, and the right picture is all about user interface, and it shows us how the product should look. For instance, here we have a button and a square. The your eye designer decides how big this button should be or which color is suitable for that square. These are the you I designer responsibilities. All right, thank you so much for watching this video. And I will see you in the next video 3. Structure of the course: Hi, everyone. In this video, we're gonna be talking about the structure of the course. As a matter of fact, you can divide the course into two main sections. The theoretical part and the practical part. The theoretical part creates 10% of the whole course, and the practical part forms 90% of the course content. So instead of focusing on theories, we will focus on practicing the skills you learn by working and different kinds of projects . In the theoretical part, you will learn about design basics, your elements, business ideas at Centra. And in the practical part, we will design a complete mobile application from scratch. We also talk about wire framing three D modeling logo design and so much more. So if you're a complete beginner, I highly recommend to watch the theoretical part first and then proceed with the course. On the other hand, you can skip the theoretical part and jump into creating a project. All right, guys, thank you so much for watching this video. And I will see you in the next video. 4. Tools: Hi, everyone. In these video, we're gonna be talking about the require tools for completing this course. In these course, we're going to use different graphic design tools to design world class user interfaces together. The main cell for which we're going to use is called fig MMA, which is available for both Mac OS and Windows. You can even use it on your browser without insulation. Furthermore, you don't need to pay for it. It's totally free. The other tools that you will learn about our victory and adobe for the shop. We will also talk about useful websites such as dribble be hands, etcetera. If you don't have any of the above mentioned suffer, make sure to insult him before starting the course. So see you then. 5. Intro to Design Basics: Hi, everyone. Welcome back to another section of thes course. In these chapter, we're gonna be talking about layouts, iconography, typography, colors, composition and so much more. If you want to become a professional and great, you are ux designer. You need to start off with design basics. So now that you know the importance of knowing design basics, let's start thes chapter. 6. Layout: Hi, everyone. In this video, we're gonna be talking about layouts in design. When it comes to you are UX design. The way we show the information in a nap or website is so important. As a matter of fact, there is not a specific right way to create your own composition, so you can easily create a layout based on your own need, as long as it is consistent and understandable to users. As you can see in the pictures on the right, both screens are well designed. Although the spacing is different, the composition is absolutely clear and consistent. You need to pay attention to consistency a lot. While you're designing a user interface, no matter what kind of platforms you're designing for the same rules, apply to all of them. All right. Now let's check these pictures out as it can see in the Left picture that the senses are quite consistent. For instance, if you look at the distance between the profile image and the top of the screen, you can realize that the value is 50 pixels and also the D since between the same profile image and the text field right under that is again. 50 pixels. As you can see, the layout of this design is quite clear. And the reason of that is because of the consistency of spacing. In the next lectures, we will also talk about spacing and the importance of that in design. Now, if you look at the right picture, you can realize that the design is also clear. In that layout, However, the only difference is the colors and the spacing. But as you may have noticed, the spacing is again consistent. All right. Thank you so much for watching this video. I will see you in the next video. 7. Visual Hierarchy: Hi, everyone in these video, we're gonna be talking about visual hierarchy. Visual hierarchy is about how we look at designs. Does it sound? Were. So let's put it in another way. We, as designers, should put ourselves in users shoes in order to realize how they see our designs. Content in any digital page layout will pursue a particular hierarchy. For instance, menus go to the top bottom left or right of the screen, or a combination of these headers appear above body tapes. In other words, hierarchy is a simple way of staying organized from most to least important. Remember that users defined hierarchy of any app or website. The item that first grabs the user's attention is at the top of the hierarchy. The visual specifications that the designer can utilize to influence users, understanding of the information, our size, the larger the element, the more attention it will attract. So if you're familiar with the HTML and what development process, you may know that we have six kind of headers from H one to H six. H one is the largest header, and H seeks is the smallest on. So when we want to get so much attention. We will use each one. For instance, suppose that we want to get the user's attention to a specific section or specific item, so in that case we will use the larger header. Or on the other hand, sometimes we don't want to get so much attention to a specific section or content. In that case, we can use the smaller header so size is so important. The next item is collar. Bright colors are more noticeable than muted ones. If you do not have enough information about colors, you don't have to worry about it because in the next lessons, we will cover all the necessary information about choosing the right color in your design. The next item is alignment. An element with a different alignment of others will attract more attention. So what does that mean? Suppose that you have a layout off, Let's say, four different videos or four different photos. If you align Onley one off those videos or those photos differently, it will draw more attention to it. As a matter of fact, in that case, the user can realize that something is different. The next item is contrast. Sharply contrasting colors will catch the eye easily. Contrast is a very, very important topic in you I design, and we will talk about contrast in next lessons. Deeply. The next item is proximity Elements, which are placed closely together, appear more related. And that's true. If you look at the pictures on the right side, you can see we have two different screens. Let's focus on the left screen. As you can see, we have two different sections, new promotions and new stories. Can you realize that elements in both sections are placed closely together so that users can easily understand that they're related together? The next item is repetition. Repeating styles can indicate that content is related. So what does that mean? Let's look at the pictures on the right. Can you see that we have four squares at three circles, so the user can easily recognize the relationship between those elements. And the next item is white space, which is another important term in ur ux design. More space between elements will draw more attention to them, so let's look at the pictures on the right. But this time we need to distinguish between the left screen and the right screen As you can see in the left screen, we have enough space. Or let's say, enough whitespace between our elements and our sections so the users can easily wife through the user interface. However, on the right screen, you can see that all elements are very, very close together. And there is not enough white space between all elements in that kind of layout. All right, thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. 8. Visual Noise: Hi, everyone. In these video, you're gonna be talking about visual noise in design. Visual noise, as you can guess from its title, is all about a screen or part of a digital product, which has so much information and many elements on it. When you're designing an APP or a website, you need to pay attention to details a lot, because by the end of the day, we want to design a screen which is user friendly and easy to walk through. So make sure to eliminate all the unnecessary elements or information from your screen. If you're not sure whether your design has video noise or not, it is recommended to ask for users feedback. If you look at the pictures on the right side, you can see that we have two different screens in the left screen. There is no visual noise, and it is great in terms of you I design. On the other hand, in the right screen, there is too much visual noise. As you can see, there are so many text at the top, and then some items, which could be videos or photos than again some videos. And after that, some stories and you can recognize that there is not enough white space between those elements. Thank you so much for watching this video. I will see you in the next video. 9. Iconography: high in these video, we're gonna be talking about iconography in design. Iconography is a visual language used to demonstrate aspects, contents or functionality. Arkan's are meant to be simple and clear visual elements that are recognizable immediately . You do not have to redesign well known icons such as home icon, search icon, etcetera or, let's say, do not reinvent the wheel. You can get access to almost all kinds of icons on websites for free or ads reasonable costs. But what if you need it to design some icons specifically for your project? Well, in that case, you should design icons, which are in harmony with your design and other icons. Keep in mind that icons need to be understood easily by users, so make sure to show consistency in your design. 10. Typography: high in these video, we're going to talk about typography. What is typography? Typography transforms language into a decorated visual element. Typography is one of the most important parts of you are UX design, so it is worth your time to learn more about it. When you're designing an app or a website, limit the number of typefaces and sizes you use in order to keep your design simple. Start B two funds at most, one for the headers and the other for the bodies. You can use free or paid funds in your projects, but I highly recommend using free funds. If you will like to use paid funds, check the license carefully. You should inform your clients that they need to pay extra for using paid funds. Now, if you look at the right side of the screen, you can see that I classify the typography foundation for you. Let's check it out. Step by step. Right at the top. We have properties. Every text line in any program has a base line. As you can see, it is indicated here with the blue line, and also it has the letter spacing that you can modify it in your design off course. There are more properties related to typography, however, for proceeding T scores, it is enough to know these two properties. Now let's focus on letter spacing comparison on the left, you can see we have the default spacing. But on the right, I modified the spacing off those letters. Depending on what kind of project you're working on, you can modify the letter spacing as you wish. Now let's talk about the weight off each fund. Most funds have at least three different weight, but some of them have more. For instance, the fund can have six different ways. As you can see on your screen, we have here from light toe, bold and last but not least, declassification off fonts. As you can see, we have two different classifications for funds. The serif, which is the left one in the picture, and the Sand Saref, which is the right one. The picture. So what is the difference? For sure, you can distinguish between them, but let me explain to you in order to memorize the rule off serif and sans serif. Actually, Sarah funds have some kind off flat line at the top off them and also the bottom off them. Or you can say they have feet. On the other hand, sensory fonds do not have this kind of lines. Sands in English and French means without so sans serif means without serif. You as a designer are responsible for choosing the best wave of funds and also the best classifications depending on what kind of project you're working on. Thank you so much for watching this video. I will see you in the next video. 11. Color Contrast: Hello, everyone. In this video, we're going to be talking about color contrast, which is a very important topic when it comes to you I designed. Applying colors effectively is a skill that everyone who works it, visual compositions must have so you, as a your designer into know how to use colors in your projects. When it comes to applying colors, readability and legibility are the key factors. Researchers have shown that vibrant colors enable enough of contrast, helping to increase readability and legibility. Please take into consideration that too much color contrast make us difficulty in reading. I highly recommend that designers should create a meat level of contrast and for highlighting elements they can use high contrast ing colors. You can also use websites to provide you with a ratio when comparing two colors to see whether there is enough contrast or not. If you look at the examples under right, we have six different colors. As you can see, the 1st 4 are acceptable and have enough contrast, but the others are not readable. So when we're designing a user interface, we need to pay attention to callers a lot because sometimes you as a designer, I want to be as creative as possible. However, creativity should come after readability and legibility 12. Color Palette: Hi, Ron. In these lesson, we're gonna be talking about color palette. Creating a color scheme for product might seem like a hard task, especially if you're a beginner. However, in reality, it's not as complicated as many designers think. What is the color scheme you are? Color scheme is a mixture of colors used in your user interface. Almost every color scheme contains the falling groups of colors. Primary colors, secondary colors, accent colors, neutrals, semantic colors. What are the primary and secondary colors? Primary and secondary colors are the base colors of your user interface. The colors, which are used most frequently in your you I design, are called primary Colors. Most designers usually choose brand colors as primary colors. As a matter of fact, it's recommended to have no more than three primary colors. Optionally. You can use secondary callers in order to distinguish your products and make more interesting you. I designs all right, but how to choose colors properly When you're working with colors, you should not create a combination of random colors because the result would not be the one you expect. In order to understand how to work with colors. First, you need to know what the color will ease and how it works. Here are important color combinations you need to know complimentary, which are two colors that are on opposite sides off the color with, and the next one is monochromatic, which are three shades, tones and teens of one based color. And the last one is analogous, which are three colors that are side by side on the color wheel. If you look at the right side of the picture, you can see that we have a color will here. As you can see, we have monochromatic. For example, if you look at the red, we have three different shades or, let's say tens of one based color, and also we have complementary. For instance, here we have purple and yellow, which are on opposite sides off the color with, so the combination of these colors is great 13. Spacing: Hi, everyone. Welcome back to another lesson off these course in this video, we're gonna be talking about spacing in design. Consistency plays a key role in you. I design. So when you're designing, you need to measure everything and keep it consistent. As a designer, spacing is up to you. But once he said it, you need to use the same spacing patterns in your designs. For instance, if you said the spacing between the header and body takes to eight pixels, you should always use the same spacing throughout your project. As you can see the picture, all the spacing has been measured accurately and makes the design clear. For instance, if you look at the picture, you can see that we have 50 peak cells from the top to new pictures title and then eight pixels from new pictures to the top off subtitle and going on and on. So in order to keep your design clear, make sure that you use consistent spacing patterns throughout your project. 14. Composition: Hi, everyone. In these video, we're gonna be talking about composition in design. What is the golden ratio? The golden ratio is a mathematical proportion between the elements of different sizes, which is thought to be the most aesthetically pleasing proportion for human eyes. The golden ratio equals 1 to 1.618 and it's usually illustrated with seashell shaped its piles. This number was used in creating proportions for architecture, paintings, photography, design, etcetera. But how to use the golden ratio in your design? If you have a screen with the with off 1200 pixels, you need to divide it by 1.618 and the result will be 741.6. And now we can say 1200 pick songs minus 741 equals to 459. So we have two sections with the with up 741 pixels and 459 pixels. As you can see on the right side of screening here we have a screen shot off the medium website. Can you see how it has been designed based on the golden ratio so it can get the user's attention to the right place at the right time? 15. Design Guide: in this video, we're going to talk about design Guide. What is a design guide? A design guide is a system that can help you to keep your design consistent. It can also accelerate your design process. The examples you're looking at are only a few components that can be used in your design guide. There are lots of things that can be included in your design guides such as you elements, topography, iconography, sizing and spacing. Color pad. It's etcetera, so having a design guy makes your life much, much easier. 16. Consistent Fonts: Hi, everyone, In these lesson, we're gonna be talking about funds in design. As a designer, you always work with different fonts, so you need to know how to use them properly. As it was mentioned in the typography section, it is recommended to work with two different funds at most to keep your your eyes simple. Whether the best funds for you, I designed number one San Francisco. It is best for modern websites and more by lapse number two Open sense. It is best for websites and mobile relapse. Number three concert. It is best for minimal websites and mobile APS number four Proxima Nova. It is great for modern content centric websites and mobile APS and last but not least, roboto. It is best for modern websites and mobile maps as well. 17. Consistent Colors: Hey, everyone, in these video, we're gonna be talking about colors. Applying colors to your your eye elements is one of the most crucial parts of the U. Y. Design process. Do you remember what was playing a key role in your eye designing your right consistency, so you need to keep your colors consistent as well. For instance, if you apply Blue two titles on one page, you need to apply the same color two titles on other pages or, if we apply, read to purchase button. You should use the same color for any other purchase bottoms on other pages. This is why we need a design guide and the style right. If you look at the picture on your right, you can see that we used a specific black color for titles, and we use a specific color for our bottoms, etcetera. So it is so important to keep your colors consistent 18. Consistent Icons: Hello, everyone. In this video, we're gonna be talking about icons in design. You may think that working with icons is an easy part of the U. I design. However, if you do not pay attention to details, you will not get appropriate. Result your some important points that you need to take care off. Number one. Test the scalability. Check if you're icons can still be recognized at small sizes such as 15 by 15 pixels. Number two properly sized there. Commended Target size for touch screen objects is 7 to 10 millimeters. Also remember to add padding between icons to preventing correct taps. Number three Internal consistency. Use the same color scheme for all icons and also the same styling attributes such as the size of borders. Number four. Perfect alignment. Always try to have perfect alignment in a con. Ah, graffiti. But sometimes because you have icons with different sizes, you need to balance them by yourself. If you look at the picture on your right, you can see that we have two different groups off icons in the left group. You can see that we have consistent iconography because we only use outline icons. But on the other hand, we have inconsistent iconography because we use both outline and solid icons at the same time, which is not true commanded. 19. Consistent UI Elements: Hi, everyone. In these video, we're gonna be talking about consistency of your elements. One of the things that you always work Fifth, while you're designing a user interface is au element. What are the EU elements? Bottoms, cards, text fields, sliders, dialogues, charts, steps, tables, selection controls, menus, snack bars, etcetera. As it conceding the picture. I chose only some of them for you because certainly I could not put all of them here. However, you will learn about almost all of them in the U Elements chapter. 20. Font Resources: Hey, everyone in these video we're gonna be talking about font resource is sometimes choosing the right funds for your project could be tricky and time consuming. So in these part, you're gonna know about the best online resource is to get your funds easily. The first website is called Google Fonts, which is so famous and you can find free funds there. The second website is called my phones and you confined free and paid fonts, ter and last but not least, you can check out the Adibi Funds website which you can find paid Foncier. If you're having troubles repairing funds, you can also use type off or fun pair. 21. Color Resources: Hi, everyone, in these lesson, we're gonna be talking about collar. Resource is now. It's time to look for our colors in order to use them in our projects. Most of the time. Finding good colors is a difficult has for you, I designers, especially if you're a beginner. Here are some absolutely useful resource is for finding colors. Number one collar haunts number two Adobe color, which is so useful by the way Number three I don't know how to pronounce it, but I think it's coolers or collars. Number four Web Grady INS, which is another good website for finding Grady INTs. If you're looking for them, make sure to spend enough time finding the best possible color palette for your projects. 22. Icon Resources: Hey, everyone, in these video we're gonna be talking about Icon Resource is for your design project. As mentioned before, iconography is an essential part of the U. I design process, and it is so important to know where you can find engaging and a standard icons. Here are some useful resource is for finding icons number one flat icon, but you can find paid or free icon, sir. Number two, I can find her, which is another good website for finding icons and last but not least, nuclear, which is an application, and it gathers all the icons for you in one place. Remember that you should use the icons, which are easy to recognize by users. So take your time and check out all the available icons that you may want to use in your project. 23. Introduction to Figma: Hi, everyone. Welcome back to another section of these course in these section, we're gonna be talking about fig MMA. What? ISF Sigma Sigma is an interface design tool that runs in the browser. It gives you all the necessary tools for designing a world class user interface. But it's actually much more than that because of the fact that Fatemeh, in its nature, is an always online tool. It allows for life and riel time collaboration, which is a fantastic feature. All of Sigma is browser based. There are desk aversions for both Windows and Mac OS. I will show you how you could use both browser and desktop versions in the next video. Unlike other tools such as sketch Fig mayes free to use. Unless you need to create more than three projects, you can create unlimited pages and files in the free version are right. Guys, thank you so much for watching this video. I hope you enjoyed it on. I would see you in the next video 24. Figma Requirements: Hi, everyone, and welcome back to another reedy off this course in this video, I'm going to show you how you can create an account on Fig MMA in order to use that for our projects. As I mentioned before, Fig MMA is free to use. However, if you want to create more than three projects, you need to get the professional account, which is not necessary for this course. But the good news is, if your students and your enrolled in a university or a school, you could always create a figment, account for a student and verify your student status and use it for free. That is fantastic. But if you are not a student, there is no problem. You can still use all the features off Sigma with the free account, and you can seal create unlimited pages and files. So how can you create an account? It's so simple. If you open up the Figment website, which is Fatemeh dot com, you can click and sign up, and here you could choose whether you want to sign up with Google account or with your email address and setting a new passport to your account. It's totally up to you. You can also log into your account with your Google account or with your email and password that you said. So let me log in with my ankle yell accounts. There we go. And as you can see, whenever you create an account, you have already some projects here, which is called Feed My Basics prototyping in fig, MMA and wire framing in fig MMA. And if I open up this one, you could see some simple tutorials and some basics about fig MMA and how you could use that. You don't need to worry about it because we're going to cover all aspects of fig MMA in the next series of videos. Our right. As you can see on your left, you have some menus. The 1st 1 is your account or your profile. If you click on that, you can see it's your name. You can change your profile image, and here there are some options personal access tokens, and we don't need to use that for now. And if you want to delete your account, can use this option, the next option is search. You can search through your projects and your files, then you have recent, which shows you the recent projects and files that you have opened. And then we have plug ins, which gives you the option of installing some plug ins, which is so important, and we'll talk about it later. And then we have drafts. You can create some drafts and also you have deleted files. Okay, You can also create a new team over there if you want a work in a team, and also you could import your sketch file. It's amazing and figure out automatically converts your sketch file to figure five, and you could use it perfectly. Right now, we're using Sigma on our browser. However, as I mentioned before, you could always install Fatemeh on your system. So how can you do that? It's so simple. If you go ahead to Fichman dot com slash downloads or if I go ahead and log out here is the landing page and you can see the resource is. And if you hover on this link, you could see the downloads link over there. I'm gonna click on that, and here we have the Fatemeh downloads, which lets us download some. Resource is the 1st 1 is the stump app, and here you could find the stop act for Mac OS or desk up app for Windows. So depending on your operating system, you could download it and install it. Okay, then we have a live device preview. It's a great application. You could download it from APP store or Google play, and then you could preview your design instantly. And last but not least, we have font installers. What's that when you're using feet Ma on your browser, FEMA cannot get access to your local funds, which is not good, because most of the time you need to use your local funds. So in order to fix that problem, you could download the fund installer for Windows or Mac OS. Then you could install it. And after that you can get access to your local funds on your browser, which is pretty awesome. Although you could get access to your local funds by installing the's font installer, I highly recommend that he used the desktop version of Stigma because it's really accelerates. Your design process are right, guys, thank you so much for watching this video. I hope you enjoyed it. And in the next video I'm going to talk about the environment, up stigma and how you could use it simply. So see you then. 25. Figma Environment: Hi, everyone. And welcome back to another video off these course in this video, we're gonna be talking about the environment off fig MMA. So, as you can see right now, I'm using fig ma on my browser. However, I'm gonna go ahead and open up the desktop version. Inertia, accelerate my design process. So let me open up the fig. My up. There we go. All right. This is my primary count, as you can see. And this is the desk, a version that we can use easily. So first of all, let's go ahead and create a new file are right. And here, as you can see, we can divide the fig HMAS environment into four different sections. The toolbar which is right at the top. And it consists off all the necessary tools that you need for designing a world class user interface. As you can see, here you have a menu, and here you have some sub menus such as file edit, view, object, vector text. Arrange etcetera will cover all of those options. During this course. Here you have some tools, such as move tools, scale and also the frame to the frame and slice to. Then you have the objects or shapes toe and also the pan tool. And we have the text and comments right on your left. We have the layers, pain, at least all of your layers and also all of your assets, respectively. As you can see, there is no component here yet because we didn't create any components so far. However, in the future lessons, you will learn how to use these sections as well. Then on your right, we have the inspector, which consists off three different parts. As you can see, we have design, prototype and coat. Okay, So if I click on A on my keyboard, I can create an art board for starting my design process. For instance, I can choose phone, and here I'm going to choose iPhone 11 pro or X, as it can see. You have the dimension right over there. I'm going to click on that. And here you have your our sport and you can see the name on the layers least. And if you double click on that, you can change it to whatever you want. For instance, let's say home pretty good. And I can easily choose direct angle shape and there we go. We have another layer right under this art board. Okay? And here, on your right side in the inspector section, you have different options. For instance, in the design section you have alignments, you have a dimension, and also the location, the positioning of your shape. You have also the constraints section, and we will dive into each section separately in the next series of videos. So don't worry if you don't understand what the constraints are or basically what they do. For example, here we have layer and you can adjust capacity of your layer and it's mode. And here you have feel for changing the color. As you can see, we have stroke. We have effects for adding some shadows, and then we have the export for prototyping. You can go to prototype section, and here we have different options as well that we will cover in the prototyping section of these course. You have also the code section, and it's so useful if you're a developer or you want to hand over the properties off your design to your Web developer or even your application developer because you can easily export your properties in code, for example. For on us we have variable and different properties. That's pretty cool. And last but not least, the fourth section is the canvas which is in the middle off fig MMA. And here you will place all your designs and all your art ports. You have also the share option right over there that you can share your file or components with your team members. Or even you can send it to your clients for reviewing the project. Etcetera are right, guys. Thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. 26. Shapes: Hi, everyone. And welcome back to another video off these course. I hope you're doing well. And in this video, we're gonna be talking about the shapes. OK, The shape tool is one of the most important tools when you're designing a user interface. Because no matter what kind of interface you're designing, for sure you will need to use one of these shapes. OK, so right at the top in the toolbar, you can find the shapes, and if you click and that you can see that there are different shapes. Year, for instance, we have the rectangle okay. And if I select that, I can easily create this shape by dragging and dropping. As you can see, we have created a rectangle and it's called rectangle. Want. Each shape has some properties. For instance, The's shape has the corner radius property, and as you can see, it's indicated with these dots. So if I just click on one of them and drag the mouse a little bit like this, I can set the corner radius to 30. Alternatively, you can change the amount of corner radius right in the inspector over there, for example, I can set it to 50 life this. And if you want to change the corner radius for only one of those points or edges, you can hold option key and then drag and drop like this. And as you can see now, we have different amount of corner radius for each point like this. As a matter of fact, you can constant lies your corner radius like this. If you just click on independent corners and this icon, you can see the res corners more thing, and I'm going to click on that. And here we have a slider and I'm gonna set it to 60%. And as you can see here, it's written on us. So what does that mean? Actually, in all us, apple uses smooth corners. Okay. And if you're familiar with sketch, we use the same term as well. So as you can see, it makes our corners much smoother. Okay, off course you can increase it. However, 60% makes it look great. Perfect are right. Of course, you can change the color of your shape as we have discussed in the previous video. However, we will cover all those features in the next series of videos But for now, let's stick to the shapes. The next shape is called line. Okay, it's just kind of a stroke. And if I hold shift and two, you can see that Fatemeh brings thes shape to me automatically in a way that I can see it clearly. Okay, so I'm going to click on that. And here on stroke, you have different properties as well. For instance, you can change the thickness off thes line. Or let's say this stroke like this let me set it to 10. And if you click on these, darts can see that we have different options here. It's called Advanced Stroke and we have cap and joint. So what does that mean? Let's take a look at it. Let me open up this menu. And here we have different options we have round that will make our line round it for both sides. We have square, which doesn't make sense because it's kind of the same. We have line arrow like this, and we have Triangle arrow like this, and if I choose, for instance, line Arrow and I decide to modify this shape by double clicking on this shape and for instance, moving this point, you can see that it will change automatically pretty good. And we will cover joins in the future. Lessons are right now let's talk him out The next shape that make me Condon to finish editing the next shape is a narrow Okay, like this, it's again kind of a line. Or let's say, just stroke that we just created. However, you could create a narrow like this as well. As you can see, you have different times round, square line, arrow and triangle Arrow. And the 1st 1 by default was mixed. Okay, because we had a customized line, okay. And the next shape is the circle. So I'm gonna hold shift in order to keep the aspect ratio like this, and I'm gonna drag and drop to create these circle pretty good. And this circle has a new property, which is called Arc. So let's click on that and try to move a little bit to see what you can achieve by modifying this property like this. That's pretty awesome. And specially it's so useful when you're creating a chart awesome. And the next shape is called polygon. Okay, I'm going to create one. Let's remove these shape for now, I'm gonna make it larger. Pretty good. The polygon shape has two different properties. The 1st 1 is corner radius and it works like rectangles. Okay. And the second one's called Count, which means the number of edges that were using we are creating. So let me increase it by holding shift and clicking on that like this, I'm gonna move my mouse up and down. You can also modify it in the Inspector. Let's set it to eight pretty good. And I can also modify the radius. Obviously. Here. Fantastic. Let me remove that. And I'm going to create the star once again. Here. Pretty good. The Star shape has three different properties. The 1st 1 is Cornet Radius again like this. The 2nd 1 is the ratio, which is the ratio between these two edges like this. You can modify that. I'm going to set it to 40 and the last one is count. Okay, that you can increase and decrease as you wish. Pretty awesome. And last but not least, is the place image that you can choose an image from your system. And if you drag and drop like this and make sure to hold the shift key on your keyboard In order to keep the ratio, you can place an image okay? And you can also change the radius as well. It's so simple. All right, so now let's talk about the Dimension Property right over there. So here, as you can see, you have different properties like X and y, which refers to the position of these shape. So if I said zero and zero for why, As you can see, it moves to the left and top corner because zero and zero points starts from top and left corner, OK? And now you can modify the whiff and hide. For instance, you can set it to 300. However, as you can see, the width and height are linked. So if you want to change them separately, you can easily unlinked them by clicking on this icon which is called constrain proportions . And then I can modify the with or hide separately like this are right, like in sketch. You can do mathematical operations here, for instance, I can divide 300 by two like this, and there we go. We have 150 or I can multiply 180 by two. It's a great and useful feature when you're designing your user interface and we have the alignments. Were there rights at the top? For instance, if I choose thes object for this shape, I can align it to the center horizontally. I can align it to the left side, aligning to the right side, align it to the top, aligning to vertically and align it to the bottom. Okay, are right. But what if you want to align an object which is placed inside another object? So suppose that we're going to put thes object. Okay, here, I'm going to change the color to something like dark Gray like this. I'm gonna make it smaller a little bit. Suppose that we're going to align this shape with our rectangle. Okay, which looks like a square right now. But how can we do that? First of all, you need to make sure that you chose both objects at the same time. You can hold shift key on your keyboard and select them, or you can select them like this. We drank ing and dropping. Okay. Then you will click on align her resentful to the center and align vertical to the center. And it's done pretty awesome, A right guy. So now in this video, we have learned how to use shapes and you know the properties off each specific shape. So I hope you enjoy this video and I will see you in the next video. 27. Editing Shapes: Hi, everyone. And welcome back to another video of these course in this video, we're going to be talking about editing shapes, which is a very important topic because it happens all the time that he may need to edit your shapes. OK, so first of all, I'm gonna press a And as you can see now, I can choose my art board. Let's open up the desk up menu. And here I'm going to choose my quid pro for these video 1000 matter. But I have enough space to show you how you can edit your shapes. Then what I'm going to do is creating any rectangle here. I'm gonna hold shift and dragon drop like this. Then let's increase the corner radius. And by the way, if you hold shift key on your keyboard, you can increase or decrease the corner radius by 10 units. Okay. Like this pretty good. Then I'm gonna fill it with another color. So let's look for a very beautiful blue. I think it's great. And then I'm going to create another rectangle here. So let's hold shift again, and I'm gonna show you a very great technique to choose your colors properly. Okay, So if you're not sure that how you could match a good color with this blue, that creates a great contrast between them. You can first choose the same color like this. And then if you just move this circle to the darker side of these color palette like this, you can easily choose a perfect match with your background color, which is amazing, isn't it? So now how can we edit our shape in order to edit any shape? First, we need to enter to the edit mode. So to do that, you can double click on that shape. And there we go. Now we are in edit mode, OK? And as you can see, we have four different notes here. Or let's say points that we can start editing are shaped with. So if I click on this circle and try to move it a little bit, you can see that I can easily edit this shape as a wish like this. Okay, I can even increase the radius of thes corner in the inspector something like this. You can also add more notes on your path. Okay. Like this, for example, here I can click once And there we go. I just created and you note and I can edit it in another way like this. Okay, so let me come back to the first state of this rectangle or let's say square like this. So now suppose that you want to create something like care. Okay. In that case, you can use the bend to which is here. You can click on that and choose one of those notes. Then you can see that handle controller appears. And with these handle controller, you can easily adjust your curve like this. It's awesome, isn't it? And a shortcut of Ben Tool is holding command on your keyboard. There we go. You can easily adjust your curve in order to meet your expectations. Pretty awesome. After editing your shape, you need to remember to close your editing mode. To do that, you can click undone like this. So right now we are out of editing wrote, but isn't it better to create a really icon inner to show you how you could use the powerful editing mode? Let's do that. So, first of all, I'm going to zoom in a little bit like this. Then I'm gonna enter to edit motile. That's double click. And after that, I'm going to create and you knowed right here. OK, so I'm going to click on that, Then I'm gonna drank it down by holding shift like this Pretty good. And the next thing I'm going to do is selecting all notes by holding command A or control A in Windows. Then I'm gonna increase the corner radius. Okay, so let's increase it to six. Maybe that's pretty good. And now I'm gonna make it a little bit taller, and the last thing I'm gonna do is rotating this icon. So in order to rotate anything in fig MMA, you can hover your mouse just outside your shape and you can see that the rotation indicator or icon appears immediately. Then I'm gonna hold shift, and I'm going to rotate it by 180 degrees. As you can see, you have the amount here and there we go. What does it look like? You're right. It's like a bookmark. Okay, so can you see how amazing and powerful this editing tool is? So I'm going to make some changes in order to make it better. Let me double click on the shape and I'm going to select these two top notes and then increase the corner radius to 26 may be pretty awesome or right. Let me select both layers and I'm gonna group them by command G or controlled G in Windows . And I'm gonna name it Bookmark pretty awesome. So what else can we do? Let's go ahead and create a polygon here. I'm going to set the color to the same blue as our bookmark icon and thats copy and paste this background as our frame. So I'm gonna hold command key or control key and windows and click and these rectangle or square and copied by command. See, And I'm gonna paste it. However, remember to move this layer outside this bookmark group. I'm gonna move it a little bit like this. Pretty awesome. Now it's double click on these triangle and here I'm going to create another node right at the bottom like this and let me drag it a little bit. There we go. We have our GPS marker. That's pretty cool, isn't it? That we make it smaller? Fantastic. Okay, let me group it. I'm going to write Marker pretty awesome. Let me enlarge this art board a little bit. Then I'm going to show you how you can use the pan tool. So suppose that you want to create, for instance, a narrow Okay, a care of Darrow. How can you do that? It's so simple. Let's start with adding and note. Then you need another note like this and the last one here, that's all. First of all, I'm gonna increase the stroke thickness to four. Maybe Then I'm going to rotate it a little bit. And if I click on these dots, I can change the cap more to line arrow like this. It's pretty cool. I can even edit it like this. So can you see? How is it ease to create new shapes and edit them Pretty awesome are right, guys, Thank you so much for watching the CDO. I hope you enjoyed it. And in the next series of videos we will practice using the's tools by creating re award projects. So don't worry. If you do not understand all the details, I will make sure to explain everything in detail. So I will see you in the next video 28. Layers Basics: Hi, everyone. Welcome back to another video of these course in this video, we're gonna be talking about the layers panel knowing that how you could use the layers panel properly is so important. It may seem easy to use, however, Sometimes it gets a little bit tricky in terms of reordering your layers and your objects. Okay, so let's dive into these parts, and I'm gonna show you how you could use it efficiently. So as you can see, you have the layers least on your left. And here you could see all your layers on your groups and also all your frames. Whenever you create a new shape or a new object, it goes to the top of this layers list. OK, so let's try it out. I'm going to create a rectangle here. As you can see, I have rectangle one and for renaming thesis rectangle. I'm going to double click on that. And that's candidates are one. Okay, then I'm going to create another shape. Let's create circle pretty good. I'm going to change the color in order to make it more visible. Pretty awesome. And I'm going to call it, see one Okay. As you can see C one has been placed to the top of this layers list. Okay? And it appears to the front of your campus. So this is the reason that this circle is visible here. If I move this layer below are one. It's not visible anymore. However, you could steal change its properties like its color or its size. And if I move it back to its previous position, you can see that it's visible again. So ordering your layers is so important. Now suppose that we're going to group our layers. Let's select these two shapes and hold command G. And as you can see, we just created Group One. And whenever you want to see the layers included in this group, you can use this small arrow next to these icon, which indicates that this is a group. Okay, I'm going to click on that, and there we go for selecting a layer. You can easily click on that. Okay. And as you can see, a light blue box appears, nor to show that this layer has been selected. If you go to menu and go to preference, says you can see that you have different options here. One of them is highlight layers on hover. What does that mean? It means that if you hover your mouse on top of each layer, like, for example, see, Von, you can see on the canvas that the blue line will appear in order to show that this is your desired layer. Okay, so I'm gonna select that. And if you want on group these layers, you can easily click on this group name and then right, kill here and you can click. And on group like that, I'm gonna use command Z or controls. Ian. Windows are right. So now what? If you want to hide some layers, It's so simple. Suppose that we're going to hide this circle, which is called C one. In order to do that. First of all, we need to hover on that specific layer life. This and then an eye icon appears immediately next to these padlock. So I'm going to click on this icon and you can easily target this layer off and on like this. You can also like each layer by clicking on this padlock in order to prevent your layer from accidental edit. So when you like your layer. You cannot move your layer. You cannot interact with your layer. However you can steal change its properties. So let's try it out. I'm gonna try to move this layer a little bit and as you can see because it has been liked , I cannot move it. Okay, so its position is fixed, and you can use this technique for locking your bank grounds. Sometimes it may be useful, however, Now let's try to change some of its properties. For instance, I'm going to change its color. And as you can see, I can steal get access to its properties. Although it has been liked. And in order to win like that, you can again click on this padlock on. There we go. It's unlocked. You can recognize the type of each leg er on your layers, least based on the icon next to its name. As you can see on the picture, we have frame, we have groups. We have components that we will talk about in the future lessons. We have instances. We have tanks, object. We have shape image, an animated GIF. OK, so now let's talk about the positioning of your layers once again because I'm going to show you how you can reorder the positioning of your layers right under canvas. Suppose that you wanna bring this square or let's say rectangle to the front. Okay, In order to do that, of course, you can go to layers list and move it like this, and it's done. However, there is an alternative for that. You can easy be a right click on that on canvas, and you can choose bringing to front. There we go. If you're familiar with Adobe Illustrator, you know that you could use the same functionality and dad software as well. Now let's go to the assets section here, as you can see, because we haven't created any components yet, we can see any components here. Basically, components are parts of your design that you can reuse. Okay, we will talk about it later, and we will dive into components in the future lessons. We have another option here, which is called pages and right at the top. As you can see here we have Page One, and if I click on that, you can see that I have pages. It's called paid Ron. You can rename that I'm going to change you to a website. You can duplicate that if you just right click on that layer. As you can see, you can add a new page to this page list like this. We can call it Page two, and the good news is that there is no limit for creating pages, so you're free to create as many pages as you want. For instance, you could separate some parts of your design in order to make it clear when you're working in a team or if you want to create different prototypes, it's a good idea to have different pages as well. I'm gonna go to a website, and that's all for this video. Thank you so much for watching this video. I hope you enjoyed it, and I will see you in the next video. 29. Boolean Operations: Hello, Ruin. Welcome back to another video off this course in this video, we're gonna be talking about the Boolean operations. Actually, nowadays we use Boolean operations almost in every aspect of our life. Such as art programming design, etcetera. As difficult as it may sound, Actually, Boolean operations are so simple. So let's dive into it, and I'm gonna show you how you could use them easily. So, as you can see, I have created simple project here with four different art boards. And I call them Union, subtract, intersect and exclude. And these are our Boolean operators. Okay. Like as you can see here we have this menu and we have union selection. We have subtract selection. We have intersex election, and we have excludes election. Okay, so first of all, let me choose this art board and I'm gonna hold shift into like this. As you may guess, union means combining. Okay, If I try to overlap thes shape with this circle, as you can see, they have been overlapped. Okay, So if I choose the Boolean operations and I choose union operation, you can see that we have combined these two Ciric als into one single shape. And here you could, of course, get access to stop players like these circles, and you can steal edit it. However, we have one single shape and these operations are so useful for creating icons and we will talk about it later. Are right. Now, let's go ahead and talk about the next operation, which is subtract. So first of all, let me overlap this shape like this and I'm going to choose. Subtract. And as you can see, it subtracts the overlapping section from the base shape. Okay, so the overlapping section is Theis part in the middle. So when I choose subtract, it removes thes overlapping section from this base shape, which is the left circle like this. So, as you can see, the subtract operation is the opposite of union, okay? And the next operation is intersect. So let me overlap these two layers like this, and I'm gonna click an intersex selection. And these operation removes all the areas except the overlapping section like this and the next operation, which is the last one. It's called exclude, and it's the opposite of intersect operation. So if I overlap these two shapes like this and I click on Excludes Election. You can see that it keeps all the areas except the overlapping section. So did you see how simple it is to use Boolean operations there so useful now, don't you think it's a good idea to create some icons with this knowledge? That's great. So first of all, I'm going to create another art board and I'm going to click A on my key words. That's Dragon dropped. Creates a new frame like this and suppose that we want to create a search icon. Okay, so what do we need? We need a circle. So I'm going to create one, and I'm not gonna fill it with colors. I'm going to remove the feel. And at some stroke like this, I'm gonna increase the thickness of the stroke. Let me see. I think 15 is great, and I'm going to create a rectangle as well with the with of 15 as well. And I'm going to change the color to black like this at the zoom in a little bit. I'm going to move it up, Then let's elect both objects and align them to the center. And I'm going to choose union selection like this pretty good. Now I can rotate it. Awesome. Did you see how simple it is to create an icon with these Boolean operations? Pretty good. I hope you liked it. Now let's create another icon. For instance, Let's create Cloud Icon. I'm going to create a rectangle here like this and it's increased the radius pretty awesome . And I need to create a circle as well like this. Let me overlap it pretty good. And then I'm going to select both off them and select union selection. And there we go. We have our cloud. So if I change the color to black, you can see how amazing duties you can also customize it later or even for instance, I can remove the feel. And I can add stroke like this if you prefer this kind of styling. But remember, when you're designing some icons for a specific project, you need to keep the thickness of your lines the same for each specific icon. In order to be consistent in your design are right, guys, Thank you so much writing this video I hope you enjoyed it and I will see you in the next video 30. Text: Hi, everyone. And welcome back to another video off these cores. In this video, we're gonna be talking about texts. We, as you're UX designers, used texts all the time, and we need to know all the secrets behind the textile. So in order to create a text in fig MMA, you can easily head over to the toolbar and click on the's text icon. Or you could press t on your keyboard like this. Awesome. And you ve clicked once you would create an area, takes layer, or let's say a paragraph takes later. Okay, so I'm going to write Hello. We are U I U X designers. Pretty awesome. And as you can see, these kind of text line grows or is entirely when you're typing. Okay, of course you can change it. However, first of all, let me show you how you can change the phone size. If you head over to the tax inspector on your right side, you can change the fund. You can change the phone size can change the weight. We've been talking about all these properties later. So first of all, I'm going to change it to 36. Pretty awesome. Now I'm going to select the frame and I'm gonna press chief and to our right. So as I mentioned before, this is an area text line. So what if you want to make it grow, were tickly. In order to do that, you can click on these dots and here you have plenty of options to change. But what we need is this re sizing, as you can see, it set as default to grow or is entirely if you want to make it grow, where thickly can change you to grow vertically here. And if I continue typing from now on, it grows. Basically, I'm going to write Thank you for your support like this. You can also create a fixed sized text line, or you could change it here like this. But what if you want to create a fixed sized text line by yourself? It's so simple. First you can choose the text to Then you will click and drag like this. And in this way you will specify the dimension off your text box like this. Okay. And before you write anything here like we are talking about thanks and comparing difference options like this and If you want to modify the dimension of these text marks, you can easily hover on top of these blue bounding bikes and your cursor immediately changes to the scale icon. Okay? And I can modify it like this Pretty good, isn't it? Let me change the way to regular are right. Sometimes it may be useful to convert a text line to a vector. Okay, so how can you do that? If I right click here, I can go ahead and click and flatten. And there we go. Now, our text is a vector, as you can see over there, and you can modify each letter separately. So I'm gonna do mean and let's double click on these H There we go. Suppose that I'm going to change something here. For instance, let's select thes notes and I'm gonna increase the corner radius like this. And also for these funds, isn't it pretty cool? So converting your text line to a vector is useful, especially if you're designing a logo or award Mark etcetera are right. Suppose that I'm going to create another text line like this? That's right, H. And I'm going to duplicate that once again. And once again and let's write e And here l and here l And when a duplicate that and oh, okay had been moved him a little bit. So as I mentioned before, in order to make your takes line a vector, you need to flatten your text night. But what if you want to keep your layers as they are? For instance, here I have five different layers and I'm gonna make it vector. In this case, you can right click. And instead of choosing flattened, you can choose outline stroke. OK, and now you have all the letters as a vector. That's pretty awesome, isn't it? All right, guys, that's all for these video. Thank you so much for watching it. And I will see you in the next video. 31. Text Inspector: Hi, everyone. I hope you're doing well. And welcome back to another video of thes course in these video. We're gonna be talking about the Texans, Specter. Okay, how you can customize your text. So without further ado, let's get it started. We'd selecting these text and in the tax Inspector, we have different options. As I mentioned before, some off them, I'm going to review them. The first option is the font that you can easily get access to your local funds or the figment funds. Okay, we can easily change your funds. And now I'm gonna set it bank to Monserrate. An exception is the weight of your front. You can modify Teoh Athene light, regular, bold and black. However, keep in mind that these options may be different for different funds. Okay, so I'm going to set it to regular, and the next property is the fun size. As you can see, you can change your fund size easily, so I'm going to change it to 68. You can also do mathematical operations here. I'm going to divide it by two. Pretty awesome. Then we have the line height, which is so important when you're designing a user interface in terms of visibility, of your lines in different screen size. As you can see, it has been set to auto. Fatemeh calculates the line height by percentage. Okay, it's based on your fund size. So if you want to declare your own line height in peak cell, you can easily right for example, 80 pixel like this. And now these values based on pixels, not percentage anymore like this. The next property is letters facing which determines the spacing between your letters like this. And then we have paragraph spacing. We cannot see the changes here because we have created only bond paragraph. So I'm gonna make this fun size a little bit smaller that set it to 24. And I'm going to change the line. Hi to photo. And let's add one more paragraph to eat. So I'm going to write. We are talking about properties like this. So now if you change the paragraph, spacing can see that it changes immediately, and then we have the paragraph indentation. And if I increase this, you can see that you can specify this amount and it will add some white space before the first word of each paragraph are right. I'm gonna undo this pretty good. And here we have the horizontal alignments. We have takes a line to left, takes a line to center and takes a line to write. And after that, we have the vertical alignment. As you can see, I can change it as well. However, keep in mind that this option is only applicability to affix sized text layer. As you can see, we can apply these changes because we're using a fixed size text layer. But if I create another text here Hello, I am testing it now. If I changed a vertical alignment, nothing happens. Okay? You have also some advanced properties that you can get access to by clicking on these three dots. Here you have the preview section that you can preview each operation whenever you hover your mouse on top of these options. So the 1st 1 is re sizing and I have explained you in the previous video you have three different options grow to resent Aly grow vertically and fixed size text layer. Then you have alignment like this. And after that you have decoration. As you can see, it's said to non so we don't have any decoration. However, you can choose underline or strike through like this. After that, we have the letter case. You can specify which kind of leather case you want to use. For example, these fun is upper case. We have lower case. So if I choose uppercase, all of my letters become offer case. Okay, If I choose lower case as you can see, the changes apply immediately. And then we have title case. We have small camps and four small caps. Pretty awesome. We have also case sensitive forms. However, it's not applicable for these selected text, so we're gonna live it for now. Then we have numbers, so we cannot see the changes here because we're not using any number in our text. But you can preview them. Here are right. You can even choose the fraction. It's totally about numbers and these are so advanced. And most of the time we don't use them in our design process. Are right, guys, that's all for these video. Thank you so much for watching it. And I will see you in the next video. 32. Text Style: Hello, everyone. I hope you're doing well. And welcome back to another video of these course in these video, we're gonna be talking about textiles. Actually, styles allow you to specify a set of properties in order to reuse them across your projects , and you could also share them with your team. So in this video, we're going to dive into textiles, and I'm gonna show you how important it is to create your textile when you're designing a user interface. Suppose that you're designing a very complicated project which consists off 50 or more screens. In this case, you're using a specific fund, and after a while you suddenly decide to change, for instance, the fund of your header or even the fund size or the weight. So wouldn't it be nice that you could make those changes once and the changes would applying toe all your tanks at the same time? That's fantastic. This is what textiles do. So now, without further I do. Let's get it started with inserting a new tanks. I'm gonna add, for instance, header one and I'm gonna make it bold. Actually, when you're designing a website, we have six different types of headers from H one to age six in HTML. You don't need to know every detail about it. However, it's good to be familiar with some terms in some rules of HTML or CSS are. Right now it's our header Juan, and I'm going to set the size too 80 like this. And then I'm going to create my first textile. How can I do that? It's so easy. Do you see these four dance? I'm going to click on that. And here there is a plus icon, which lets me create a new textile, and I'm going to write H one. Then that's duplicated. That's right, age to hear our right. And here, as you can see, it uses the previous textile that we just defined for Heather one. So first of all, we need to detach it from its style. OK, and then I'm gonna set it to 60 pretty good, and I'm going to create another textile and let's call it H two. That's duplicate that once again, detach it from its textile and let's set it to 30. I'm going to write Header three that's create a new textile as well, age three and that's all So now how can we apply our textiles to our takes layers? So lets me create a new text. I'm going to write promotions, Okay. And as you can see, it automatically uses H three. You can easily change that by clicking and these menu, and I'm gonna set it to age to There we go. And if I go to my text on here and there too, and I make some changes, those changes will applying to these promotions tanks as well. So let's give it a try. Let's go to H two. And here you have edit style. I'm going to click on that and, for instance, I'm gonna make it regular. There we go. Did you see how amazing it is to use textiles? You can also change the font size, for instance. I'm gonna set it to 40 and that's done. However, keep in mind that if you change the text color, it doesn't apply to the instance off that text time. So if I, for instance, change the color off this header to, for example, to this color, as you can see, nothing happens because for that we need to create a color sile, which we will cover in the futures lessons are right. Now. Let me duplicate these promotions and then we can try H three as well are right, guys. That's all for these video. I hope you enjoyed it. And I will see you in the next video. 33. Constraints and Adaptive Layouts: Hi, everyone. And welcome back to another video of thes course. In this video, we're gonna be talking about constraints and responsive layouts. So whether constraints and why do we need to make our design responsive? So suppose that you're designing a webpage or an application screen and you're using, for instance, this art board macro. Okay, then what happens when your user uses the portrayed mote like this? So if you didn't make your design responsive, everything would be disorganized. So in this video, we're gonna be talking about constraints and how you could make your pages responsive. First of all, I'm going to design a simple landing page here. So let's go ahead and add a rectangle here like this and I'm going to change the color. Too dark blue. Pretty awesome. Then I'm gonna add a text here. That's right. Welcome to the world off you I ux design. Let me change the color toe White for now and I'm going to change the fund to SF pro text. I'm gonna make it larger a little bit that set it to 64 I think it's better to make it a fixed size text layer like this. Then let me align you to the center and also here. Pretty good. Then what else do we need? I'm gonna add some links or menus at the top. So let's write home. I'm gonna make it white as well. Let's make it smaller. I think 24 points is great. Duplicate that, then let's right. Pricing once again duplicate that and here, services. Once again, I'm going to duplicate that and now contact us pretty good. That's also first of all, let's change the spacing between them. And I'm gonna choose this menu in the Inspector and I'm gonna click. Distribute horizontal spacing like this. And in this way, the spacing between my links or my menus will be equal. And if you want to check this pacing between your objects, you can easily select one text or object and then hold option key or aren't on your keyboard, and you can hover your mouse on top off the text or shape next to your previous shape. As you can see, it has been said to 25. I'm going to make it 24 like this. Pretty awesome. And now on, let's make thes text bold so I'm gonna choose bold. Now it's better and I'm gonna make it a little bit larger, pretty good. And let's group our menus at the top Command G or controlled G. I'm gonna write menus pretty awesome. I aligned it vertically as well, and that's all for now. So now, as you can see, we have designed this page for my quick pro with this dimension 14 40 by 900. And it has been designed for landscape mode. So if I change it to portrayed, you can see that everything will be disorganized. Okay, so we need to make our page responses to do that. First, let's elect these text. And as you can see in the Inspector, you have something called constraints. So we're going to use that. And as you can see, the constraints are said to top and left. But we're going to change it because we need to keep these texts to the center off our screen. Okay, I'm gonna change it to center. And let's keep this to top, because we need to keep this distance to the top. The same. And now, if I choose my frame and change it to portrait mode, we can see that it automatically changes its position, and now everything is great. The next thing we need to do is to set constrained for our menus. So let's go back to landscape mode, and now I'm going to select the menus. And as you can see, the constraints are said to left and top. However, they need to say to the center and top, So I'm going to change it to the center. And now if I change my frame to the poor freight mood, you can see that it will change responsibly like this. It's pretty cool, isn't it? However, what if I make my screen even larger like this? You can see that my background is not responsive. So now please pause the video and try to fix that issue by yourself. And then I would show you how you could do that are right, Guys, I'm pretty sure that you could fix that for yourself, however, Now I'm going to show you as well, in case that you had difficulties doing that are right. So in order to make your bank around responsible as well. First, let's choose thes rectangle, which is our bank round And as you can see, the constraints are said to the left and top edges. The only thing we need to change is this one. So if we can change it to left and right, everything would be great. Now, let's give you the trying now I'm gonna make my frame even larger. And as you can see, we have a stretchy background like this. That was pretty easy. Are right, guys, that's all for this video. I hope you enjoyed it. And I will see you in the next video. 34. Auto Layout - New: Hello, everyone. I hope you're doing well in these video. We're gonna be talking about the newest feature off Fig MMA, which is called Auto Layout. The auto layout feature has been added to figure recently, and it's a super powerful feature. And I'm gonna show you how you could use that in order to accelerate your design process and make your life much, much easier. So without for I do, let's get a start. First of all, I'm gonna go ahead and create a button. So to do that, I'm going to need a rectangle. So let's create one. There we go. I'm gonna set there with 2 300 the high to 70. Nice. Then let's increase the corner radius 2 16 And as you can see now, those little circles do not appear here because I'm far away from the Spartan. However, if I zoom a little bit thes circles would appear are right. Now let's change the color toe light purple like this. Nice. Then we need the text, obviously. So I'm going to write liking and let's change the color to white, and I'm gonna increase the font size to 24 pretty good that select both layers and align them both horizontally and vertically. Pretty good. I'm gonna make it a little bit smaller. Now it's better. So let's group them and call it looking pretty good and everything is fine now. But suppose that you create this button you designed to duplicate that and change the tanks or something else for incense. You want to change it to get started. And can you see that? What's the problem here? So our buttons are not responsive, and previously we needed to constantly Czar Buttons separately like this. We needed to resize them manually and again. We had to align them like this. However, now, with the help of photo layout, everything will be done in a second. So let me show you how you could do that. First of all, I'm going to duplicate this lugging button once again. There we go and, as you can see in the Inspector and new section has been added, which is called totally out. And you can either click on this plus button to add photo layout to your button. Or you could hold shift any and that's all. Alternatively, you could right click here and choose Adauto layout. All work the same. So as you can see, nothing has been changed here. But if you trying to change these tanks to, for instance get started, you can see that What's the difference here now are button is responsive. That's super cool. And it can also customize the horizontal padding, the vertical padding and the spacing between items. However, because we have only one item here, we can't use thesis section. You can change the mode from presentable to vertical, but you can see the difference here. However, if you're trying to create, at least you can use vertical and we have different options as well for the height. So as you can see here we have photo height. So if I try to add some lines like this, the height size will automatically increase. Okay, but if I try to change it to fix height and then I add some lines, you can see that it's not responsive anymore, so you can easily customize the options that you have here. This is the horizontal padding. You can change it easily like this. If you're familiar with CSS, it works exactly the same, and also the vertical padding. That is pretty, pretty awesome. Now let's try something else. Let's create another rectangle here and I'm gonna set it to 450 by 80. Nice. Let's increase the corner radius to 24 change the color to this light purple. Okay, let's suppose that this is our tap are and we're going to add some icons or just simple shapes. So I'm going to create a rectangle like this, and it's going to be 45 by fortifying Let's change its collar toe white. Pretty awesome. I'm gonna zoom in a little bit and then I'm going to create another shape, such as a circle, and I'm going to set it to 45 my 45 as well. Let's change the color toe white, and lastly, I'm going to duplicate thes square and increase the corner radius like this, and I'm going to rotate it by 45 degrees. Okay, then let's elect all our shapes and click on distribute or resentful spacing to get the same spacing between our shapes, and I'm going to set it to 91. Then that's group them and select our tap bar and aligning to the center both horizontally and vertically. However, you need to remember because we're going to make thes shaves responsive. We need to group them after alignments. So I'm going to write critic here on group them and select the tap our which is our background here like this. And one second group them and I'm gonna call it tap bar. Okay, then let's press shift A in order to add or the layout to this group and everything is done . So how can we check it out? The easiest way is to try to remove one of these shapes. So I'm going to remove the circle and there we go. Our tapper is responsive now. You could even add more objects and the size would automatically change. So I'm going to duplicate it. And as you can see, it's perfectly working. That's pretty awesome. You could also change their place easily like this. That is fantastic. Are right now we're going to create a more complex or the layout group. So what do you think? If we could create a responsive car, that would be nice. So let's go ahead and create a new rectangle right here, and I'm gonna increase the radius to 40. And let's change the dimensions to 300 by 400 Nice. And I'm going to change the color to White and its ad stroke to it. We'd the same light purple that we have here and then I'm gonna add some details. Street. Suppose that we're going to have a profile image. So we need a circle here. Let's set it to 70 by 70 and I'm going to change the color to this purple pretty good. And as you can see, the top padding is said to 30. Let's set the left petting to 30 as well. Then I'm gonna add some texts. So I need to have name. That's make it smaller. I think 18 points would be nice. I'm going to change the color to this purple as well. Duplicate that. And here I'm going to write surname pretty good. And the left padding is going to be 16 pixels like this. Then I'm gonna add another tanks. Which is the description, for instance. That's right. Hello, everyone. In these video, we are talking about photo layout in Fig McKay and I think it's better to make it a fixed size text layer like this and I'm going to change the ultra high to 24 pretty awesome. And let's make this card a little bit smaller. For now, the top padding is going to be 30. So we need to have 32 the top for the steaks and 32 the bottom. So, as you can see, I have 27 I need to add three more so I can go to height. And here I'm going to write. Plus three. There we go. Let's make it larger, a little bit. Fantastic. Now, how can we make this card responsive? We need to use an undertaking here because if we just group them, let me show you and press shift and a it's not gonna work and everything is going to be disorganized. So we need to use another way. In these case, we need to have two different groups with all the layout. So first we need to create a horizontal or the layout for this profile image place, holer and these two texts. So I'm going to select them and group them. Let's name it, user. And now, as you can see, we have two objects here that air placed vertically. So if I select my rectangle and also this user and this text and group them and call it card now I can add totally out perfectly. So I'm going to press shift and a And as you can see, I just created everything color photo layout, but we need to create a horizontal photo layout for our user as well. So now we need to group this name and surname as well in order to use a horizontal auto layout for these two objects as well. So now I'm going to choose the user group and press shift in a And as you can see, we just created a horizontal auto layout. Okay, then I'm going to select my main card and press shift and a once again. And as you can see, I just created a vertical totally out. So I'm gonna open it up, and I'm going to set the alignment of user to the left and everything is done. So let's give it a try. I'm gonna extend this text a little bit to see what's gonna happen. Let's see whether it works or not. And yes, as you can see, it works perfectly. So that's right. Yes, it works perfectly. That's pretty cool. So if you just trying to add some lines, you can see that it increases the height size automatically. But what about for the so the layout group? So if I try to change the name to something else like Mike and the surname to I don't know , White. As you can see, nothing happens because it's not that lying. So I'm gonna add some random characters here. And as you can see, it works. However, my description text moves along, so I need to fix that issue. In order to fix that, I'm going to select it. And as you can see, it has been aligned to the center. So I'm gonna align it to the left. And now everything is great. So let's try something here. I'm going to copy and paste it. There we go. It works perfectly. All right, guys, Thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. 35. Images: Hello, everyone. And welcome back to another video of thes scores. In these video, we're gonna be talking about images as a your UX designer. You work with images all the time and it's so important to know how it could use unique features. Fatemeh, in order to use your images properly so without further I do. Let's get it started. As you can see, I have created a simple project here we just five circles and three squares and we're going to add images to these circles and also these cars. There are plenty of ways that you could do that. The 1st 1 is to just drag and drop your images, and then you will use the mask option, which we will cover in the futures lessons. However, there are better ways to do that. So first, make sure to download the assets file that I already prepared for you. And it consists of some images for these cards and some images for these circles. So the first way is to go to shapes, and here we have placed image and if you have downloaded the assets file, you could see that you have two different fallers. Profile and cards in profile folder, you could see five different images, and I'm going to select all of them and click and open pretty good. Right at the top. You have two options. Place all discard all. If you click place, all all of your images will be placed at once like this. As you can see, you have all of your image is okay. And again, you need to go ahead and use masks in order to put it on those circles. Okay, so once again, I'm gonna open those images. And if you could weaken, discard all here. Nothing happens. You need to select once again. As we can see, there is a red badge on the top left corner of your images, which indicates the number of images that you have left. So, for instance, here we have five. If I click here, you can see that my first image will be inserted to the canvas. And now I have four. So I can go ahead and insert all of them. So let me select them once again in the previous way. You could place your images with their own dimensions. Okay. However, if you want to change the dimension. You can easily drag and drop like this. And there we go. You can set the dimension as you want are right. And the last time we're going to place these images in our circles. And it's so easy to do that. If you hover your mouse on top of these circles and click, you can see that it's so easy to insert your image in those circles like this. And that's all. The next way you can insert an image in fig MMA is to use the field section. So I'm gonna hold command key and I'm going to select thes card. And here in feel if I open this drop menu, you can see that you have image option and you can choose your image like this. You can also change the exposure of your image. The contrast, the saturation temperature teamed, highlights and shadows right here. Okay, you can even rotate it if you want. All right, now we're going to add images to our cars, So let's go ahead and choose place image. And here I'm gonna open up cards. And as you can see, there are three different images here. I'm going to select all of them. You can open. You need to remember something. If your image is so large, signal will resize it automatically before you could insert it to fig MMA. So you need to be ever of this issue as well like this. And thats done. Did you see how is it is to use images in fig MMA? You could also edit This car's easily like this. There we go. Everything is responsive. That's pretty cool, isn't it? The good news is that unlike other suffers and platforms in fig Mama, you could insert a G file as well. So let's give it a try. So now if I previewed this art board by clicking on this play button, you can see that these images are static. Okay, so what if I add a G file to one of these cards for incense? This one? I'm gonna go ahead and place an image from G folder. There we go now. As you can see, it's like other normal pictures. However, if I try to preview that, you can see that it's actually different from other pictures because it's a gym file and it plays in fig MMA which is pretty Ellison are right. Guys, Thank you so much for watching this video. I hope you enjoyed it and I will see you in the next video. 36. Styling: Fill: Hi, Ron. I hope you're doing well in this video. We're gonna be talking about the field section. So without further ado, let's get started with inserting a new shape here. I'm going to create a rectangle. Let's increase the corner radius like this on your right. In the inspector section, you can see the feel section, Okay. And here you could choose your desired color for your object or even your text layer pay like this. For instance, Now we choose red OK, and thes red color has a value. The brightness of each color is called its value. And as you can see, if we add why to this color it gets lighter. And if you add black to this color, it gets darker and darker. You can also use the eyedropper for choosing your Connor like this. And you can also choose your color with hex code here. Okay, you can set it to RGB CSS hs l and edges be, but most of the time we use hex code. Sometimes we need to change the opacity of each color. In that case, you could use this slider like this, and as you can see now, it gets transparent. Or you could use this percentage year like 20% Pretty good. And right at the bottom. You could see your document colors. As you can see, we don't have any document Connors because we haven't created one yet. However, in the futures lessons, we'll talk about it right at the top left. You could see a drop menu. Okay. If I open it, you can see that you have plenty of options. The 1st 1 is solid. And as you can see, you could only choose a single and base color. Okay, If you want to use a great and you could choose linear like these and for instance, I can choose the second color here. However, it said to transparent I can increase the capacity to 100%. And with these controllers, you can change the direction of your radiant like this. You could even add more colors to your grade. Ian's. If you click here like this, I can choose this color as well. Pretty awesome. The other option that you have is radial gray didn't Okay, you have also angular like this. And then we have diamond like this. An image that I already talked about. However, the two most important options are solid and linear. Okay, You could also change the opacity off your color or radiant here like this. And you can hide it if you want or remove it. And here you can change your color mode from normal to color. Saturation, hue difference. We will talk about these options later. However, if you want to see what's gonna happen if you change it, we need another object. So I'm gonna create any rectangle like this and let's set its color to something like these Flu. And I'm going to change the color mode to color like this. You can see the difference here. I can set it to overlay like this screen. Etcetera are right, guys. That's all for this video. Thank you so much for watching it. I hope you enjoyed it. And I receive in the next video 37. Styling: Stroke: Hi, everyone. Welcome back to another video of these scores in this video. We're gonna be talking about the stroke section. So first of all, let me create a new shape. This time I'm going to choose a circle like this and right under the field section that we have talked about in the previous video. We have the stroke section. I'm going to click on this last button in order to add a stroke to my shape. And here we have different properties, such as color again. You have all those options like in the field. You have the thickness of your stroke that you can change here and you have the positioning property here as well that you can change it from inside to send her and toe outside. So basically, it means that this stroke applies to the outside of your shape. And this one, it means that this stroke applies to the inside of your shape. And here you have the advanced option, and we already talked about it. You have round, square line arrow and triangle arrow. However, it doesn't work here because we need to have a line or a path in order to use these options . You could also make it dash. For example. I can write two comma five like this. Or let's say 10. I can easily change it here. 40. That's pretty cool. And of course, you can Hyatt or remove it. All right, guys, thank you so much for watching this video, and I will see you in the next video. 38. Styling: Effects: Hi, everyone. And welcome back to another video off these course in this video, we're gonna be talking about the effects section. As a matter of fact, the use defect section. So many times when we were designing a user interface, for instance, there are times that you want to add some shadows to your object or even to your text. Or probably you want to add a Blair effect, your object or two. You're bankrupt. In these cases, we can use the effects section so we don't find I do. Let's get it started. As you can see here, I have created a scene for the square and I change its color to these hex collar coat. Okay, double 0 38 double. If now I'm gonna add some drop shadow to eat. OK, so let's go to Effect section and I'm gonna click on these plus button. And here you have a drop menu. You have inner shadow. And as you can see, this option will add some shadows inside of your object. If you want to modify your shadow, you can click and the sun icon and here you have the advanced options. You have the Blair amount. Now it's set to four. I'm going to change it to 100 as you can see, changes apply immediately. You could also change the X access that set it to 20 on this 1 to 10. Of course, you cannot see the changes here because it's actually inside our object. However, we will try these options for drop shadows as well. The next option you have is the color of your shadow. You can easily change it to any calorie want, and your capacity is set to 25% by default. If you want to change it, you could, of course, increase it or decrease it. Life this You have also the mod menus here. Pretty awesome. Let's change the type of shadow to drop shadow, Okay? And most of the time we use drop shadow when we're designing a user interface. So now let's go and change this collar to black, and I'm gonna set it to 25% pretty awesome. And then let's change the Blair to 40 and the X 20 and of wine 2 20 If you want to get a very good drop shadow, you can calculate your numbers like me. For instance, if you said that Blair to 40 you could divide it by two and set that number as the Via Mount like here. And then I'm gonna change the opacity to 20% like this. Pretty nice, isn't it? As you can see, it looks pretty good. However, I'm going to suggest you something in order to make your shadow more realistic. It's a good idea to choose the same color for your shadow as your objects color like this. OK, and then decreased capacity to, for instance, 15% or even 10%. It's totally up to you. However, it makes more sense because actually, colorful objects don't have black shadows. OK, so if I duplicate thes square and I changed his color to, for example, something like this Okay, I can change the shadow to the same color and increase it to 10% or 15% like this. Can you see the slide difference here? It makes it more realistic, are right. So now let's go ahead and talk about other options as well as you can see here you have layer blur and bank Rambler. So if I choose Layer Blair As you can see, it blares my selected layer, okay? And I can change the amount here like this. Pretty awesome. I'm gonna set it to 10. And you have the background, Blair as well. But as you can see, when I choose that nothing happens because I don't have anything behind these shape. So if I want to see the effect off the background, Blair, I need to have something behind it. So let's go ahead and choose thes square and I'm gonna place an imaging that so let's choose this one pretty good. Then I'm gonna put this square on top off my image like this. And here, As you can see, the bag around Blair is selected, but you can not see anything, because when you're using the banker on Blair, you need to decrease the A pass ity off your field in order to see the changes, not the capacity of your layer. If I change it to 50 we can see that nothing happens. But if I change the opacity off my color to 50% you can see the effect. And now I'm going to change the color as well to something else like this and let's decreasing to 30% and I'm going to change that. Blair amount to 20% and that is fantastic. So let me remove this layer and then add a circle here like this, make it black and then add background, blurted it on. Let's decrease the opacity to 30% on. I'm going to set the Blair amount to 50 and now you can clear the seed effect. You can also add the thanks to the text layers. So if I creates a text layer here, that's right. Hello. You can see that I can add a drop shadow, the inner shadow, the layer Blair and also the bank around Blair as well. Like this are right, guys. That's all for this video. I hope you enjoyed it and I will see you in the next video. 39. Color Style: Hello, everyone. And welcome back to another radio of these course in these video, we're gonna be talking about the con Erstein's. So just like textile, you could create your own color sign. So first of all, let's go ahead and create a rectangle here and I'm gonna increase the corner radius to 40 like this. Then let's set the solid color to something like thes blue Pre denies and I'm going to duplicate it. And then let's change the capacity to 75% once again duplicated. And this time I'm going to change it to 50% and again I'm going to duplicate it. And now let's change it to 25%. Okay, so I just created four different colors with the same base color. However, with four different values, as you can see, it gets lighter and lighter, so I'm going to select them, duplicate them, and here I'm going to choose another color as well. I think this one is great. So let's copy and paste thes hex color code for the others like this. Okay, but how can you create your own color? Stein. It's so easy, just like textiles. First you need to select your object or your layer. And then here you can click on these four dots, and here you can click on this plus icon, which creates your color sign. So I'm going to write primary slash her po because it looks like a purple color. So I'm going to write primary slash purple and let's click and create style pretty good. Then I'm gonna choose this one, and let's do the same thing for this and this time the trying secondary slash pink. And for D swon, I can say primary purple, 75% like this and it's fun. Primary purple, 50% and so on are right, so, as you can see here, you have different colors. Styles. You have primary purple. We have secondary peeing primary purple, 75% and so on. So how can you apply these color signs to your shapes or your objects? It's so simple. So first of all, let's create a new shape. Let's create a circle here like this, and in order to apply your color style, you can click and these four dots and here you can get access to your color science. Here you have primary here you have secondary. We created four different primary colors and only one secondary, and we will dive into creating your own design system in its own section in these course. So now I can choose Primary Purple, and that's all. I can duplicate it, and here I can change it to secondary pink. Or if you want to change some properties off these shape, we can detach it from its style by clicking and these icons like this and you can freely change the color just like color styles. You can also create styles for effects or for a stroke. OK, so if you click on these for that's, you can create an effect style or a stroke start. So what are the advantages of using color styles in your projects, just like text times? Creating your color science is gonna save you so much time, because if you decide to change this primary color later, you can easily head over to these color style, and then you can modify it by clicking on this edit style icon like here, and changes with applying immediately are right guys, that's all for these video. I hope you enjoyed it and I will see you in the next video 40. Masks: Hello, everyone. And welcome back to another video of thes course in these video. We're gonna be talking about masks. Actually, masks allow you to show a specific portion of an image or an object. Okay, So whenever you want to use a specific section of an image, you can easy to use masks. Or if you want to present on Lee a portion off an object you could steal. Use masks for that. So how can you use masks? As you can see here, I have created a square, and I have placed an image from our assets. Fine. And if I want to use masks first, I need to choose this'll a er and then I can click unmask icon right at the top like this. And after clicking and this icon, your layers will be disappeared. Okay, so now I can select my image from the layers least, and then I'm gonna move it to the left side. And as you can see now, it has been clipped. You need to keep in mind that masks well, applying toe all layers above it. Okay, so here, if I move these image layer to the bottom of my mask, You can see that nothing happens. The other way of applying masked your layer east to choose both layers. So first I'm gonna put this image on top of my rectangle or square, and then I'm going to choose both off them and then click Unmask like this. The other important thing that you need to keep in mind is that if you're using a Grady int or an effect for your rectangle and you want to use masks, you need to duplicate your shape in order to keep those effects. Okay, so if I add some drop shadow here like this, I'm going to set it to 20 and the UAE to 10 and then I'm going to create my mask. However, now, as you can see, my drop shadow color has been changed. So in order to fix that issue before creating my mask, I can duplicate my rectangle. I'm gonna put it here right below my mask layer, and then I can create my mask easily. And now, as you can see, I have a mass group. So if I want to put these rectangle, which is my drop shadow into this group, I need to make sure that I place it right below my mask layer here. Because if I put it above that, this mask layer will applying to this rectangle as well. All right, guys, Thank you so much for watching this video. I hope you enjoyed it. And I will see you in the next video. 41. Components: Hi, everyone. And welcome back to another video of these course in these video, we're gonna be talking about components. Basically, components are reusable elements. Okay, so you can create them once and you can use them multiple times. It's pretty amazing. So they're like symbols in sketch. So without further I do. Let's get it started. First of all, I'm gonna go ahead and create a bottom. So I need a rectangle. I'm going to drag and drop. Let's set the with 2 270 a high to 70 like this. And then I'm gonna increase the corner radius to 20. Pretty awesome. I think it's a good idea to change the color as well. I'm gonna set it to this color. Cody's 35 62 double F, and then I need a text. So let's write primary and I'm going to choose the SF Pro text bond and the weight of medium and its size is going to be 20 points. Okay, then that's changed the color to white. In order to have a good contrast here, I'm going to select my elements, aligning to the center both vertically and horizontally and now Let's group them. I'm gonna call it Barton slash Primary, and I think it's a good idea to add photo layout to this button. So I'm gonna press shift in a And as you can see, the totaling out has been added to this part. Okay, the next thing we need to do is to click on this icon inner to create our component. So if I click on that, it's done. I just created my first component. You can also add a description to your component here so I can write. It's the primary bottom like this. And now how can you reuse this button? It's so simple. Do you remember that in layers pain? We had the assets section. Now, if you open it up, you can see that in local components we have are created components here, So if I want to use that, I can easily dragon drop it. And if I hover on top of that, you can see the description that we just wrote. So there we go, and because I added the totally outed, I can easily change these tanks, for instance, Let's right get started and its size will dynamically change pretty awesome. But what if you want to change some properties off these instance? Okay, actually, this button is an incense off this master button. So we call this button the master component, and this button is an instance of these master components. Okay, So if you want to change some properties off that, for instance, if you want to change the color, you can easily head over to feel section and you can change it. And as you can see, nothing happens to the master component. Okay. However, if you try to change the master component, it will affect all of its instances. So in the inspector section, you have the instant section here and here You have a drop menu, and I'm gonna show you how you can use that. But if you want to go to the master component, you can use thes spartan like this. And now we are in master component. So here, if I try to change the color, you can see that it's instance will change immediately, or if I increase the corner radius here, you can see that it applies to its instances immediately. So I'm gonna set it back to 20 now Let's create another button. So I'm gonna choose this primary one. I'm going to duplicate it like this, and before making any changes here, we need to detach it from its incense. Okay, so first we need to click and detach incense. And now, if I change it, nothing happens to the previous button. So let's change the opacity to 75%. And this one is going to be the hover states off our previous button. Okay, so I'm gonna go to layers list and let's change the name to button, hover and click on create component, and that's done. So now, if I select this getting started button and I go to these drop menu in the instant section , I can go to Button. Of course, you have related components here. However, because I use slash when I name them, I could put all those buttons into these group button. Okay, so now I can change it from Primary Toe Harbor and there we go. It was so simple. So now let's go ahead and add some effects to this button. So I'm going to choose the master component and then click on this plus button in effect section and here we have drop shadow. So I'm gonna go to the advance section and let's choose the same color here. And let's change its capacity to 15% Very well. I'm going to change the Blair amount to 20. End of why amount to 10 X is going to be zero. Okay, it's pretty awesome. So let's create another bottom here as well. I'm going to duplicate it. Then I'm going to detach it from its master component. And then that's changed capacity to 25%. And I'm going to remove this drop shadow because it's going to be our disabled state. So now I'm going to rename it to button slash the say Bell three denies, and could you can create components and it's done. So if I just said like this get started button and I go to these drop menu, I can easily choose disable. It was so easy, wasn't it? You can make almost everything a component. Okay, so, for instance, we can go ahead and create a text field. I'm going to select the line and its dragon drop pretty good here we have created a line. Let's choose the same color as our watan. Pretty nice. I'm gonna increase the thickness off our line. 22 Fantastic. Let's change the with 2 350 we need a text year. So I'm going to write Text Field. Pretty denies. And let's change its color to this fun. And I'm going to set the top heading of this line to eight pixels like this. And let's move these takes a little bit to the right, pretty awesome. And I think it's better to decrease the opacity of these texts to 50%. Fantastic. Now let's group them. I'm going to call it Thanks, field slash active, and let's create a components out of this pretty good. However, make sure to align your takes to the left like this could also add totally out to this. But for the purpose of this video, I'm gonna live it capacities. Now let's duplicate it. I'm going to detach it from its master, and then let's change the color to something like this, okay? And this one as well, and it's going to be 50%. This one is going to be the error state, so let's change its name to error, and I'm going to create a component. So now if I goto assets in local components Micro One, we can see that I have text field and here I can use it easily. Let's change it to my name. OK, Pretty awesome. And if I want to change it to the error state, I can changes here easily. There we go, so you could make your card as a component. Your buttons you're takes feels your sliders, every single thing, and it's so useful and powerful, and it's gonna accelerate your design process. So now we have created our components, and we can use them locally. However, if you want to share these components with your teammates, you can easily head over to Asset Section and you can click and these icon team library. And here you have the ability to publish your car and file the other team members, and then they can use all these components in other projects and other files, which is pretty cool. Keep in mind that we're going to practice all these knowledge in the futures lessons because we're going to create our own real world projects based on these knowledge. So don't worry if you don't understand every single thing here. It's totally normal and you're going to learn it by practice. So I hope you enjoy this video. Thank you so much for watching it. And I will see you in the next video. 42. Layout Grids: Hi, everyone. Welcome back to another reading off this course in this video we're gonna be talking about the layout greets, basically, layout greets will help us to design precisely. So we can understand where exactly are objects should be placed or how you could place your objects in different screen size. So in order to add a layout greed, you can head over to the properties panel or inspector, and right in the middle, you can see the layout greed section and I'm going to click. And these plus buttons like this and in the advanced setting you can set the size. For example, I can city to eight if I'm going to use it for designing mobile applications, and I can set it to 10. If I'm designing a webpage, you can also modify the color like this and the capacity. Of course, if you want to change the type of your layout greed, you can easily head over to these drop menu. And as you can see, we have three different options. The 1st 1 is greed, and this is what you can see here. The 2nd 1 is columns, and in this case you have more options to modify. For instance, you have count, so it means the number of your columns that you want to use. If you're designing a webpage, you can set it to 12. It's the most famous layout greed for designing our page. Then you have type with and margin. The with is disabled because we're using the stretch type. So it basically means that it stretches all the 12 columns across our art board. So if I change it to center, you can see that the with will be enabled. So I can easily set the with 2 30 or even 60 like this. And it's center. Okay, The gotta amount is the space between columns and rows, and here you can set it to right. You can set it to left and stretch. So when should you use center? For instance, if you're designing a webpage for an ultra wide screen, you can use this center option. You can also change it to rose. As you can see, the next important point that I'm going to mention is that layout grades do not depend on the dimension of your artwork. So it means that if I try to resize this art board like this, you can see that your layout created will be intact. All right, guys, that's all for this video. I hope you enjoyed it. And I will see you in the next video. 43. Plugins: Hi, everyone. And welcome back to another video of these course in this video, we're gonna be talking about plug ins in fig MMA. Actually, plug ins are third parties, creeps or applications that extends the functionality of another application. So, in order to do something quickly or even magically, can use plug ins in your project Now I'm gonna show you how you can find them, how you can install him, uninstall them and finally, how you can use them. So let's go to plug ins right under recent section in your dashboard. And this window is divided into three different sections. Featured plug ins, popular and installed. Okay. In the featured plug in section, you can find all the featured plug ins by fig MMA. As you can see here, we have simply hand off. We have Victory three D, which we will learn about in the three d modeling section of discourse. We have Master Arrow token document, etcetera. There are countless plug ins out there that you can using your project. However, now I'm going to show you the most important and the most popular plug ins, and we're going to learn how to use them So, as you can see in the popular section, we have these plug ins. Okay, The 1st 1 is called On Splash, which is so useful, so if I click on that, you could see the description. Here you can insert beautiful images from one splash straight into your designs. Okay, it's a great plugging, and also it's a great website. You could use royalty free images from this Web site, so inerting, solid plugging. You could click on this button, and that's all it's installed. And if you want on, install a plug in can again click on that, and it's not pretty cool. You could get all the information about this plug in here, frankly, can see all you can learn about each different version. So let's go back to plug ins. And here, as you can see you have on a splash in the installed section, then we have content. Riel. It's another good plugging that gives you randomized data in order for you to design everything which really later. So I'm gonna install it as well. Then we have charged you can create different charts. We don't need that. For now, you have a map maker which is so cool you can easily write your address in these text field , and it creates you a Google map screen or even a map box screen. So let's install it as well. We have isometric. It's so cool. I'm gonna install it. We have rectory three D. It's installed it as well because we have a complete section about three D modeling in this course, so you could use three D models in your design. Then you have rename is a femur. I'm not gonna install them now. Now let's click on browse all plug ins and here I'm gonna look for a plugging calm brand Fetch. There we go. It's the 2nd 1 I'm gonna insult it as well. Let's look for palate. Here we go. And that's all for now. As a matter of fact, you can go ahead and install all of them. However, in my opinion, it's better to go and check your description out. Get some information that how these plug ins work and then you could decide which one is suitable for your project. So now let's create a new file, and I'm gonna press a tow, add an art, Bored. I'm going to choose Micro Crow. Then let's create a rectangle here. I'm gonna increase the corner radius to make it nice. Now, once my object is selected, I can head over to the menu section and here I can open up plug ins and I have all my plug ins ready here. So for now, I'm gonna choose on a splash. And keep in mind that you can use only one plugging at the time so you cannot use two or more plug ins at the same time. So now we have on Splash Blufgan opened, and you can easily click on Insert random. And there we go. You can get a random picture immediately. It's pretty cool. You can also choose these presets, for example, minimal or nature colorful. That's pretty cool. Of course, you can search as well. For example, let's right portrayed. And there we go. It's pretty awesome, isn't it? So you can easily choose one. Fantastic. So can you see how amazing and powerful these plug ins are? So now I can create a text that's right name. I'm gonna increase the size to 40 and then let's go to plug in section and I'm going to select content. Really? So now, as you can see, you have different options. In these planking, for instance, you have Tex, you have Al Attar's. You have icons. So first of all, let's try out this takes option. As you can see, I have selected my name takes layer and I'm going to click on this names. And there we go. You have a random name. If I click once again, you can see that I can get random names here. If I click on these darts, you can define some settings. For example, you can set whether you want a US English name French, Spanish. So if I choose French, we can't. We can apply. And there we go. You can even change the sex. For example, here we have mail or female. You can specify whether you want only first name or last name like this. And you could see the preview off your defined settings here. Pretty awesome. Now, if you want to get a phone number, we could click and phone. There we go. If you want to get an address, you could get an address. And here is your address. You could get numbers, you could get date and time like this. Surprisingly, you can also generate some Laura MIPs. Um, content like this, you can get email addresses and some murals like this. Now, let's try the avatar section and icons. So first we need to create a circle, and then I'm gonna click on avatars, and here I can use male female made on female. So I'm gonna choose female. There we go. It's pretty good, isn't it? So if I duplicate the serial multiple times and I select all of them and technique on main and female, you could see that I got the friend pictures for each circle, which is pretty amazing. And if you want to use icons first you need to download some funds because these are not PNG icons. Okay, that you could use easily. First, you need to download some special funds and then you could use the Lycans are right. Now let's try the map maker. First, I need to make sure whether I install it or not. It seems that I forgot to insult it. So let's click on manage plug ins and let's browse all plug ings. I'm gonna look for map maker. Let's install it. I'm gonna go to plug ins and there we go. So here, let's insert an address. I don't know. Let's right, Harrison. There we go. You could be more specific. You could add some numbers, However, for the purpose of this tutorial, I think it's enough. You could also decide whether you want to get a Google map screen or a map bucks. Okay, like this, we can also modify some properties here. For example, we can change the map type from roadmap to satellite toe hybrid. You could also change the zoom level. For example. I'm going to modify it to 16 like this, and you can also add a market, for example, this one That's pretty awesome. And the next plugging that we're going to talk about is Brand Fitch. Okay, there are times that you may need to get a logo from a website, and it's time consuming to go. Just searched for that logo savings and then inserted two fig MMA instead of that, you could use this plug, So suppose that we're going to get the apples logo if I just right there, the main name, like their website apple dot com, and I could You can get logo. You could see the apple logo immediately, and I can scale it can scale it down. So let's try and other logo as well. Brand fetch. That's right, Fig Mothers come and there we go. It's pretty amazing, isn't it? And the next plucking we're going to talk about is the palate. So if you want to create some great color palette, but you don't know how to choose your colors, this plugging lets you create amazing color palettes in a second. As it can see, you can change it from standard to user interface like this. You can refresh it. You can choose a photo in order to get some colors. From that, you can save it, and there we go. You have your color palettes ready to use, and you can get the hex color code right over there. It's pretty fantastic. All right, guys, In these video, you have learned how to insult plug ins out on and sell that how you can use that in your projects. I hope you really enjoy this video. Thank you so much for watching. It's unable to see you in the next video 44. Exporting: Hi, everyone. And welcome back to another video of these course in this video, we're gonna be talking about exporting your fines. As a UX designer, you need to know how to export your files properly. Inner toe. Hand them over to your developer or to your clients. So suppose that you want to export these images as in order to do that. First of all, you can select one object and then in the property section you have the experts section. If I click on this plus icon, you can see that you can modify these settings. As you can see by default. It said to one X What does that mean? It means that if you export it as a tease, you will get the same dimension off your file. However, if you're designing this for an application which requires you to have different fine size , you can open up this drop menu and you can set it to two x or three X. Okay, you can also write the Suffolk's here, and then you can specify the format, for example, that considered to PNG J P G svg and Pdf. And then you can previous and finally you can click on export and there we go. We can easily set a name Anglican safe. However, if you don't want to export your files and you want to just share this project with your teammates or with your client, you can head over to the toolbar section and click undies blue button, which is called share. And here you can invite someone to, well, this project or to edit this project. It's totally up to you. You can also copy the link and send it to someone else. Okay, if you want to present this project on your website, you can click on getting bad code and you will get an eye frame code which you can grab and copy and paste it in your html Fine. And you will get this project live on your website. So if you make any changes here, it will apply to your website as well. So it's pretty amazing are right, guys, Thank you so much for watching this video. I hope you enjoyed it and I will see you in the next video. 45. Prototyping: Hello, everyone. And welcome back to another video of thes course. In this video, we're gonna be talking about prototyping in fig MMA. As a UX designer, it is crucial to know about prototyping and so important to master this topic. Because no matter how beautiful and how amazing your designs are at the end of the day, if you can not present it in an amazing way, your hard work doesn't pay off. So you need to master this topic. And because of this reason, we have a complete section about prototyping in these course. So in this video, I'm going to show you how prototyping works. And I want to make you familiar with the concept. So without further I do. Let's get it started by adding to art boards. So I'm gonna press a on my keyboard and let's choose iPhone 11 pro or X. Then I'm going to duplicate that because we need to different our ports. And that's add a rectangle to this first art board like this. I'm gonna increase the corner radius to 40. Pretty good. Let me align it to the center. And then I'm going to choose a picture from our assets file, for instance, let's choose this one in cards folder number two. I'm gonna open it and let's put it here. Pretty awesome. Then on the second are poured. Let's create another rectangle pretty good. It should fit your art board and then I'm gonna place the same image here. Fantastic. So now it's time to add interactions. Tar design. So let me rename its inner to refer to that easily. So I'm gonna change the name to home and the 2nd 1 to detail. Pretty good, actually. If the user clicks on this image in our home art board, our detail art board should be presented in a second, OK, and then we need to animate it. So first of all, in the property section, you can select prototype from these three taps like this. Then you need to select your object. As you can see my images selected already. And as you can see, a circle appears here. So if I click and that's and hold my mouth's like this, I can easily connect it to the next our board. Let's drop it. And there we go now are art boards are connected, okay. And if I want to remove this connection. I can drank and drop. It's the canvas like this. Once you created your first connection, a small blue square will appear at the top left corner of your first our birth, and it means that your prototype starts from this artwork. If you want to change it, you can easily click on that, drag it and drop it here like this. So now that we have created our interaction, let's preview for a second. If I go to the toolbar and click on this preview button, I can see my art boards here. And if I click anywhere in my art board like this, you can see that it shows me that there is an interaction for this image. So these blue box is a hot spot Now, if I click on that, you can see that my second art board appears immediately Okay, However, we don't have any animation here, so let's go back to our project file. And in the prototype section, you have interaction section. You have animation. Okay. Here we can choose the type of interaction. For instance, we have on tap on drag while hovering wine pressing mouse. Enter etcetera. We're not going to dive into these details right now because we will cover it in the prototyping section of this course. You have also the destination here. Navigate to open, overlay salt with back close overlay and open your L. And here is your destination. Then we have the animation section as well. As you can see it said to incent by default. So if I open up this drop menu, I have plenty of options. I have smart animate, which is a new feature we have moving, move out, push, sliding and slide out. So now I'm going to choose smart animate. And here we have advanced options. For instance, I can choose is Ian is out is in and out, and Lanier is a related to animation stuff. We will cover it in the advanced section and here you have the time. For instance, I can set it to 400 milliseconds like this. You can also open up the prototype setting here it is related to this window. We can modify, for example, the background toe white like this. As you wish, you can change the model of your iPhone. For example, here it said to gold. I can choose Midnight Green like this. Fantastic. Now let's check it out. Once again, I'm gonna go to the first page and now let's click on our image. There we go. It is fantastic, isn't it? If you want to start over, you can click on this button, restart, and then you can check it out once again. So now let's go back to our project file. And here, as you can see, the name of our rectangles in these two art boards are different. So let's make them the same. So I'm going to change it to image and this one image as well. So what do you think is gonna happen? Let's check it out. I'm gonna go to prototyping. That's Restart that. And once again, I'm going to click on that. Fantastic. Did you see the difference here? So with the help of smart animates, you could create these kind of animation and prototyping easily in fig MMA, which is pretty amazing. And you're going to dive into more complex animations and more complex prototyping in the prototyping section of this course are right guys. That's all for this video. I hope you enjoyed it. And I will see you in the next video 46. Multiplayer & Commenting: Hi, everyone. And welcome back to another video of these course in these video, we're gonna be talking about multiplayer and commenting. Okay. As a matter of fact, Sigma has powerful features in order to make the collaboration off designers easy. So as I already mentioned, you can easily share your project with this blue button. So if I click on that, as you can see, I already invited one person. And I defined a setting that he can edit this project. And then he received an email from Fatemeh. He accepted that and from now on, he can collaborate with me in order to edit this project. OK, so as you can see in the toolbar, there are two people viewing this project. The 1st 1 is me. The 2nd 1 is this person, which is also mean this tutorial. So now I'm gonna show you how you can use that. Let me switch to this. You I design account. There we go. Suppose that I choose this layer. Okay. If I go back to my main account, you can see that it has been selected already. Okay. By who? This year I designed. So if I change the position of my cursor here. We can see that it will immediately change in this project as well. Or let's select another object. For example, this menu and there we go. You Any design is doing something with this layer. Okay? And if I select the background here, this is my account. When I switched to the other account, you can see this purple stroke, which indicates that I chose this background. Okay, you can see these colors in the toolbar in order to recognize which person is selecting which object. It is pretty cool, isn't it? Now suppose that I want to add some comments here. Okay, So in the toolbar, right next to our text tool, there is another icon for commenting. So if I click on that, I can place a marker here, for example here. And I can write a common. For example, where is the c t A. Which is called to action. Okay, I can post it. I can even mention someone here like at you. I design and this person will get an email about this comment and he can reply to me. Okay, So done. And in these accounts, you can see that there is a comment. So I click on that are right. Where is the city? A. I can reply. I will design it Point tonight. You can also add an emoji here. Pretty cool reply. That's awesome. And here in my account, I can see the reply immediately, which is pretty fantastic. And if this problem has been solved, you can click and resolve bottom and this comment will be removed. So as you can see, figure offers you plenty of features in order to collaborate with other designers without exporting your files and sending them and all those stuff so you can instantly cooperate with others and share your ideas about your design are right, guys, that's all for these video. I hope you enjoyed it and I will see you in the next video. 47. Keyboard Shortcuts: Hi, everyone. Welcome back to another video of the scores in this video, we're gonna be talking about Keeper Chore Cuts in Fig MMA. As a designer, it's so important to know the most important short cuts off the platform you're using for designing. Because of the fact that Fig MMA is a cross platform software, it's too difficult to cover all those short cuts in one video. However, instead of mentioning and discussing all those short cuts, I'm going to show you a very great and quick way that you could find out the shore country need for your workflow. Okay, so whether you're using Macron's or RINOs, you could use this fe in both operating systems. As you can see right at the bottom. Right, there is a question mark icon. Okay, it's called Help and Resource is. So if I click on that, you can see there's plenty, um, options here, and one of them says keyboard shortcuts. And this is exactly what we need. So let's click on that keyboard shortcuts. There we go. Now we have access to all those short cuts in one single place, So as you can see, it's categorized in different sections such as essential tools view, zoom, text shape, etcetera. And because I'm using Macal as, for instance here, it shows me command key. OK, but if you're using windows for sure, you will see control here. Or, for instance, if I go to view here, I have command for you. If you're using Windows, its control for sure. So in these very you can easily find a short cuts you need. But now I'm gonna mention some of the most important short cuts you may need. For these course. Let's start with copy and pasting. So, like, other suffer for copying and pasting, we can easily choose your element like these texts. And you can use command, See? And if you want to paste it, you can use Command V in Mac OS. Okay. However, if you're using Windows, you can press control C and control we and you could get the same result. Okay, if I want to group these layers together, for instance, this Windows and Mac Os like this, I can press command G on my keyboard. However, in vin does, you can press control G. If you want to duplicate something, you can select your desire layer and press command D Okay, In micro s, if you're using windows, you can press control the instead for scaring something. You can either go here and choose the scale tool, or you could press k on your keywords. It doesn't matter whether you're using a Mac OS or Windows because you don't need to use command or control keys. You just need to simply press K on your keyboard. And as you can see now, the scale tool is selected. And last but not least, if you want to check the pad ings and margins, you can hold option key on your keyboard if you're using Mac Os like this and hover your mouse on top of other elements near your selected elements, so as you can see now I have this number which is indicated with a red text. And this is the padding between these two elements in windows. You can hold all key on your keyboard and do the same thing. And if you want to zoom out, we can hold command key and scroll like this. So militants who mean in windows you can hold control key and do the same thing all right guys, that's all for the CDO. I hope you enjoyed it and I will see you in the next video. 48. Intro to UI Elements: Hi, everyone. Welcome back to another section of thes course in these section. We're gonna be talking about you elements which are so important when you're designing a user interface. In the next years of videos, we're going to talk about tax bills, bottoms, sliders, cards, dialogues or even steppers and charts. So if you're confused about all those elements, I suggest you watching this section. So see you in the next series of videos. 49. Text Fields: Hey, everyone will come back to another video off this section. In this video, we're gonna be talking about text fields, As you may know, takes feels are you elements which allow users to enter attacks into a u I. They usually appear in dialogues and forms. Almost every mobile adapts and also website use at least one kind of text fields, for instance. You can use them for entering dates, names, time, etcetera. As a U I designer, you need to know what the anatomy of a text field as described in the picture. You may find different kinds of tax feels on different platforms, so it is recommended to know about the standard your elements that a specific operating system uses. If you look at the picture on the right, you can see that we have the anatomy off a text field. As you can see, we have label. We have the input text. We have the trailing icon, which is optional. As you can see, it's number three. Also, we have activation indicator. Sometimes you may use voice input icon or even a drop down icon, and at the end you can see that we design different States off attacks field. For example, if the user enters the password incorrectly, the text fields color may change to something else for instance, red. 50. Buttons: Hey, everyone in these video, we're gonna be talking about bottoms in design bottoms let users take actions. So one of our user needs to do something. Bottoms coming to play. I think now you understand how important it is to know about bottom designing. When you're designing a button, make sure to pay attention to the falling points. Number one states design all states off the bottom, such as active, inactive, tapped, hover, etcetera. Number two hierarchy know about the hierarchy of your buttons, for instance, whether it's high emphasis, medium emphasis or law emphasis. Number three placement multiple button types can be utilized to represent various emphasis levels. Number four takes button text buttons are typically used for less pronounced actions, for example, in dialogues and cards and last but not least, contrast buttons should have enough contrast to stress the importance off they functionality. So if you look at the picture on the right, you can see that we have different states off the bottom. For instance, we have active. As you can see, it has a sharp color, and the capacity is 100%. On the other hand, we have inactive to show that this button is disabled for now, which is grey here, and also we have tapped. So when the user taps that button, it changes to that specific color. As you can see, we have that's light blue, and at the end, as a conceiving have for different buttons, we have text button. Also, we have outlined button and then contain button and also toggle button, and you need to use them carefully when you're designing a user interface. Because it is so important to no the users expectation and also in terms of user experience , it's better to use the correct type of bottom in your design. 51. Sliders: Hey, everyone in these video, we're going to talk about sliders in design. Sliders allow users to make selections from a range of values. They are ideal for adjusting settings such as brightness, volume, etcetera. Sliders can have icons on both sides of the bar. When you're designing a cider, make sure to pay attention to the following things. Number one states design all states off the Steiger, such as enable disable, tapped, hover, etcetera, just like buttons. Number two. Adjusting sliders should only be used for choosing selections from a range of values. Number four quickness. Sliders should react immediately, so changes must be instantaneous. And last but not least, accessibility Sliders should provide the whole range of choices available to the user to select from. If you look at the picture on the right side, you can see that we have two different sliders. The 1st 1 is continuous slider, and as you can see in thes kind of Snyder, you can modify it continuously and without any interruption. On the other hand, in the second type of sliders, which is discreet slider, you cannot modify it without any interruption. There are some fixed points that the user can choose from 52. Tooltips: Hey, everyone, in these video, we're gonna be talking about tool tips in design Tool peeps are for displaying informative text when users hover over, focus on or tap an element. When you're designing a tool tip, make sure to pay attention to the falling things. Number one conciseness Tool tips Should Onley display a brief text? Don't add an image or detailed information. Number two Pairing tool tips are always paired nearby, the element with which they are associate ID and last but not least, transitory tool tips appear on hover, focus or touch and disappear after short duration. They recommended time ease 1.5 seconds. As you can see on the right side, we have a tool tip, which shows informative text. We have a short cut for bold, and also we have additional information here, safe for confirm button, so make sure to use them properly. 53. Selection Controls: Hi, everyone In these video, we're gonna be talking about selection controls. Selection controls allow users to easily select between different options. It's useful for declaring preferences such a settings. When you're designing a selection control, make sure to pay attention to the following points. Number one Familiarity. Selection controls have been used in you. I design for a long time and should be utilized as expected. Number two efficiency selection controls let users easily compare two or more options. And last but not least, scannable selection controls should be appear in a way that users can recognize them at a glance. Selected items should be visually distinguishable from one selected items. As you can see on the right side of the screen, we have three different selection controls. The 1st 1 is speeches. It's useful for targeting a single option on or off, and it is so popular. The next month is radio buttons. They are useful for selecting a single option from a least, and the last one is check parts, and it's useful for selecting born or multiple items from a least, so make sure to use them in the right way. 54. Chips: Hey, everyone, In this video, we're gonna be talking about chips. Chips allow users to make selections, trigger actions. Enter information, etcetera. Unlike buttons, which should be a consistent counteraction, chips should appear dynamically as a group of multiple interactive elements. When you're designing a chip, make sure to pay attention to the following things Number one states. Just like bottoms and sliders. You need to design all states of your chips, such as in able disable tapped, hover etcetera. Number two relevancy chips should have a helpful relationship with the content or task they represent. And the last one compactness chips are compact elements that represent distinct information . If you look at the picture on the right side, you can see that we have different chips. Some of them have icons or even an image. On the other hand, some of them only have a text, so make sure to use them in your urine design carefully. 55. Cards: Hey, everyone, these video, we're gonna be talking about cards in user interface design cars are containers that display content and actions on a single subject. They must be easy to scan, and elements such as images or texts should be placed on them in a way that certainly indicates the hierarchy. When you're designing cards, make sure to pay attention to the following things. Number one individual. A card cannot be divided into multiple cards. You should not marriage a card with another one number to independence. A card doesn't need to rely on its surrounding elements. It can stand alone and last but not least, components. A card can optionally have reach media such as images or videos, Tex Barton's icons and film nails. Nowadays, most designers use cards in there. You I design, so if you want to use them as well, make sure to use them carefully 56. Dialogs: Hi, everyone. In this video, we're gonna be talking about dialogues. Dialogues inform users about critical information or even tasks. They also ask users to make a decision or choose between different options. For example, dialogues can be used for asking for permission or even choosing from a range of different variables on a Snyder and so much more When you're designing dialogues, make sure to pay attention to the following things. Number one hierarchy, a dialogue has the highest hierarchy, and it blacks the APP usage until the user tanks a dialect action number two visibility die unlike must be recognizable easily. So I recommend adding a dark overlay to the view and putting the dialogue on top off That's number three. Straightforward dialogue should convey the message in an understandable and clear way. And lastly bottoms, I recommend using side by side buttons on a dialogue, as you can see in the picture 57. Lists: Hey, everyone, in these video we're gonna be talking about lists. Least are a continuous group of images or texts. They are composed of items including primary and second reactions, which are represented by icons on texts. When you're designing lists, make sure to pay attention to the following points. Number one consistency least must present icons, tax and actions in a consistent format. Number two action police show content in a way that makes it easy to recognize a specific item in the collection and act on it. And last but not least, scannable at least should be classified in logical ways that make content easy to scan. As you can see on the right side of the screen, we have different kind of lists. For instance, here we have your contacts. As you can see, it's composed of images and tax, and also it has an icon 58. Tables: Hey, everyone in these video, we're going to be talking about tables. Tables are containers that show users different records, such as products, prices, status dates, etcetera a day. The table contains ahead a row at the top, at least Colin names, followed by rules for later. They're usually scroll herbal and easy to scare. So if you need to populate some data, which are sore doble and follow the same pattern, you can use tables when you're designing tables. Make sure to pay attention to the following things. Number one expandable rows in the table can be expandable in order to allow the user to evaluate additional information without losing its context. Number two pagination pagination works by presenting a set of numbers, interview with the ability to navigate to another set and, lastly, fix headers. Fixing the row header while a user scrolls through a table helps the user to know about the column name 59. Navigation: Hey, everyone, in these video, we're gonna be talking about navigation. Navigation is the act of moving between screens of a nap to complete tasks. For instance, you can navigate from explore page of a nap to the profile page. There are different types of navigation. Number one lateral. It refers to moving between screens at the same level of hierarchy. The main apse navigation component should provide access to all destinations at the top level of its hierarchy. Number to forward. It refers to moving between screens at consecutive levels on hierarchy and last but not least, reverse. It refers to moving backward through screens, either hierarchically within a nap or karna logically within one app or across different APS. 60. Menus: Hi, everyone. In these video, we're gonna be talking about menus in user interface design. A menu displays at least of choices on a provisional surface. It appears when users interact with a button action or other kinds of controls. Menus allow users to make a selection from multiple options on like selection controls. Menus are less outstanding and take less space. When you're designing menus, make sure to pay attention to the following points. Number one scannable. Many options should be easy to scare. Number two quick menus should be easy to open, close and interact with, and last but not least, placement menus appear in front of all other your elements. 61. Charts: Hello, everyone In these video, we're gonna be talking about charts. Charts help users to compare Values individualized away When it comes to comparing many values, it's much easier to look at charts right area numbers and agreed. When you're designing charts, make sure to pay attention to the following things. Number one. Visibility. Visibility of a chart. It's so important because sometimes you have a chart with very small details. Number two consistency. Place your charts on a card in order to keep your design clean and consistent. Lastly, margins. Make sure that there is enough white space between your charts and other elements later on . In these scores, you will learn how to create charts and how to use them in your projects. 62. Steppers: Hi, everyone. In these video, we're gonna be talking about steppers. Sippers show progress through a sequence of logical and numbered steps. Sometimes you may use them for navigation. Suppers may display a temporary feedback message after step is saved. Using steppers could help users to avoid losing their focus when they need to feel up forms or take some action. When you're designing steppers, make sure to pay attention to the following things. Number one sections do not embed steppers into other steppers or you've multiple steppers on one page. Number two types. Generally, there are two types of steps. Editorial steps and non edible steps. We have horizontal steppers on vertical steppers and lastly feedback. You can optionally design transient feedback to show the users the progression. You should only use feedback whenever there is a long, latent see between steps. 63. Snackbars: Hi, everyone. In these video, we're gonna be talking about snack bars. Snack bars provide concise feedback about an operation through a message at the bottom of the screen. They should contain a single line of text directly related to the operation performed. They may contain a bottle as well. When you're designing stacked bars, make sure to pay attention to the following points. Number one. It should be brief. Snack bar should only display brief information about an operation and not detailed information. Number two transient snack bars automatically time out from the screen so they should disappear quickly and last but not least, hierarchy. If the action is important enough to black the APP usage, you can use dialogues instead of snack bars in the snack bars. Only use one button if it's needed and not more. As you can see on the right side of screen, we have two different examples. The first group of snack bars are designed perfectly because it doesn't have more than one button and the Connors that have been used or great. However, on the other hand, the second group off our snack bars has two buttons, which is not ideal for snack bars, and also it used an icon. In addition to the text 64. What is Wireframing?: Hi, everyone in these video, we're gonna be talking him out via framing. Violent framing is a way to design an APP or website services at the structure or level. A wire frame is generally used to layout contents and functionalities. On a page, which take user needs and experiences into account, we can consider wire framing a graphical skeleton similar to the blueprint of a car. The viral frame determines the details off the whole project at the initial stage as the project description, Most beginners think that wire framing and prototyping are somehow the same. However they are not. A wire frame is a low fidelity design, so it does not illustrate the final appearance off the user interface. On the other hand, a prototype is a high fidelity design, and its dynamic and interactive prototyping looks almost like the final product. 65. User Flows: Hi, everyone. In these video, we're gonna be talking about user flow. User flow is a path taken by prototypical user on an APP or website. To complete a task. The user flow directs them from their entry point through a set off phases toward a successful outcome and final action, such as sending a message or purchasing an item. Let me give you an example of a very simplified user flow for an e commerce app. The user starts from the home page from the home page. The user clicks onto a category page. Then, from the category page, the user clicks on a product and then from the product page, the user adds an item to the card and then from the shopping cart to use their checks out. And after that, from the check out page, the user completes the payment, and in the end the user can get his or hair received. So this is how a user flow look like, and it's very important for every project to have at least a simplifying user flow 66. Interactive Prototypes: Hi, everyone. In these video, we're gonna be talking about interactive prototype. Nowadays, prototyping is playing an increasingly vital role in the design process. So you, as a young UX designer, need to know how to make a high fidelity prototype of your project in a way that it can clearly convey the message of your design and also the exact interaction you want to achieve. Not only can prototyping help you as a designer to show off your work, but also it can help developers to know how your designs should be converted to code. Here are some useful tools you can use for interactive prototyping sketch. It can be used for simple interactive prototyping. InVision studio It can be used for modern and complicated interactive prototyping principle . It can be used for modern and detail, interactive, prototyping and so much more. For instance, you can use proto pie as well for advanced prototyping 67. Wireframe tools: Hi, everyone in these video, I'm going to talk about wire frame tools. Now that you know the importance on wire framing in your UX design, it's time to talk about the tools, which are absolutely useful for preparing your wire frame. Although some designers prefer to use standalone software for wire framing, there are designers who prefer to use Web based tools for wire framing. No matter what way you like to choose, make sure to keep your wire framing consistent. Here are some useful tools you can use for wire framing Number one Mike Flow. You can use mike flow dot com, and it offers a variety off free and paid services. Number two figure. You can use feet, Mother Calm, and it also offers free and paid services. Number three sketch. It's a paid application and last but not least, Adobe X'd, which is free, and you can insult it on both Mac OS and Windows 68. Wireframing in Figma: Hi, everyone. Welcome back to another video of these course in these video we're gonna be talking about via framing in fig MMA. As I mentioned before in previous videos, creating a low fidelity wire frame is an important task for a U. N UX designer. So in the CDO, I'm going to show you how you can create your own wire frame using the pre made wire frame . You like it by figure. So first of all, I'm gonna ask you to open up this your ill Fatemeh dot com slash templates slash wire frame dash Keats. Okay. And on these page you can find thes wire frame kids that has been designed by feet, Mom. And if you scroll down a little bit, you can get a free copy of that. So click on that, and then you will see something like this. Okay, this is a pre made when your friend you want kids, which has been designed by fig MMA, and I'm gonna show you how you can use this. So, first of all, as you can see, you have three different pages. Start build your own an example. So, in start page, if I zoom in a little bit. You can see that you have some information about all those components. For example, we have buttons and cards. We have navigation. We have here a sections. We have social proof. We have features left features, right, etcetera. OK, then we have feel your own and examples. So let's open appeal your own. And here you have a frame. I'm gonna delete this component and suppose that we're going to create avoiding a frame for a website. Okay, so first of all, we need a hero section, so I can easily go to assets. And here I have plenty of components. Okay. I have hero. I have food, her features. Right. Feature left ct a etcetera. Let's start with here. Oh, and here I have three different options. I'm going to start with the 1st 1 that's drag and drop it here. I'm gonna put it here and aligning to the center. Perfect. As you can see, it's the hero center, so I can easily go to the incense section off the inspector. I can open up this drop menu and from here I can change it to whatever I want. For instance, I can change it to hero side image. Right? Like this. I prefer this one because I haven't image as well. So let's stay with this one. Then. I'm gonna increase the high size off my friend. So let's increase it a little bit toe. Have more space to work with. Perfect. After that, I'm gonna add some features. So let's open up features, right? Pretty good. And I'm gonna use this month Fantastic, because it's a low fidelity wire frame. You don't need to worry about all these information, all these colors, so keep it as simple as possible. Then I'm gonna add some posts. So let's open up the post section. And from here, I can use post tail like this off course. You can edit thes takes and all these contents if you want. And after that, I'm gonna have some social proof such as testimonial that to use this one, it looks great. And after that, I need to have a CD A So let's open up CT A. And I'm going to choose ct a center pretty good. I need to increase the height of my frame. So let me select it are right. And last but not least I'm gonna add a food her because it's necessary to have one. So let's use this food or fool fantastic. And that's all. So, as you can see, I didn't add any navigation, but it's necessary to have one. So let's go and add one navigation. I think this navigation right is a great option like this. Fantastic. Now I need to decrease my height size, and that's all. So now if I preview it, you can see that I have the navigation. As you can see, I have a logo, some menus at the top, and I have a registration button. And here I have my hero section, which consists of some techs and a CD A and also an image. Then I have my key feature like this. And after that, I present some posts and then I have the social proof. It could be reviews, testimonials, anything. And then I have another c t a here, which is my last city A. And after that, we added a footer, okay, And here I have all the lings related to my website. All right, guys, did you see how easy teas to create your own wire frame? in Fig. MMA are right. That's all for this video. I hope you enjoyed it. And I will see you in the next video. So see you there. 69. What is a Color Style?: Hi. Welcome back to another section of the scores in this video. We're gonna be talking about the color Stein. What's the color style? As a matter of fact, every brand has a set of colors that they stick to. So, for instance, when you think of Tweeter, I'm pretty sure you think blue. So in the section, we're going to create our own color style or, let's say, our own style guide to help us during our design process. So I will see you in the next video. 70. Primary, Accent, Semantic Colors: Hi, everyone. Welcome back to another video of these course in these video, we're going to start creating our style light, okay? Or our design system, which is very important when you want to work on a complex project. Okay, so at first, it may seem that there is lots of work to do. However, it's worth it. So first of all, we need an art board. Okay. As you can see, I have created a Mac book Pro Arte board and I'm going to change its name to colors. Nice. Then let's go ahead. And in certain rectangle like this, I'm gonna increase the corner radius to make it round it. But mizzou mean make it smaller. The with is going to be five, and the height is going to be 64 for now. And I'm going to change the color to 41 35 f 33 denies. Then let me move it to the left side a little bit. And here I'm gonna insert a text and it's right colors. I'm going to use SF pro around it. He denies, and let's increase its size to 24 points like this and it's going to be regular. However, I'm going to change the color co two for a for A and for A or right, Let me a line it vertically, and I'm going to make it a little bit smaller. I'm gonna group that. Fantastic. So now we need to create our sections because in colors we have different sections. For instance, we have primary colors. We have accent colors and we have semantic colors. Of course, you can have background colors as well. However, in the state Auriol, we're going to create primary accent and semantic colors. Okay, so now I need a line like this. I'm gonna hold shift and I'm going to change the color to e four e four and e four. Okay. Like this, Then I need to add a text. That's right. Primary colors. I'm going to choose the same color as a used for these texts. So let's copy and paste this hex color code. Fantastic. I'm gonna align them to the left and its bottom padding is going to be eight pixels. Let's group them and I'm going to call it primary colors. Fantastic. It's pretty nice. Then I need to create a square here like this and let's make it round it fantastic. Then we need to change the color to four yuan 35 f three. Actually, this is the color that I want to use in these tutorial so you can use different colors for your design system and keep in mind that you can always change them. So if you're not sure why and how I choose thes collar, it just depends on your project. And he takes some time to understand how you can create your colors pallets properly. Okay, but now we just want to focus on creating our design system, and I'm gonna show you how you can do it properly so the colors do not matter, are right. It's top heading is going to be 16 peak cells. I'm going to duplicate that like this with a 16 pixel left padding. Once again, duplicate that and once again, OK, so we have four different squares. I'm going to select the 2nd 1 and I'm going to decrease its capacity to 75% like this. And the 3rd 1 I'm going to change it to 50%. And the last one that city to 25%. Okay, The reason that I changed the capacity is because sometimes we need to have different states of each color. For instance, if you're creating a bottom, it may have different states such as active, the active hover, etcetera. OK, for instance, if you're using these color for the active state, we can use other colors such as this one for the Harbour State. Okay, so it is quite necessary to have different versions off your color. All right, now let's elect the first square, and I'm gonna go ahead and click on these four darts and dang click on this plus button. And here I'm going to write colors slash primary slash pair pill 100% and creates time. Okay, fantastic. And then the next one colors primary. Her poll. 75%. I'm going to copy it, and then the next one it's going to be 50% and the last one is going to be 25% like this. Okay, fantastic. All right. Now let's select all of them. Group them and it's going to be primary colors. And let's hold, shift and click and this Primary Colors title once again, group them and I'm gonna name it Primary Colors. Then I need to duplicate it like this, and that's changed its name to accent colors. And I think it's a good idea to decrease the fund size a little bit. For instance, let's set it to 20 this one as well. Now it's better. And now let's select the 1st 1 First, we need to detach it from its style and the same thing for others. So now let's select the 1st 1 and then change the color co. Two b E five to F and two pretty good. That's copies, and I'm gonna pay sit for others. Fantastic. And now we need to create the color style for these Connors as well. So let's repeat the procedure here. We need to write colors. Accent slash. That's right, Purple one and this one as well. Colors accent purple to that's competence, and here is going to be propelled three, and the last fun should be propel for. You can name them as you want, however, keep it as organized as possible. Okay, then I'm going to rename this group to accent colors fantastic and also this one and once again duplicate them and here is going to be semantic colors. First, we need to detach it from its style. And we don't need this last one because we're going to have only three different versions. So let's select the 1st 1 I'm going to change the color CO two double F cf and five. See? Okay, I'm gonna competence, and that's pace it for others. All right, now, let's go ahead and create our color signs. So let's write colors semantic and let's write orange one. I'm going to copy this. The next one is going to be orange, too, in the last one. Orrange three. Great. We need one more semantic color, So I'm gonna duplicate them like this again. We need to detach them from their sile like this, and that's a like the 1st 1 I'm going to set the Connor Co. Two, Double 0 84 F four. Okay, let's competence and paste it for others. Fantastic. Now the last step. He's to create our color sign. So let's right colors Semantic blue one and then blew two. And finally, blue three are right guys, we're almost done. However, I'm going to show you something and we need to cost A mites are color signs a little bit. Okay, so now that we have created thes color Stein's with different amount of opacity, we will have some problems if we decide to use thes colors on top off a colorful background . Okay, now that we're using them on a white background, we cannot understand the difference. However, I'm going to show you something. So let's create a rectangle here, OK? And I'm gonna move it down right below our last group. And if I move it, you can see that actually, are Connors are changing because we changed their opacity, but we need to do one more step. Of course, for the first colors, nothing changes because the capacity of this first layer is 100%. So how can we fix this? The best way is to choose each one for example, this fun. Then go to color style than edit style and choose the eyedropper and click and these color and it's done. So let's do the same thing for all of them. There we go. It's a great technique for creating your color styles because sometimes you don't have all the colors cold. So in these cases can use thes technique, and then you can change the colors. So I'm going to do the same thing for all of them, are right, and it's done. So now if I create the same rectangle once again like this and I'm gonna put it right below our first group, you can see that our colors are not changing. So from now on, even if you use a colorful background on your design, your colors stay intact. Are right, guys, that's all for this video. I hope you enjoyed it. And I will see you in the next video. So see you then. 71. Grey Colors & Gradients: Hi, everyone. And welcome back to another video off this course in this video, we're going to continue creating hours, time guide or let's say, our design system together. So in these video, we need to have two more sections to our design system, which are gray background colors and Grady in colors. So to do that first we need to increase the height size off our art board like this. And I'm going to copy and paste one of these sections. Pretty nice. That's candidate Gray background colors. Nice. I don't need this blue line. And now let me detach them from their style like this. Pretty nice. And I'm going to duplicate the last fun because I need one more color. Fantastic. Now let's select the 1st 1 and I'm going to change the Color Co 2 28 37 4 B like this and let me create the color style. I'm going to write colors gray one. And for the 2nd 1 I'm going to copy the scholar code, okay, and that's pasted here, and I'm going to decrease the capacity to 75%. And after that, let's choose the eyedropper and click and this color nerd to get the same color with 100% capacity. Okay, then let's create the color Stein colors gray to. I'm going to copy this, and we need to copy the color code once again. So let's pace it here. Read 50% capacity on the last one. We 25% opacity like this and let me change them and the last one. Once again choose, I drop her and select the same color. Fantastic. Now let's create the third color style colors. Gray three. That's confidence and the last one colors gray and four. Fantastic. Now I'm going to rename the group to gray background colors that covetous and paste it for other groups as well. Like this pretty good once again duplicated. And now I'm going to rename me to Grady and Colors. And let's remove the last two colors because I need only two colors here, and I'm going to select the first fun. Detach it from its style, the 2nd 1 as well. And for the first fun, I'm going to change the color from solid to linear and let's elect the first color, and I'm going to change the color code to 41 35 F three and the 2nd 1 Let's increase the capacity to 100% and I'm going to change you to 71 68 F six. Then I'm going to change the direction to get something like this pretty good. Then let's create our color style. I'm gonna write colors Grady Int. One And for the 2nd 1 that change you too linear as well. The first color is going to be B 52 F two and the second color. We need to increase the capacity to 100%. And I'm going to change the Color Co two db a five and F five like this. Let me change the direction. Fantastic. And we need to create our color Stein colors great and to a last. But at least let's rename our group to Grady in colors for other groups as well. Fantastic. All right, guys. Now let's try out our Grady INTs. So I'm going to create a rectangle here, and it's apply our Grady ins, for example, this one. It's pretty fantastic. We can easily change it, and also we can choose the background color previous ounces is in it are right, guys. That's all for this video. I hope you enjoyed it. And I will see you in the next video. 72. Borders & Shadows: Hi, everyone. And welcome back to another video of thes course. In this video, we're gonna add Borders and Shadows to our Steingarten. So without her and I do, let's get started. First of all, we need to duplicate our art board like this and I'm gonna rename me to Borders. And that's changed his title to Borders as well. Fantastic! I'm going to remove all of them except the 1st 1 like this. Then that means you mean pretty good. And I'm going to change these title to Borders are right. And now let's detach these colors from their style one by one like this. And then I need to add a stroke because for Borders, we need to have stroke. So let's click on this plus icon like this. And then I'm