How to export images with custom folder path names from Figma using TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how to export your image layers from Figma into customizable dynamic folder names using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the actions icon at the bottom here, and then search for TinyImage. Under the Figma plugins tab, if you click on the TinyImage result, you can run the Figma plugin by either clicking on the “Run” button down here, or I’d recommend clicking on the “Save” button down here, which saves it to your Figma plugins list for easy access later.

I’ve already clicked on that button, so I’m going to go to my canvas, right-click anywhere, then go down to Plugins, go down to Saved Plugins, and click on the TinyImage item. That runs the Figma plugin we saved a second ago.

You’ll notice the first time you run the plugin, if you don’t have any export settings applied to your layers, the plugin will basically be empty. We can quickly address that by selecting all the layers we want to export as compressed images from the TinyImage plugin. Select all those image layers, then go over to the right-hand side in Figma and click on the export button.

You’ve got this little export plus button, and you can add any formats you want. You can either just have one format, or if you need the assets in multiple formats and resolutions, you can also change that. I can change this to JPEG, have that as PNG, adjust the scale, and customize it however I want.

Once you’ve applied those, all we need to do is either click on the refresh button down here or the refresh icon up here. That loads up all of the assets we just made exportable. You can see we’ve got all the formats listed out there.

Now, we need to go to our settings panel so we can customize the folder names. I’m going to click on this little settings icon. You’ll notice here there’s a field called “Custom File Name Format.” By default, that just exports the file name, meaning it exports the layer name as the file. That’s the default option.

But because we want to customize the folder output, we can use dynamic variables to automatically take the layers we’ve got in our Figma file and include those as the folder structure in our exported assets. I’ll show you what that looks like.

For example, if we want the folders of these sections as part of our exported file names, we can go down here, click on the section variable, and then do a slash and put in the name. That basically takes any of these sections and makes them folders, with the image name inside.

This will just be a quick example, and then we’ll come back and add a few more fields. I’m going to close that off and click on the export button. That compresses all the images I marked as exportable. I’m saving that to my desktop, then unzipping the file.

You can see here, if I zoom in, we now have three folders. These match our section names that we just added in Figma. Because we enabled that in our settings, we said we wanted section slash name. Section becomes a folder, and the name is the file name, now matching up with our exported folders.

That’s an easy way of using dynamic variables from your designs and including those as part of the folder structure.

We can play around with this in more detail. For example, down here we’ve got a couple of nested frame layers. We can account for that by inserting this frame variable. That creates a new folder when placed next to the section with a slash.

We can also add the format. If we want the format included, we just add that variable. I’m typing in “format” and adding a slash. Now we’ll get section/frame/format, so in this case, JPEG.

We can also add width and height. If we want those variables, we can insert them too. That dynamically adds the width and height of each layer into the folder structure. You can either have those as folders or as part of the file name.

For example, if I took out the slash and added a hyphen, that would make the width and height part of the file name instead of a folder. I’m going to leave it as a folder for now. We’re going to do section/frame/format/width × height. The “x” is just a normal character. Then we get the name itself.

I’m exporting that now. Closing this off, clicking export, re-exporting all of those compressed images from Figma, and saving to a zip file on the desktop.

If I open that new folder, you’ll notice it’s even more organized than before. All of these now have multiple folders: frame, section, and format. We’ve got all the JPEG files in this format, and all the PNG files in that format. It’s nicely organizing everything.

I added the width and height here just to demonstrate, but in this case, because all the images are the same size, it’s not very useful. However, if you had assets in many different sizes for social media posts, it would be handy to have the dynamic width and height in your folders for easier organization.

You’ve got a lot of flexibility here. In the settings panel, you’ll see quite a few variables you can use. You can add the current date, the scale, the width and height, the suffix, and more.

Currently, there’s no suffix set in Figma, but you can add something like 2x or 1x as the suffix in the export panel. That gets automatically injected if you add the suffix variable.

You can also add static variables. If you want a folder called “images,” you can just type that in manually, and it works. Same thing if you want to mix and match. For example, section_assets would automatically add the section name, then underscore, then the hardcoded word “assets.” That creates a dynamic version with a static addition.

You’ve got a lot of flexibility here. Hopefully this helps you if you need to export your image assets from Figma into dynamic file naming paths with variables.

We’ll leave it there for today. I just wanted to show you an overview of using custom file name formats when exporting assets from Figma as compressed images using the TinyImage plugin.

Thank you for watching, and we’ll be back soon with more Figma tutorials like this in the near future.