Naming my layers sensibly, responsibly and consistently is one of the end goals I aim to achieve in life. Using a variety of softwares throughout my life, from Photoshop, AfterEffects, Xd, all the way to Figma, never have I ever consistenly achieved naming all my layers comprehensively. I do it for a while, then while being in the flow, forget about it. Then a blink later, I have Frame 3588 waiting for me when I copy-paste my latest one.
Problem with Existing Methods
Batch renaming files has always been a good friend to me, from the command line to the advanced “Rename” feature in Figma. I mean, they introduced the “AI Rename” feature, but that one seems pretty useless so far to me It helps me make more sense of my layers without putting me through the dredging busywork involved in doing so manually.
However, in both zmv and Figma’s advanced Rename features, there’s always one thing I cannot do, which I use often: renaming with the contents of the file/layer.
For non-text files, it obviously makes sense, so I usually rely on simple scripting using bun or something to quickly write up a script on how to rename the files.
On Figma, that is impossible. Although I haven’t exhaustively searched through the catalog of Figma extensions, I couldn’t find one which lets me use the content of the text layers embedded deep inside the target layer to construct the name of it.
Such a feature is extremely useful when you’re exporting frames from Figma. For example, let’s say you wrote a resume for you and your friends in Figma, following the same format. Now you want to export them as PDFs. Instead of them being resume.pdf, resume 1.pdf, resume 2.pdf and so on, you’d ideally want them to be named sensibly, perhaps with you and your friends’ names with it.
My Solution
The Figma plugin I built does lets you do such a workflow easily, using a scripting language. In the plugin, you can simply choose layers you want to rename, and use a simple templating language to name the nested layers by their name in it to rename the target layer.
The language is simple. It can contain pretty much any text that Figma will let you use in layer names. It looks for {} in your text as any templating language does and considers the text inside it as a name for a layer inside your target layer. Then you can choose what to do with it.
- You can choose the
.contentproperty to use the text content of the layer you’ve chosen. (Obviously, it won’t work if the layer with the name you’ve given it is not a text layer.) - You can choose the
.layerproperty to use the name of the layer itself. (This is useful when you have a layer with a name that is already in the format you want, or you’re choosing a non-text layer.)
An Example
Let’s say you’re building the bottom navigation bar for your mobile app. You know the standard: A little bar at the bottom, and you have 4 items with icons and text.
The layer structure you built looks like this:
Pretty simple! Now you want to rename the Menu Item layers to their individual names “Home”, “Search” and so on.
The traditional Figma methodology would be to either do it manually, or use the “AI Rename” feature and pray to Sam Altman it works.
With my plugin, you can just:
- Select the 4
Menu Itemlayers
- Run the plugin
- In the text box, write down
{Menu Item Title}.content
- Press the
Renamebutton!
And your layers will look like this after:
Curtain Call
As much as I enjoy using Figma, there are always little quirks here and there that I would like to see resolved. I’m doing so a little by little by writing these mini plugins that serve a very specific purpose: because not everyone is going to need these features at hand.
So, if any Figma users are reading this blogpost, please feel free to try it out and leave any feedback, comments, feature requests, etc.! The tool is especially useful when you have to export a bunch of files at once, and you’re forced to name the top layers (that become the file names).