If you work regularly with designers, you will likely come across Figma, a powerful and collaborative design tool. Whether you have no design background or have never used Figma before, not everyone needs to become a Figma expert so we have compiled useful tips to bring you up to speed. With the following 5 tips, you can dive right into collaborating the next time a Figma file is shared with you! To start, here is a visual overview of the elements you will see on a Figma file:

1. Use Figma as a reviewer, not a designer: if you're only using Figma to review designs and don't intend to make edits, you can turn off toolbars for a cleaner view by clicking Menu → View and unchecking Show/Hide UI (you can also trigger this function by pressing CTRL+\ or by right clicking the canvas). You can also provide feedback with comments directly on the file by pressing C and clicking where you want to comment.

2. Download the Figma font installer: Sometimes you just want to make a quick text change. If you’re missing a font used in the design, you won’t be able to edit the text until you download the missing font or change the font. Chances are you’re using Figma in the browser and the Figma font installer can help you easily use your local fonts in your browser. After you download the font to your computer, you’re all set if you’re on the Figma desktop app.

3. Use the Layers sidebar to navigate: You can view all design objects under Layers in the left sidebar. Objects are often grouped together, making things as simple as clicking on a text box confusing at first. To select an object, keep double-clicking the object on the canvas until your selection is on the correct layer, using the Layers sidebar to track what layer you’re currently on. You can also select the object directly in the Layers sidebar, hovering over items to see them highlighted on the canvas.

4. Resize objects in the correct mode: In Move mode (activate in toolbar or by pressing V), you can resize objects vertically and horizontally. In Scale mode (activate in toolbar or by pressing K), you can resize objects proportionally, preserving their dimensions.

5. Check for auto layout and components: some designers use Auto Layout and Components to organize their objects. If you’re having trouble isolating elements and find that moving one element moves other unwanted elements, the element is probably part of an Auto Layout or Component object. A good rule is to duplicate the group your element is part of so you don't disrupt your designer’s existing work. Right click on the duplicated group and view your options. For auto layout objects, click “Remove auto layout” and for components, click “Detach instance.” Now you will be able to move only your desired element.

   

With these Figma basics mastered, you'll be cruising through your designer's files like a pro in no time!

Sources:

Figma Learn

Design Lab