Figma is a strong design tool that helps you to create anything: websites, applications, logos, and much more.
By learning Figma, you’ll take your first steps into Interface Design and User Experience Design. These skills are essential for building an impressive portfolio for yourself and potentially for your own company.
Figma is an interface design application that runs within the browser—but it’s far more than that. According to me, it’s probably the best application for team-based collaborative design projects. Let’s take a look!
Different tools within Figma are:
First, we’ll create a frame. Where our design will live. You’ll size a frame however you want depending on your requirements.
This example will be a website, so select the Desktop Frame – but you’ll also create mobile application frames, or even custom frames & more.
We start with the design, you’ll be wanting to add grids that help you keep the alignment of content for your page consistent.
You can add grids to a frame and customise them. As an example, I often prefer 12 grids as this is often the default for website development.
Use the shapes and elements in Figma to form squares, circles, lines, and more. These are creating a design on a page.
Add images online or locally to your page. Images are an important part of designing a website, for the hero section.
Let’s add a logo as our first image which we’ll increase the very best left of the screen.
The font will default to Roboto, but you’ll change the font family, size, and colour at any stage.
In this example we will use the right panel to change the colour and size of the font, and later the font family also .
Working with many layers in Figma can get confusing, so label all of your elements as soon as you create them. Even better is to group different sections and shapes with labels like “Hero Background” or “Navbar”.
A simple but useful top/bottom navigation bar to use in your website designs. The top/bottom nav bar are often resized in your mobile or every device screen by just resizing it. You can activate or deactivate the text and status of each tab.
Make a rectangle and add a label on the button. Establish fixed width & height.Select both the label and therefore the container and centre them with the alignment tools and left-right padding.
We recommend using the Font Size property to regulate the size of your Text. However, you’ll also use the Scale tool to resize text. This is often handy when you want to resize a group of elements at once.
Figma is straightforward to start using, but there is a lot to learn to use it to its full potential. With the fundamentals of shapes, images, and text, you’ll easily start prototyping an internet site, designing a mobile application, and far more.
We hope this guide to Figma’s essential features inspires you to explore the tool and start using it to speed up your projects.