On this topic, you will learn Figma’s importance, usage, basic features, and application in the design industry. You are expected to do hands-on activities and watch video tutorials to speed up your learning.
Figma is a collaborative interface design tool that helps product leads, designers, and developers improve the UI/UX of a product. Figma is a FREE browser-based app; therefore, it works on all desktop operating systems like macOS, Windows, Linux, Chrome OS, etc.
Figma is known for its hassle-free and inclusive design. With its powerful tools, you can collaborate and interact on the same file in real-time. Just simply share the Figma live URL with other users, and they can open it instantly on their browser.
It’s also self-save, so it conserves significant time when designing workflow. You can quickly review the latest version of the design and view other users’ comments and feedback with less effort.
To get started, go to www.figma.com. Click “Sign up” and enter your details. After that, a Figma working screen will appear. Then, if you want to start creating your file, just click on “New File.”
It is located on the top-left of the screen, which can be accessed by clicking the hamburger icon. It contains major feature functionalities (like File, Edit, Delete, etc.) and minor functionalities (like plugins, integrations, libraries, etc.)
It is composed of frames, shapes, text, handtools, comments, and other features that can be accessed easily on the screen’s upper part.
It is located in the middle part of the toolbar. It indicates the Figma file name plus dropdown shortcut options (like history, edit, duplicate, export, etc.) when no object is select. However, when a tool is selected, it provides extra options for mask usage, union selection, or components.
It serves as the left navigation section where all files, icons, components, texts, groups, frames, etc., can be found.
It is the user’s working space. You can create, edit and review your output there.
It is located on the right section of Figma. It has three tabs: Design, Prototype, and Inspect.
Now that you’ve learned the fundamentals of Figma let’s start practicing your skills on keyboard shortcuts and basic features.
Note: Figma uses the same keyboard shortcuts for delete, copy, paste, redo, undo, etc.
To learn more about Figma, you can also watch this video tutorial for beginners by AJ&Smart to help you navigate the app or you can explore it to discover its other functionalities.