Figma Tutorials: How to Build a UI in Figma
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:
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.
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:
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:
After creating the team, you will be provided with a link to invite team members.
Shortcuts
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
Edit
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
Select
Ctrl+right-click Select Layer Menu
Ctrl+click Deep Select
View
⎵+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
Arrange
Ctrl+] Bring Forward
Ctrl+[ Send Backward
Ctrl+Shift+] Bring to Front
Ctrl+Shift+[ Send to Back
Tools
V Move
C Add/Show Comments
P Pen
Shift+P Pencil
R Rectangle
O Ellipse
L Line
F Frame
S Slice
I Pick Color
Text
T Text
Ctrl+Shift+V Paste and Match Style
Ctrl+B Bold
Ctrl+I Italic
Ctrl+U Underline
Object
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
Components
Ctrl+Alt+K Create Component
Ctrl+Alt+B Detach Instance
Misc
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