The Ultimate Figma guide for Developers

As a developer, Figma is undoubtedly a term you should have heard if you haven’t used it yet. Figma is one of the most innovative graphic tools. The fact that it is free to use and it’s browser-based is what makes it so appealing.

This has made design more accessible than ever before, which is why many developers are now required to learn how to use this design tool. 

Because many developers are unfamiliar with it, in this article, I’ll go over the basics of Figma and provide some tips so you can confidently navigate through it.


How to get started with Figma

First and foremost, you must register before using Figma. Once you’ve been added as a collaborator, you may choose to use Figma on the web or download the desktop app.

You’ll most likely have view-only access permission as a developer but you will still be able to explore the file’s pages and frames, access all exportable resources such as images and styles, and run a prototype presentation.


Inspect Panel

The Inspect Panel in Figma makes it simple to obtain code details from a specific element. You have the option of reviewing the code in CSS, Swift, or XML, however, keep in mind that the majority of the code supplied is limited to visual characteristics such as color values, typography, position, and size.

Figma Inspect Panel
Figma Inspect Panel

Shared Styles

In order to ensure consistency across the user interface, most projects use a set of colors and font styles. Designers can organize shared styles for color, text, and grids in Figma and it’s a good idea to set up all of the basic styles initially to build up the layout, variables, and typefaces in CSS. In the right sidebar of Figma, you can see all of the project styles.

Figma Shared Styles
Figma Shared Styles

Selecting Elements

Selecting elements and obtaining information about measurements and styles from a design is the most crucial aspect of its construction. Most designs include numerous layers and clicking an element only selects the top-level element.

To select any specific layer inside it you can do it by pressing Command ⌘ and then clicking the desired element to measure. This can also be achieved by right-clicking on the element and accessing Select Layer to then choose the correct one.

Selecting elements on Figma
Selecting elements on Figma

Measuring and Spacing

Figma generates visual guidelines around the selected element, highlighting its distance from the surrounding objects and allowing to check spacing and sizes.

To do so, hover the pointer over another layer after clicking on the element you want to measure and remember having the Code Panel selected.

Measuring and spacing your text on Figma
Measuring and spacing

Finding Main Components

You’ve probably gone through a few screens attempting to figure out which is the main component used. To locate the main component on any screen, right-click on the element and select Main Component > Go to Main Component from the context menu.

Find Main Components
Find Main Components

Exporting Assets

You can export individual assets by choosing them and using the export button, or you can use the Export Panel (Control/Command + Shift + E) to export all exportable assets at once.

Exporting assets on Figma
Exporting assets on Figma

Search between Layers

You can simply search for layers in your document by using the Find / Focus Figma Plugin. It’s great for maneuvering a large file with many page frames. Once you typed your search keywords, the plugin will select the layers containing your text and zoom in to fit them.

Find / Focus Figma Plugin
Find / Focus Figma Plugin

Presentation View

Anyone with view access to a file can interact with prototypes by using Presentation View. Prototypes simulate how consumers interact with the design, and Figma will only show those frames that have prototyping connections.

If there are no prototyping connections, you can navigate through frames by using the arrow keys on your keyboard. To do so, open Presentation view from any file by clicking on the Play toolbar and Click through each screen or interact with any hotspots.

Figma Presentation View
Figma Presentation View

Communication

Last but not least, you can use the chat bubble icon on the toolbar or press the C key to activate comment mode if anything isn’t clear and you’d like to consult someone else on the project for clarification.

Comments will be displayed as pins on the canvas. Everyone who has access to the file can see every comment, and they have complete flexibility to add mentions and comments to it. There is also the option to resolve or delete comments, and the comment will be grayed out once resolved.

Figma communications
Figma Communication

Conclusion

I hope that you found this guide useful and that you will use it to incorporate Figma into your developer work as a design tool!

Do you use Figma for your design or developer work? If so, let us know what you think in the comments section!

Want to work with Carol Mayes?
We are hiring :)

When you think of design thinking, what comes to mind? You might imagine stock images of people in suits smiling […]
November 25
5 min read
Slicing and atomization have become popular terms in the software industry, but many developers may need help understanding their true […]
November 22
5 min read
In recent years, automating software quality tests has become widely popular in the tech industry. Current automation tools allow us […]
November 21
5 min read
While I was in a session with one of my mentors some time ago, we did an exercise called Ikigai, […]
November 18
5 min read
Did you know that 76% of internet users access social media for product research? Your target audience is likely part […]
November 9
5 min read