Fundamentals of Figma

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.

 

Benefits

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.

 

Create Your Figma Account

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.”

6 Main Features of Figma

1. Menu

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.) 

2. Tools

It is composed of frames, shapes, text, handtools, comments, and other features that can be accessed easily on the screen’s upper part. 

3. Options

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. 

4. Layers

It serves as the left navigation section where all files, icons, components, texts, groups, frames, etc., can be found. 

5. Canvas

It is the user’s working space. You can create, edit and review your output there. 

6. Inspector

It is located on the right section of Figma. It has three tabs: Design, Prototype, and Inspect.

  • In the design tab, the user can change the setting of a group/object’s layer, color, effect, or strokes. Export and preview features can be found there as well.
  • In the prototype tab, the user can create a clickable flow to demonstrate the design’s UX.
  • In the inspect tab, the user can view/copy UI codes, set properties, change hex, and adjust shadows.

 

Now that you’ve learned the fundamentals of Figma let’s start practicing your skills on keyboard shortcuts and basic features.

 

Try-It Yourself

1. Create a Frame
  • Use the keyboard shortcuts F or A or select the frame tool in the toolbar.
  • Click and drag in the canvas to create a frame with custom dimensions or adjust the right section’s properties.
  • Rename the frame by clicking twice on the selected frame/layer on the right navigation. Then, type your desired label.

 

2. Insert Objects on the Frame
  • Select the frame you created.
  • Then, click the shape tools’ dropdown list to insert a rectangle, a star, a polygon and a circle on it

 

3. Group/Ungroup Components or Elements
  • Click SHIFT and hold it while selecting the shapes you inserted on the frame.
  • Then, unhold the SHIFT key and press CTRL + G to group the elements.
  • To ungroup them again, press CTRL + SHIFT + G.

 

4. Insert Image
  • Create another frame.
  • Next, press CTRL + SHIFT + K and upload an image from your computer.
  • Then, click on the frame to paste the image you pick.
  • Last, resize the image by clicking and dragging it.

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.



Resources

https://www.figma.com/design/

https://help.figma.com/hc/en-u...

https://trydesignlab.com/figma...

      Next