Figma Tutorials: How to Build a UI in Figma

Figma tutorials

Figma is one of the most successful software in the field of user interface designing. This software brings everything together and helps you to create the most eye-catching user interfaces. Figma is an under the web app but also has desktop applications available for both macOS and Windows. This fantastic software has made it possible for people worldwide to work as a team on a single project. This article is about Figma tutorials to help you start designing UI with it.

 Get started with Figma

To start working with Figma, both web-based and installed versions, you need to create an account using a valid email. After logging in to your account, click the “New” button to create a new project.

At the top of the new project page, you will see a black bar with icons on the left and right. Each of these icons has a specific function, which we explained in detail in the previous article. You can refer to this link to know the role of each icon – which are the basis of working with Figma.

Learn more: UI /UX /CX /Concepts and Communications



How to Build a New File and get the output

Click on the Main Menu option in the top bar; a list will open as shown below:

Figma menu

By selecting the “File”, all the options are available, including creating a new file, saving the current file in the Figma account, saving the file in a new project, getting output from the project, etc.

Define the Layout

The design can have different layouts depending on the end user’s device. Many popular apps modify their design depending on users’ operating systems (Android or iPhone). So before you start designing, be sure to consider a frame (third icon from the left on the bar) for your work and put the required elements on it. Frame selection is so important that Figma will not show you a preview of the design without the frame.

When you click on an element in Figma, in the right panel, you can see three tabs: Design, Prototype, and inspect. 

In the Design tab, you can see the element’s appearance properties such as color, distances and dimensions. By changing these properties, you can customize an element to your liking.

In the second tab (Prototype,) you can specify how to move between different design pages.

Finally, in the third tab (Inspect,) you can view the web codes of your design, copy them as needed to speed up the development of your application.

Figma layouts

Read more: Nine Key Principles of Mobile User Experience Design

Design Preview in Figma

The “Present” option, which is located on the right side of the top bar, is for viewing the layout in a separate tab of the browser. If you share your file by the public link, any team members can access it through the link. However, when previewed in Figma, the browser’s Header and Footer are still visible. Although it is still suitable to use inside Figma, this method is not wholly standard for testing an app. That’s why Figma has created another way to see the design preview on mobile.

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

Layers in Figma

The Figma environment is very similar to Photoshop, Illustrator and other 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, simply drop or draw a few items on the screen and select them from the menu on the left by holding down the control key and clicking. Then right-click on the selected items to see the properties of the layers:

Figma layers

Making Components in Figma

As you can see in the figure above, after selecting the layers, three options appear in the middle of the top menu instead of the project name. The first option from the left lets you make a component. You can quickly turn a frequently used part of your design into a component to use in other parts of your design.

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

Build Your Team in Figma

If you work as a team, you can select the “Create a team” option from the menu on the left side of the screen. By Clicking on this option, you will see a new page, as shown below, and you can choose a name for your team:

Figma team making

After creating the team, you will be provided with a link to invite team members.


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

However, some of the essential shortcuts in Figma include the following:

File & Properties

Ctrl+Shift+E Export

Ctrl+Alt+S Save to Version History

Ctrl+Shift+K Place Image


Ctrl+C Copy

Ctrl+X Cut

Ctrl+V Paste

Ctrl+Shift+V Paste Over Selection

Alt+drag Resize from Center

Alt+drag Duplicate Selection

Ctrl+Alt+C Copy Properties

Ctrl+Alt+V Paste Properties


Ctrl+right-click Select Layer Menu

Ctrl+click Deep Select


⎵+drag Pan

+ Zoom In

– Zoom Out

Shift+1 Zoom to Fit

Shift+0 Zoom to 100%

Shift+R Rulers

Ctrl+Shift+3 Show Outlines

Ctrl+Alt+Y Pixel Preview


Ctrl+] Bring Forward

Ctrl+[ Send Backward

Ctrl+Shift+] Bring to Front

Ctrl+Shift+[ Send to Back


V Move

C Add/Show Comments

P Pen

Shift+P Pencil

R Rectangle

O Ellipse

L Line

F Frame

S Slice

I Pick Color


T Text

Ctrl+Shift+V Paste and Match Style

Ctrl+B Bold

Ctrl+I Italic

Ctrl+U Underline


Ctrl+G Group Selection

Ctrl+Shift+G Ungroup Selection

Ctrl+Shift+H Show/Hide Selection

Ctrl+Shift+L Lock/Unlock Selection

Ctrl+E Flatten Selection

Ctrl+Shift+O Outline Stroke

Alt+double+click Crop Image


Ctrl+Alt+K Create Component

Ctrl+Alt+B Detach Instance


Ctrl+Shift+/ Keyboard Shortcuts

The Last word:

This article and the previous one entitled Figma software tried to introduce you to some Figma tutorials. These tutorials are actually the first step of working with this amazing software. Knowing them, you can apply your art in interface design and create eye-catching designs. Figma allows you to access your projects from anywhere and share the results with your team members at the moment. 

Leave a Comment

Your email address will not be published. Required fields are marked *