blog posts

Figma software training: User interface (User Interface), an integral part of the factors affecting marketing and users’ relationship with today’s businesses. The users’ needs often measure a good user interface, and if designed properly, the user does not need the training to work with it and enjoys working with it.

One of the user interface design programs is Figma. Using Figma, a user interface can be easily and in a very short time, designed to be so-called User Friendly. So if you are interested in learning Figma software and how to design the user interface with it, or you want to know better the features and how to work with Figma, stay tuned to the SunLearn programming training website until the end of this article.

What is Figma?

As we said, Figma is an interface design program that started in 2012, and finally. In 2016, the first version was there for the public. Figma is generally different from other editing tools; Because it is a web-based tool: it runs directly in the browser. This sentence means that you can access your projects at any time and start working from any computer. Platform without the need to buy a license or install the software. You shouldn’t require to stress about your internet usage, as Figma does not ruin much bandwidth. However, Windows and Mac users can effortlessly install Figma on their operating system and offline use some of its features.

Figma is a free application where you can create and save up to three active projects simultaneously. This policy allows you to learn how to work with software, experiment, and design small projects. Also, writing Persian in Figma (in the editor environment) is possible without any problems, which is good news for designers who need to use the Persian language.

Figma or XD? Which one is best for starting a UI / UX design?

Designers are usually looking for a comprehensive and complete tool to save time. And design and manage their pages in the simplest possible way. People who use Figma software believe that it has unique features. Designers like this app because Figma can be used to perform a variety of graphic tasks. Especially user interface design, such as designing mobile application interfaces, prototype designs, creating social media posts, and more.

It should be noted, however, that other application design tools such as Adobe XD or Sketch is also available. But there are many reasons why it migrated to Figa from other tools such as Adobe XD or Sketch.

Comparison of Figma with adobe xd

One of the great advantages of using Figma over other design software such as XD Because it is web-based. Designers can work on a project remotely and simultaneously with the rest of the team. Especially since today, due to economic reasons, access restrictions, and health protocols, many companies have adopted the process of telecommuting. So for those who do not want to download and install various design tools, Figma is a good choice. Figma also focuses on the same feature of collaborating on a project in its advertisements. The Motto is: We tried to eliminate many of the evils and problems of working in a team with our software.

Almost all of the positive features found in other UI design software are available in one place in. Some of these features are:

• Using Components: Build and combine multiple objects (similar to Sketch software)
• Build a prototype or prototype: Ability to click on different components in it (similar to InVision software)
• Commenting during design: Adding, marking, and responding to comments by team members working on the project.
• Codeless programming: Ability to get dimensions and features in the form of style files, download icons and photos from the project URL (similar to Zeplin software)
• Adjusting Spaces: Build a resizable component using space settings (similar to Sketch software)
• Project Management with Version Control: View team history and return to a specific version by team members
• Simultaneous work by several people: Viewing the mouse pointer of other team members while working on the screen (although this is generally not recommended).
• Plugins: Use fonts other users’ styles in the form of functional plugins

 Figma software training: Installing Figma software

We said in the previous section that Figma doesn’t need the installation; however, you may find it easier to install a copy of it on your operating system. To download Figma software for Windows and Mac, you can go to the download section and download the version you want. In this area, in extra to the installation file, separate software for installing custom fonts named Font installer and an application that can be installed on a mobile phone for simultaneous demo and connecting the phone to a computer named Figma mirror is available. Want. In this section, in addition to the installation file, separate software for installing custom fonts called Font installer and an application that can be installed on a mobile phone for simultaneous demo and connecting the phone to a computer called Figma mirror is available.

Download the installation file of Figma software

software tutorial: Installing Figma on Linux

Installing Figma on Linux is more difficult than other operating systems because you have to download and install the dependency before installing. To do this, open the Linux terminal and type the following command inside:

sudo apt -y install libgconf2-4

Then we install another package that is a prerequisite for Figma with the following command. (During installation, it tells you to press the Enter button in one section, and you must press the Enter button to continue the installation.)

sudo add-apt-repository ppa: chrdevs / figma

Now, to install Figma yourself, go to the GitHub page of the Figma software terminal and download the desired version according to the type of your Linux distribution (Debian, Red Hat, etc.). After downloading Figma, enter your relevant command to install Figma so that your download file is fully installed.

Finally, after installation, you can run Figa using the following commands:

Figma-Linux

./figma-Linux-0.5.6-x86_64.AppImage

After running Figma, in the continuation of Figma software training, we will get acquainted with its different parts step by step.

Free training

You must first create an account with a valid email to use Figma. After entering Figma, you will see the following page:

Figma software setup tutorial

