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

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

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

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

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

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

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 :)

Thanks to the creation of blockchain technology in 2008, a lot of developments have occurred since. For example, the creation […]
June 15
5 min read
One of the most important western philosophers of all time, Aristotle once said – “Man is by nature a social […]
December 7
5 min read
Month-over-month growth is a key metric for measuring the growth of your business.
June 18
5 min read
The implications of a decentralized world wide web are vast, considering how much of our daily processes are linked to […]
June 27
5 min read
Good luck is what we typically tend to hear when we tell someone we are getting ready for a big […]
June 21
5 min read
In the last decade, the development of the blockchain has paved the way for many innovations in digital currency and […]
June 20
5 min read
The internet is evolving, and along with it, so is our concept of social media. Virtual communication is diversifying from […]
June 14
5 min read