Figma Guide for Beginner Web Designers

Figma is an online graphic editor for collaborative work. You can use it to create a prototype site, an application interface and discuss edits with colleagues in real time. This article reviews tools and features of Figma, popular plugins and tells where you can learn to work with the service for free. To learn about top hacks for beginners in Figma read here: https://www.digitalconnectmag.com/top-hacks-for-beginners-to-figma/

What do you need Figma for?

Figma can be used by designers, marketers, managers and developers. In this section we will describe the main scenarios of using the service and its advantages over other graphic editors.

What projects can be created in Figma?

In Figma you can draw interface elements, create interactive prototypes, illustrations, vector graphics. Many designers use it to make website layouts for Tilda. If you want to work more flexibly with interface graphics, you can draw a layout in Figma and transfer it to Tilda.

Prototype

A prototype is a model of a site or application. It makes it easier for the customer to evaluate how people will use the product. To create a prototype, the designer draws screens and creates connections between them. In Figma, you can immediately show the customer how the design will look on the screen of a smartphone, tablet, or other device.

Interface

Interface elements are the look and feel of a product. With Figma, you can create buttons, icons, feedback forms, and customize effects, such as clickable buttons, drop-down lists, and animations for blocks and pop-ups.

Interface of mobile applications Figma iOS UI kit.

A prototype of the Tesla Model 3 control panel and its interface elements.

Vector Graphics

Figma has basic tools for working with vector objects, it allows exporting designs into SVG format and importing vector objects from Adobe Illustrator or Sketch editor.

What else can you do in Figma

Figma can be used not only by designers. For non-obvious scenarios to use the service, see the Templates section. Entrepreneurs, SMM people and project managers can manage projects with Gantt Chart in Figma, create ads with templates for Facebook. For developers, Figma has made Developer Handoff mode. You can use guides to determine the distances to objects and their size, copy CSS styles of elements, their code for Android and iOS.

Collaboration in Figma

Figma created a single environment for an entire team to work on a design. This is its main advantage over other graphic editors. Now the developer is always aware of the latest changes to the layout, the manager sees in real time what is happening with the project, and the customer leaves comments on the design directly in Figma.

Three reasons to choose Figma for collaboration

Cross-platform. You can work in the service from any browser, on any device and on any operating system. No need to download additional applications to coordinate the design. Cloud-based service. Figma is an online editor, so the results are saved in the cloud and can be viewed by all team members. At any time you can see the changes made by a colleague, and restore a backup copy if necessary. Feedback. Participants can leave comments on the layout in Figma and get feedback from their colleagues. Agreements will go faster and the history of correspondence will not get lost in the mail.

Getting Started in Figma

In this section we'll look at how Figma works: create the first file and work with it.

How to install Figma

You can work in the service from your browser or download Figma application on your computer. Choose a browser if you often use different devices. To do this, go to figma.com and register. You can download Figma to your desktop for free, it will help you get rid of numerous browser tabs in front of your eyes. Go to figma.com/downloads and select the iOS or Windows version of the program. Additionally, download the free Figma Mirror app (Android/iOS) to evaluate how your design will look on your phone.

Figma interface

After registration, the user has access to two work areas - the graphic editor and the file manager, in which you can create projects and change profile settings. Let's look at the menu items of the file manager.

1. Profile

In the profile settings you can upload an avatar, change your name, password and email to which you receive notifications. There you can also update your rates and delete your account.

2. Search

Search for files and projects you're participating in through Search.

3. Recent files.

Files are automatically saved in Figma. You can see all the files you've opened in the Recent tab.

4. Plugins

The Plugins item contains extensions that will help speed up your work in Figma. For example, with Unsplash plugin you can find stock illustrations without leaving Figma. And with Iconify a designer will have 40,000 vector icons for all occasions at his fingertips.

Forum Role: Participant

Topics Started: 0

Replies Created: 0