TIPS tools Featured

Getting Started with Figma | Follow these steps and create your first design

Getting Started with Figma | Follow these steps and create your first design

UI/UX designing is the career path chosen by lots of people these days. There is a quote saying “Design is the intelligence made visible”. So, to bring that visibility of your intelligence it is necessary to use a great tool. Figma is one of the highly used tools for UI/UX designing. If you are new to the world of Figma this article is definitely for you.

What Is Figma?


Figma is a collaborative interface design tool that has taken the design industry by storm. Figma is completely browser-based, so it really works not only on Mac but also on Windows and Linux PCs, in addition to Chromebooks. It additionally has an internet API this is absolutely free!

Because it is a web-based application, it will not overburden your computer with large files, allowing you to work on your favorite projects fast and without interruptions.

Another significant feature of Figma is the ability to collaborate in real time on the same file. When utilizing traditional “offline” tools like Sketch and Photoshop, designers must often convert their work to an image file before sending it through email or instant messaging.

Rather of exporting static photos in Figma, we can simply give a link to the Figma file for customers and colleagues to access in their browser. This alone saves a designer a substantial amount of time and hassle in their process. But, more crucially, it implies that customers and coworkers may interact with the work more deeply and study the most recent version of the file.

Why to use Figma?

Among the numerous aspects that make this tool genuinely unique are:

  • Web-based files that allow you to free up disk space on your PC
  • Web and desktop app interfaces that are quick and free of disruptions
  • Annotation tools for real-time collaboration
  • Figma Mirror, a smartphone app for seeing prototypes.
  • Reasonable pricing: it is free for people.
  • Compatible with both macOS and Windows.
  • You can import Sketch files (but not the other way around).

What can you create on Figma?

Figma was first used by product designers, but it now offers a wide range of creative possibilities outside of that industry. You may use it to produce mockups, social media posts, icons, collages, marketing collateral, and even logos in addition to wireframes, prototypes, and UI components.

Getting Started with Figma

Setting up Account

Setup your account on Figma by signing up with your Google account or by simply adding mail id and password.

getting started with figma

Choose the menu option New Design File and create a file.

getting started with figma

Learn the Figma interface

getting started with figma

Menu

getting started with Figma

Despite traditional desktop design programs, Figma’s menus are accessible by clicking the FIgma logo icon in the top-left corner of the screen. Take a look around these menus to discover what’s available! You may also use the search function to find the command you’re looking for. Start typing “rectangle” to discover the Rectangle Tool, along with a nice reminder of its keyboard shortcut (R, by the way).

Tools

figma

Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc.

Option

getting started with Figma

This section displays additional settings for the tool you’ve chosen. Figma displays the file name when no item is chosen (as seen above). Contextual choices display here when an object is chosen.

Canvas

figma

This is where you create and review all your projects.

Inspector

figma

The Inspector displays contextual information and settings for the currently chosen item. The possibilities for the Canvas itself are shown in the image above. It’s worth noting that Figma provides us with different Inspector tabs (Design, Prototype, and Inspect).

Layers

figma

Here, every element in the file is listed, organized into Frames and Groups.

Creating Frame

figma

Frames are Figma’s art boards.A Frame is just a container for other elements in Figma. If you’ve used Sketch or Adobe Illustrator previously, it works similarly to an Artboard. To use the Frame Tool, press F. Alternatively, under the Options panel at the top of the window, click the Frame Tool icon. Alternatively, if you’re familiar to Sketch, you may press A (for “Artboard”).

There are two methods for making a Frame. We may either click or drag on the canvas area, or we can use the Inspector on the right side of the window to pick a pre-set Frame size.

In this article we are taking example of website so we have selected Desktop Frame.

  • Select the Frame tool from the top menu
  • Select the Frame size on the right panel

Add Grid and Columns

Before we begin with the design, you should add grids to assist you keep the alignment of your page’s content constant. Grids may be added to a frame and customized. For example, because 12 grids are the norm for website creation, it is frequently used.

figma
  • Choose the frame you want to grid.
  • On the right panel, click Layout Grid.
  • Columns and 12 units must be selected.

Using Shapes in Figma

Figma’s shapes and pieces may be used to make squares, circles, lines, and other forms. These are the principles of designing on a page.

figma

We will start with a simple rectangle which we will use to create our main navigation section for the top part of this home page.

  • Select square shaped tool.
  • Create square
  • Begin to shape and size it.

Adding Images In Figma

We can add images in Figma directly from online source. Images are an important part of designing a website, especially for the main section.

figma
  • Drag and drop an image from your local computer
  • Import an image from the shapes image upload option
  • Resize and place the image on the design

Adding Text To your Figma Project

Select the text tool and position it on the page to add text to a design. The font will be set to Roboto by default, but you may modify the font family, size, and color at any time.

figma
  • Select the Text tool
  • Add “About” text as the start of the navigation
  • Ensure the size and color are 24 and white

Label elements and create group in Figma

Working with several levels in Figma may be complicated, so label all of your pieces as soon as they are created. Even better, mark distinct portions and shapes with terms like “Hero Background” or “Navbar.”

figma
  • Select your element/s and right click to group or press Ctrl + G
  • Name your group
  • Places groups inside groups for each section of your page to improve readability once your page gets large

The above mentioned points are some of the basic things a beginner should know. There are lots of elements, plugins and components within Figma which is not possible to cover within single article. The more you practice the more you can be perfect. Figma is simple to use at beginning, but there is a lot to learn before you can utilize it to its full potential. With the fundamentals of shapes, photos, and text, you may quickly begin designing UI/UX for a website, building a mobile app, and much more. You can learn more when you explore the tool more and when you explore more you can give uniqueness to your design. 

Do follow us in Facebook and Instagram

Also check out Complete Beginners Guide to Canva.

About Author

Karina Shakya