The Figma Plug-in I needn’t code

A short tale of why it’s important to do research first

Reda Attarça


Photo by Ilya Pavlov on Unsplash

I have used Figma for 4 years now. It has become my main tool for creating mock-ups over Adobe UX, Axure, and before that Paint.

For 4 years I struggle to manage my layers. When collaborating with other designers, everybody has their way of naming frames and imbricating them with auto-layout. It’s great to work in a group, but it can be hard to understand the logic behind your coworker’s work.

When something doesn’t work as intended, like changing an element from fill to hug but it stays the same, I collapse every frame and reopen them individually to find the problematic layer. And I used to do that by hand.

To solve this problem that I’m sure a lot of people encounter, I wanted to make a plug-in that would collapse every layer in one go. I started to watch tutorial videos from the official Figma page on YouTube. A lot of documentation is available online. Even if I don’t know how to code in typescript, I’m confident that it’s a manageable task.

After an afternoon of reading documentation and watching tutorials, downloading code writer software, and many other things, I started to make the plug-in. I was blocked at the naming part of the creation and looked online if there is a specific term to call the action of collapsing every layer, and yes! It’s called … Alt+L

By searching for a name I discovered a shortcut that no teacher told me about, that was not mentioned in any courses I followed during my studies.

Moral of the story: always search online for existing solutions before jumping into a project. If there is a problem, it’s probable that someone already tried to solve it.

And remember: to collapse every layer in Figma, it’s ALT+L.

Panel with every layers open, arrow “Alt + L”, panel with every layers closed