Last June 14, we were at the VLCTechFest. If you're wondering why, the answer is that I had a clear mission: to reduce the noise between design and development. I did this by speaking a language that we have been speaking at Secture in the design department for a long time: Figma.

It was not just another technical talk. It was a journey through how a tool, well used, can become the catalyst for a fluid relationship between designers and developers. A bridge, not a barrier.

So, could Figma be the ultimate tool to stop design and development speaking languages? Read on and find out.

Why Figma?

Because Figma is not just a tool for designing. It is, above all, a platform for collaboration.

Since its launch in 2016, it has been gaining ground in teams where design does not end at design, but is built alongside development, product and business.

When in 2023 came Dev Mode, Figma has come full circle: now it is also thinking of developers.

The important thing here is not the tool, but what it allows: to speak the same language. In this way it manages to have a differential value with respect to other design tools.

One file, many ways of working

We are going to review from the most basic to the most powerful.

How is a Figma file structured?

• On the left, the project pages and layers.
• On the right, a properties panel that changes depending on what you select.
• In the center, an infinite canvas that, yes, can be overwhelming at first, but there's a trick to it: searching is your friend, and nothing can be broken.

How does the experience change depending on the role?

• Viewers, ideal for customers or stakeholders who just need to see and comment.
• Editors, designers who create, modify, prototype.
• Developers, The Dev Mode can be accessed to extract directly what they need to develop: measurements, styles, assets, and even code snippets.

That last point is important: Figma does not replace VSCode, but it does reduce unnecessary back and forth. When the design is well assembled, Dev Mode becomes a visual dictionary of the product.

Layers are your bestie (if you know how to use them)

One of the biggest roadblocks when opening Figma for the first time is the concept of “layers”.

If you come from the world of code or more linear tools, the idea of an infinite, hierarchical canvas may sound like chaos. But if you understand that there is a clear logic - frames, groups, child layers, components - everything fits.

It is very important to keep in mind that file structure is as important as the design itself. If you name well, group with sense and organize by sections, the developer who receives the file will appreciate it. And he will notice it.

Because yes, delivering a well-structured file is also design.

What about Dev Mode?

My favorite part.

Dev Mode is not just “another view”. It is a completely different experience, designed for developers.

From there they can:

• Measure any element.
• Copy styles in CSS, iOS or Android.
• Download assets in different resolutions.
• View design tokens as reusable variables.

That is to say: what used to be mails, screenshots, doubts and “how big is this?”... now it's all in the same place.

And what does this have to do with development?

All.

We work on complex projects, with distributed teams and a lot of interaction between design and development.

And in that context, Figma is more than useful: it is necessary.

I'm not just talking about efficiency (although that's true too). I'm talking about the fact that if we all work on the same file, with the same rules, communication flows. And then what we design is not only beautiful, it is functional, coherent and faster to implement.

If you work in digital products, you know what I'm talking about. If not, I invite you to try it.

If you are interested in this topic, you can take a look at the complete presentation here.

And if you missed the talk, here is the video:

Read more in our blog.