Figma 101 for New Developers: Top Tips to Know When Using Figma • Slash

As a web/mobile developer, it can be hard to avoid design tools like Photoshop, Sketch, Miro, or Figma. However, using these tools often becomes a daily activity along with coding. After an IDE where we write code, design tools like Figma become necessary instruments to check multiple times per day to ensure pixel-perfect and up-to-date UI elements, screens, and flows.
But what exactly is Figma?

Table of Contents

What is Figma?

Figma is one of the most used design tools in the app development world. It can significantly improve the app design process and can even outperform other popular design tools in UX/UI design.

Design tool survey 2021 https://uxtools.co/survey/2021/

In this article, I will share my 3+ years of experience as a Tech Lead on how I have utilized Figma to help my team become more effective and productive in their day-to-day tasks.

1. Guides and Grids

You can toggle the visibility of the layout by clicking Layout Grids from the Eye Icon on the toolbar. In order to show Rules and Guides, hit ctrl/cmd + r instead.

Alt + hover onto an element will now consider and show the spacing values relative to the closest grid’s module or guide.

2. Prototype

When dealing with complex flows, using a prototype can be the best choice for the team to clearly understand the user’s actions when clicking on CTAs, the desired navigation, the expected outcome when the “get started” button is pressed, and the loading animation.
You can check with your PO and they can work with the designer to create a prototype of the full flow, which will address any concerns developers may have regarding the functionality of the CTAs.

Figma 101-Prototype section

3. Exporting Assets

In the past, you may have asked your designer to export all the assets you, the developer, needed. However, now you have full access and you can export whatever you need from Figma yourself.

Before exporting the file, please double-check its size. Sometimes, you may only need an icon with a size of 80×80 pixels, but accidentally export it with a size of 250×250 pixels. This can cause performance issues on your web or mobile app, such as slower loading times or larger app sizes on the Play Store or App Store.
If you want to compress the file without sacrificing image quality, you can use services like tinypng.com.

4. Communication

Comment/Feedback

If you have any concerns or are unclear about the criteria for your task, you can use the bubble icon to leave a comment on specific UI elements or flow. This way, the designer or PO will receive an email and notification and can reply directly to the comment.

code-inspection-and-layout-measurements

5. Basic Figma Design

It would be great if you can create a basic design layout as such:

UI element like square, rectangle, circle
Change color, font size
Create frame (screen)

This would benefit developers in explaining to their team how to create UI elements or how the authentication flow works, including which screen should be displayed next when the CTA is pressed, and so on. You can also utilize Figma as a tool to virtually explain new flows or clarify existing ones to your team members.

6. Shortcuts

There are a few shortcuts that you should know to help you save time:

Disable all panels: I use this command a lot to help me focus on checking UI elements and app flows while ignoring unnecessary menus or panels. Shortcut: Cmd + click
Reload design file: If you think your design file did not load properly, you can use this command to reload/refresh the design. Shortcut: Cmd + r
Open recently closed file: In case you accidentally close the design file, no worries! You can use this command to reopen it without going back to the Figma dashboard and double-clicking on your file again. Shortcut: Cmd + Shift + T

There are more shortcuts available, but these are the top three that I use the most. For more shortcuts visit this link.

Conclusion

After using Figma for a couple of years, I strongly recommend learning how to use it. It will not only benefit you in your day-to-day job, but it can also help you improve your UI design skills and explore different career growth opportunities. I hope the points I’ve covered herein will benefit you in one way or another!