Life hacks to make the most of Figma as developers and testers
Sometimes Figma can be a pain in the neck for the developers and testers because its features are shaped to satisfy designers’ needs, but not theirs.
Our UI/UX designer Artyom Komlev created a list of to-dos to help developers navigate the designer-friendly Figma interface. Let’s dive in!
Designer and Developer
Figma was always more designer-oriented. So some settings and features are accessible only to them.
While developers look at the layouts within the Inspect panel, they may miss some information such as indents between paragraphs. This is crucial for developing a product that will look the way it was designed.
So is there a way to overcome such difficulties? The answer is yes!
States of components
The design of the pages in Figma may not be clickable if the designer didn’t create a mini prototype. In such a case, it may be hard to understand all the states of the buttons, links, and other elements to develop them with code, especially when you’re a junior developer.
To find out how any component works, right-click on the element needed and go to the main components. Depending on the settings, you must be able to see the page of the design system with all the states for the current object.
It’s helpful, but not so comfortable to do when you have dozens of elements and each of them requires some check-up. That is when layers come into play.
Working with layers
Both developers and testers must work with layers in Figma. Here comes the problem — it is only accessible in the edit mode. Each designer can see it, but for a developer, it’s hard to access. And, of course, the designer may not want to open the file to edits from everyone on the team.
But there’s a quick fix. If you duplicate the draft of the project, you’ll get access to all the elements and will be the sole master of it.
After duplicating the project, go to the Design tab — you’ll see all the parameters and characteristics you need to work on the project. Just click on the element you need to inspect — and all the states appear in the Design tab on the right.
Alternatively, you can look through the design system once again, but it will be more time-consuming to click on each element and look into the files to find everything you need.
Plugins
Figma has many plugins for various users, and some of them can make the development or testing process easier. For example, there is a plugin that converts the whole page to the right side if you’re developing a product or site for an Arabic country.
There is also a plugin that helps you get the text translated by your team into various languages to the page automatically. There is an HTML generator that helps to see all the hidden styles that can’t be seen with the Inspect panel. And so on.
And that’s only the bottom of the mountain, so plugins can make the coding process easier for a developer.
To-do list for developers
Figma can be even more comfortable if you follow these simple steps:
- Don’t rely on Inspect panel solely;
- Always check all the states of each element;
- To access the Design tab for a full set of characteristics, duplicate the project you got from a designer;
- Browse through plugins and add some that are useful for your work;
- Work with Figma smoothly!
Of course, this list just scratches the surface of life hacks that can be helpful to the developers and testers using Figma. If you have some valuable tips or tricks of your own — don’t hesitate to share them!
