Figma 101: Guide to Figma
Nowadays, Figma is one of the popular tools that most designers use for designing their applications or websites. In this article, you will get to know more about it such as what Figma is and the basic tools in Figma.
What’s Figma?
Figma is a design and prototyping tool which you can easily use to create the user interface of websites or applications. It is free and allows multiple people to view and edit the file at the same time. Moreover, it is mainly web-based with an offline feature. Users can download the Figma desktop application in both macOS and Windows.
Start creating your first design file
First, go to this website https://www.figma.com/ and sign up.
After you create an account, it will go to this profile page. On this page, you can see all files, create new design files, create new teams, and so on.
Then, it will go to the design page. By default, your file will be in the Drafts section with an untitled name.
However, you can change the file name and move your draft file into your teams or projects.
After you created your project successfully, Figma automatically saves your work because of cloud-based. Thus, the problem of forgetting to save your work or data loss will be solved.
How to share your design file with your teams or friends?
You can click on the Share button to share your file. Then, you can add their email with the role or copy your link to share with your teammates.
Basic Tools used in Figma
Move (V): Act as your cursor. You can use it to select or rescale any object.
Scale (K): Resize groups or components. Normally, if you use the Move (V) to resize the object, you cannot scale the numeric or text. That’s why you need to use a Scale (K) to scale it.
Frame (F): Create your frame. If you would like to create a design in a specific device or customize screen size, you may need to create a frame. Inside each frame, Figma provides additional features, such as Layout Grids, Auto Layout, Constraints, and prototyping.
Slice (S): Specific or choose the areas that you want to export.
Shape: Create basic shapes such as Rectangle (R), Line (L), Arrow (Shift+L), Eclipse (O), Polygon, Star, and Place an image (Ctrl+Shift+K).
Pen (P): Draw paths and connect them to a close shape or create vector networks.
Pencil (Shift+P): Draw something.
Text (T): Create and style your text.
Hand Tool (H): Allow you to drag and see components in your viewport(board). It helps us to prevent unintentional clicking or moving components.
Add Comment (C): Give feedback to your work
Hopefully, this article can help you to understand more about tools in Figma. If you want to know more about how to create your theme and style in Figma.
