#FIGMA GRID HOW TO#
#FIGMA GRID FULL#
#FIGMA GRID DOWNLOAD#

If this video gets at least 2000 likes then I'm going to make another video at once level figma tutorial, where I'll be covering how to make a web design using the design system plugins, libraries, prototypes, and also how to save time as well. So we're going to start from scratch, I will not use any plugins, libraries or design systems just plainly from scratch, we're going to use all the tools that FEMA provided and we're going to make the design using the tools only.

So once we have covered all the tools figma carries, then we're going to start making a responsive web design for the next version first, and then we're going to start making the web design for the mobile version.īy the way, this entire video is made for beginners who doesn't know anything about figma. So first of all, we're going to look at all the tools figma carries. This entire video is divided according to these chapters over here, there is one over here, you're going to find the timestamps on the description down below. Okay, this one, and the mobile version will see this laptop and tablet.Īfter this tutorial, you're going to practice over here, okay, you're going to make this web design for the tablet version.Īnd also you're going to make the web design for the left version as well. So today, you and me together, we're going to design the Dexter version. Okay, let me actually zoom in a little bit like that, look at that.Īnd then this is the next section, third section, fourth section, and this is our footer over here.Īnd then we have our social media icons over here as well.Īnd then look at this teacher section over here. So this is a web design for the mobile version. Okay, so I'm going to click over here also, you're gonna find design for the laptop and the tablet version as well over here.

#FIGMA GRID DOWNLOAD#

So once you download the finger file, you're going to find all of these pages over here you see this, the next step carries the design for the next version.Īnd the mobile page carries the design for the mobile version. The laptop design also carries this style going over here and the next version, this one is at the very top, we're going to find this style guide over here.

The mobile carry the style guide laptop, the cabinet design carries the style guide as well. Okay, so this is our homepage, let me walk you through this.Īnd these are the style guides, I'm in the typographic guides that we're going to follow, okay, what will be the font size of the logo, font size of the large text, font size of the button, text, etc. Look at that we have the mobile design over here. I mean, this one over here, and this one carries the mobile design. So once you download the figma file, you're going to find all of these pages over here. This is the last page, you can download this entire figma file through the link in the description down below. This is the footer over here for this page.Īnd then we have this contact us page over here, you can see that so we're going to also work with icons, you see these icons over here, we're going to work with them, and also make some forms over here as well, you can check out the sign up page over here as well. So this is the teacher section over here, we're going to make some cards over here along with some buttons. Okay, so this is the home page, I mean, the landing page over here, and then if I scroll down, then we're going to find this section over here.Īnd then this section over here are offered courses.Īnd then if I scroll down, then you're going to find this over here.Īnd then lastly, we have this footer over here.Īnd this is the teacher section over here, you can see that. So do you see this nav items over here, home teachers contact us signing according to this nav items, we have four pages, okay, let me walk you through all the pages and sections. So this is the homepage of our desktop version. This is a big material for complete beginners.Īnd today, you and me together, we're going to make a complete responsive web design, both for the desktop version, and another one for the mobile version. Joy is a prolific and excellent tutorial creator. TranscriptĪnd this course joy will show you how to use it.

#FIGMA GRID FULL#

Watch the full course below or on the YouTube channel (3-hour watch). Here are the topics covered in this course: Joy is a prolific tutorial creator and excellent teacher.

We just released a Figma course on the YouTube channel that will teach you how to use the tool to design websites. Figma is a vector graphics editor and prototyping tool that is great for designing websites.

Figma grid