As you can see in the picture, several design examples have been prepared for you in advance so that you can more easily get acquainted with Figma and its features. But if you want to design on an empty project, you can start in Figma by hitting the new button at the top right of the screen.

software training: work environment

In the first step of the Figma software tutorial, after entering the design page, you will encounter an environment such as the following:

Figma, there is the main bar at the top of the page where most of the settings and features you need are available from this section. In the following, we will examine each section of this menu.

software tutorial: the top bar panel

We start with the options on the top right of the screen. In this section, you have three options, which are:

• Dimensions of the middle canvas: By clicking this button, you can specify the dimensions of the middle part of the page where the objects are placed. There are also features such as the ability to view the ruler, mouse pointers active in the project, etc., in this section.
• Show layout: This option, available in Figma as Present, allows you to view your layout on a new page in the browser.
• Sharing a plan: By selecting this option, you can share your plan with the email addresses of other team members. You also can specify access levels for different members. (Whether they can edit the file or view it.)

You will see the project title in the middle of the top bar. By clicking on this title, you can change its name.

In the left part of the top bar, eight options are available, in order from left to right:

• Main menu: Selecting the three-line icon opens a submenu full of various features. These include creating and saving project files, features needed to edit the project, working with plugins and related sites such as dribble, preferences in Figma, and using in-app libraries.
• Selection tool: This option has two submenus for selecting elements or changing their dimensions.
• Area tool: It has two options to select a frame as an area or part of it.
• Selecting Objects: This option, called the Shape Tool, allows you to use different objects within the page.
• Drawing a shape: With the Pen Tool, you can draw your favorite objects with a dot vector or pencil.
• Text writing: The ability to write the text available in all design and graphic software.
• Scrolling on the screen: With the Hand Tool option, you can scroll and scroll through the canvas in the middle of the screen.
• Create a comment: By selecting the last option whose icon is in the form of a cloud dialog, the possibility of leaving a comment on the page elements is activated. Now to write a comment, click on the desired element to pin a comment on it.

software training: building a project in Figma and getting output

In Figma, a submenu like the one below will open via the top bar and click on the Main Menu option:

By selecting the File option, all the options are available, including creating a new project, saving the current file in the Figma account, saving the file in a new project in the Figma account, getting output from the project, and so on.

software training: user interface design with Figma

The design can have different layouts depending on the type of user output device. Many popular apps even change the design of their app depending on what operating system the user has on their mobile phone (Android or iPhone). So before you start designing, be sure to consider a frame for your work and put the required elements on it. Frame selection is so important that Figma will not show you a design preview without the frame.

When you click on an element in Figa, in the right panel, and in the Design tab, its appearance properties such as color, distances, and dimensions required in the design appear. By changing these properties, you can customize an element to your liking.

In the second tab or Prototype, you can specify how to move between different pages of your design. In the third tab, or Inspect, you can see the web code of your design copy it if necessary to speed up the development of your application.

software tutorial: Preview the design in Figma

We mentioned earlier that the Present option is to view the layout in the browser simultaneously. If you share your file by accessing the public link, anyone can see your designs with a link to the designed page. The browser’s Header and Footer are still visible when previewed in Figma. This method is not suitable for testing the design of an application, so Figma has another way to see the design preview on mobile and open the Figma URL in the phone browser.

To see the preview of the design on your mobile phone, you can download the Figma Mirror program from the download section of the Figma site. The Figma Mirror app lets you view your designs on a phone scale. It adjusts the design content to fit the width and length of your mobile phone. This way, you can identify your design problems faster.

software training: working with layers in Figma

The work environment in Figma is very similar to the environment of Photoshop, Illustrator, and other design and graphic software. In this environment, you can put several elements in one layer, merge them, and, if necessary, make them invisible. To view these features, drop a few items in the middle of the screen and select them from the menu on the left side by holding down the control key and clicking. Then right-click on the selected items to see the properties of the layers:

software training: making a component in Figma

In the figure in the previous section, after selecting the elements, you will see that three options are added in the middle of the top menu instead of the project name. The first option from the left is making a component from the desired elements. You can easily turn a frequently used part of your design into a component in other parts of your Figma design.

Other options enabled in the middle of the top bar are mask creation and how to combine elements into a group.

software training: building a group in Figma

If you work as a team, you can select Create a new team from the menu on the left side of the screen. Clicking this button opens a new page, as shown below, and you can choose a name for the group:

After creating the group, you will be provided with a link that you can use to invite different team members and easily join the group.

software tutorial: shortcut keys in Figma

Like many design software, Figma has shortcuts to make the design process easier for users. These keys are visible in front of each feature in the Figma environment. In addition, in the Help section of Figma.