Figma 101 for new developers: top tips to know when using Figma

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?

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.

1 Slash

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.

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.

2 Slash

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

3 Slash

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

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.

4 Slash

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.

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.
5 Slash
code-inspection-and-layout-measurements

6 Slash

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.

7 Slash

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!

Panha Henry Seng
Henry Panhna Seng
Lead engineer
As a frontend wizard with over 10 years of experience and expertise in frontend and full-stack development, I constantly strive to stay up-to-date with the latest trends and technologies. During these years, I have held many roles, including Lead Full-Stack Developer, Lead Mobile Developer, UX/UI Designer, and Tech Lead. Professionally, I has been a software engineer and UX/UI designer for six years. In 2015, he co-founded Flexitech, a software agency that focused on solving tough technical problems and delivering fast solutions.
In this article

Explore more resources

Consider these 5 Factors Before You Choose Web and Mobile Apps Service
Articles
Consider these 5 factors before you choose web and mobile apps service
Before choosing a web and mobile apps service, consider these 5 essential factors to ensure you pick the right company for your business. This brief guide will help you navigate the selection process effectively.
8 minute read·
by Alex Lossing ·
November 14, 2023
Articles
5 criteria of the best market research competitive analysis
Market research competitive analysis is important for your business. Explore 5 ways to conduct market research and competitive analysis to build successful digital strategies and products.
6 minute read·
by Daniel Soghoyan ·
November 24, 2023
Search
Skip to content