{"id":6882,"date":"2023-05-02T11:22:54","date_gmt":"2023-05-02T03:22:54","guid":{"rendered":"https:\/\/slash.bravefactor.com\/?post_type=resources&p=6882"},"modified":"2024-01-30T15:11:00","modified_gmt":"2024-01-30T07:11:00","slug":"figma-101-for-new-developers-top-tips-to-know-when-using-figma","status":"publish","type":"resources","link":"https:\/\/slash.co\/articles\/figma-101-for-new-developers-top-tips-to-know-when-using-figma","title":{"rendered":"Figma 101 for new developers: top tips to know when using Figma"},"content":{"rendered":"

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.<\/span><\/p>\n

But what exactly is Figma?<\/span><\/p>\n

What is Figma?<\/h2>\n

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.<\/span><\/p>\n

\"\"<\/p>\n

Design tool survey 2021 <\/span><\/i>https:\/\/uxtools.co\/survey\/2021\/<\/span><\/i><\/a><\/p>\n

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.<\/span><\/p>\n

Guides and grids<\/span><\/h2>\n

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 <\/span>ctrl\/cmd + r<\/b> instead.<\/span><\/p>\n

\"\"<\/p>\n

Alt + hover<\/b>\u00a0onto an element will now consider and show the spacing values relative to the closest grid\u2019s module or\u00a0guide.<\/span><\/p>\n

\"\"<\/p>\n

Prototype<\/span><\/h2>\n

When dealing with complex flows, using a prototype can be the best choice for the team to clearly understand the user\u2019s actions when clicking on CTAs, the desired navigation, the expected outcome when the \u201cget started\u201d button is pressed, and the loading animation.
\n<\/span>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.<\/span><\/p>\n

Figma 101-Prototype section<\/a><\/p>\n

Exporting assets<\/span><\/h2>\n

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.<\/span><\/p>\n

\"\"<\/p>\n

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.<\/span><\/p>\n

If you want to compress the file without sacrificing image quality, you can use services like <\/span>tinypng.com<\/span><\/a>.<\/span><\/p>\n

Communication (comment\/feedback)<\/span><\/h2>\n

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.<\/span>
\n\"\"
\ncode-inspection-and-layout-measurements<\/span><\/i><\/a><\/p>\n

\"\"<\/p>\n

Basic Figma design<\/span><\/h2>\n

It would be great if you can create a basic design layout as such:<\/span><\/p>\n