Import an image from the shapes image upload option. Drag and drop an image from you local computer. 
Let's add a logo as our first image which we will add to the top left of the screen. Images are an important part of designing a website, especially for the hero section. You can add images from an online source or locally to your page. I'll start with a simple rectangle which we will use to create our hero navigation section for the top part of this home page. These are the fundamentals for creating a design on a page. Use the shapes and elements in Figma to create squares, circles, lines, and more. For example, I often prefer 12 grids as this is the default for website development. You can add grids to a frame and customise them.
Select the Frame size on the right panelīefore we start with the design, you will want to add grids that help you keep the alignment of content for your page consistent. Select the Frame tool from the top menu. This example will be a website, so we will select the Desktop Frame – but you can also create mobile application frames, or even custom frames. You can size a frame however you want depending on your requirements. This is the same as a page, and it's where our design will live. How to Make a Frame in Figmaįirst we will create a frame. Select the + sign, or on the right hand side create a new design page. Take a look at the default design layout we will be working with below. We are going to build our first draft page. 
Next we need to get the design assets to use for this project, which we'll grab from Frontend Mentor. Just sign up with a new account (email or Google sign in) – it's completely free
Let's begin by creating an account on the Figma Website. In this article, I'll give you a brief overview of some of the main parts of the course so you can get started designing in Figma.
Prototype interaction navigation to page. Color selecting and picking correct hue. Color picker and copying sections continued. I'll break this crash course into a bunch of parts as we explore different features of Figma including: Learning by building a project is a great way to solidify your knowledge, so I recommend downloading the assets and following along. In this Figma Crash Course, I will use a real project website from Frontend Mentor which we will recreate in Figma. These skills are essential for building a great portfolio for yourself and potentially for your own company. Figma is a powerful design tool that helps you to create anything: websites, applications, logos, and much more.īy learning to use Figma, you'll take your first steps into User Interface Design and and User Experience Design.
0 kommentar(er)
