Figma is not just a tool for designers, but a real find for developers. It helps to simplify the layout process and make it more efficient.

But sometimes designers and developers speak different languages. To avoid misunderstandings, we will share with you a few tips that will help improve communication and make collaboration more productive.

Figma is getting closer to the real layout. Autolayout (the main smart container in Figma) is becoming more and more like Flexbox. The Autolayout settings have the parameters min, max-width and height.

This, along with new variables, allows us to create responsive screens and get rid of garbage pseudo-elements (zero frames, etc.) that interfere with the transfer of layouts to development.

Figma developers have finally heard the prayers of designers and added variables — a mechanism for working with design tokens. Now we can use tokens for colors, sizes, effects and typography (typography and effects will appear a little later). And there are also text strings for localizing the interface. All this is packaged in JSON files according to the new design token standard from W3C.

What does this give us? We can cover all screens with variables and easily change the collection of tokens to change the compactness and composition of interface elements, color theme and localization.

We recommend Specify: this tool helps us automatically collect design data from Figma and distribute it in the right format, in the right project and at the right time.

Until recently, developers played a secondary role in Figma. They had an Inspect panel to look at sizes, colors and fonts, the ability to upload assets… and that’s it. Further — only the professionalism and goodwill of the designer, who had to create a clear specification, describe the behavior of the components, think over the states and mark the finished screens.

And then… (drum roll)… Dev Mode appeared! It made life much easier for developers.

But there is one «but»: from January 31, 2024, Dev Mode is available only by subscription. If you do not work in a large company or simply do not want to pay for a subscription, you will have to look for other ways to upload code from the layout.

• Figma to Code plugin Completely free open source plugin that can output the entire layout of your layout in three languages. If we need code for Flutter or SwiftUI, the Figma to Code plugin can help. But it has problems with HTML. The plugin does not know how to organize styles in CSS format and simply outputs everything in the form of <div style="width: 328px; height: 16px;"></div>.

• Inspect Styles plugin The Inspect Styles plugin only works with CSS. If we are developing websites, this is the best free option for uploading code from Figma.

Figma has also built a bridge to one of the most popular IDEs. We install the Figma for VS Code plugin in VS Code, and we can open the layout directly in the IDE, write and read comments, get hints on variables, etc.

P. S. The link to go from Figma to VS Code is hidden at the top of the Inspect panel, in the ellipsis

Figma is a powerful tool that can greatly simplify our lives when integrating design into code. The main thing is to know how to use all its features correctly.

By following the tips we gave in this article, you will be able to interact more effectively with designers, speed up development and improve the quality of the final product.