How to prepare logo files for clients in Figma with TinyImage

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically prepare logo files for your clients directly in Figma using the TinyImage Figma plugin. To get started, all we need to do is go to our Figma file, go down to the bottom toolbar down here, and click on the actions icon. Then, if you just search for TinyImage, under the Figma plugins tab, click on the TinyImage item. You can run the Figma plugin by either clicking on this run button down here, or I’d recommend clicking on the save icon next to that. That’s going to let you run the Figma plugin from your Figma plugins list.

I’ve already clicked on the save icon, so I’m just going to go back to my Figma canvas, right-click anywhere, and then go down to plugins, then go down to saved plugins, and click on the TinyImage item. That’s just going to run the Figma plugin we saved a second ago. If you’re new to the Figma plugin, it has a bunch of different features, including allowing you to export your regular exportable Figma layers to compressed assets and create GIFs and PDFs and things like that. But today, we’re just going to be focusing on the logos feature.

In the toolbar at the top, if you just switch over to the logos tab up here, you’ll basically switch into the logo packager mode. This is going to allow us to prepare logo files that are production-ready packages for any of your clients that you’re delivering logos to. I’ve got two different logos here, and I’ve got the word mark or logo mark for each of those as well. What I’m going to do is show you how to export these logos in all these different variants and automatically package them up into a zip file, which you can then share with your clients.

To get started, all you need to do is make sure you’ve got your vector logos. The vector logos include these vector shapes, which are vector layers rather than bitmap layers. They’re not using pixels; they’re actually infinitely sharp because they’re using vector paths. Just be sure that you’ve got the vector version of your logo, and then you should be good to go. Put those layers into a single Figma frame like we’ve got here. Then, what you want to do is just go ahead and select all the layers that you want to export. In this case, we want to export these two logos. I’m just highlighting all of the layers in Figma. You can see over here that we’ve got four layers selected. We can review those layers by opening this panel up here, which is going to let us customize the naming of each of those logos. That’s how they’re going to appear in the package.

To break down what’s happening, we’re basically going to say which formats we want. We can say if we want the full color version, the black and white version, the grayscale version, inverted version, things like that. Also, the file formats that we want, like JPEGs, PNGs, SVGs. Depending on your client’s requirements, you can check or uncheck those as needed. You can also include different scales of the PNG and JPEG assets as well. You’re also able to add custom color schemes. For example, you can add this format where you basically put in the color name you want to show up along with a hex value. That’s the color value, and then you can just use a semicolon to split those up.

To show you what the output’s going to look like, all we need to do now with those layers selected is just click on the export zip button up here. That’s essentially going to go through and generate a whole bunch of variants. In this case, it’s going to generate a couple hundred variants of all of those logos when you combine all of these different settings. Once that’s done, like it’s just finished up now, you can then export that zip and save it to your desktop or anywhere on your computer and just click save. If we now open up that zip file just by double-clicking on it and opening up the folder here, you’ll notice that we’ve got all of our logos exported nice and cleanly into all of these structures. We can see here that we’ve got all of those sizes for each of the formats. Everything that we just selected is now being packaged up and named. That naming is essentially coming from the custom file name pattern that we’ve got here. This is the default file name pattern, but you can actually customize that to your liking.

You can view the docs page by clicking on the view all tokens link here, but you can see that it’s essentially putting together these really tidy file format names. Most importantly, we’ve also got a really nice preview page that you can send along with the zip file that your clients can open up in the browser as well. We can just open up this index file here, and you can see we’ve got this really nice interface to automatically filter all of the logos and formats really easily. Your client can go through, select the logo that they want, if there’s more than one or if there’s a word mark and a logo, they can filter that down. They can also filter down things like the colors. They can select just the grayscale version or just the orange version that we added as a custom one. Also, the file type as well. If they know that they want to download an SVG version, they can just filter down the SVG for that. That’s going to allow them to quickly view those and download those files, or they can just click on open as well, and that’s going to allow you to just view the image in isolation.

This is a really nice way of browsing all of the logos, and they can also do things like create custom widths. For example, if they wanted to customize what size the PNGs or JPEGs are saved out as on the fly, you can do that in the browser here as well. That’s a really easy way of viewing all of the variants, but of course, they’ve got access to all of those underlying files as well. These are really just pointing to the files that are being included in here. You can see we’ve got all the SVGs, for example. You can actually load those up as individual files, and that’s all packaged up really nicely.

The other thing that you can do is, if you prefer while you’re working on the logos, you can also just import them into Figma as well. For example, if we wanted to generate the versions of the logo for either these two layers or this one layer, we can just select those logo layers. Instead of clicking the export zip button, we can actually just click on the generate logos in Figma button over here. I’m going to click that now. That’s instantly going to generate all the variations that we added in those settings here, and it’s going to do that directly on your Figma canvas. Instead of zipping it all up, you actually get those export formats and color variations on your canvas. You can see here that they’re all being named. You’ll also notice that the export settings we specified in here have also been carried over. We’ve got all of those formats and scales automatically being added to each layer. What that means is we can now automatically export those.

For example, if we did that through TinyImage, we could go to the compress tab, refresh all the exportable layers because these now have export settings on them. That’s what the Figma plugin picks up on. You can see that we’ve got all of those export settings automatically included. That means if we wanted to, we could export them directly from the canvas now as well. We could essentially just highlight these layers. We could just take the ones that we want. I might just want these ones, for example, and then I could just export those out, and that would export them all with those export settings too. I would probably just use the export zip feature and just export the original layers.

This can be really handy if you need to generate the variations on your canvas for any reason. If you’re just packaging them up, I would just personally select the logos originally, the original versions that you want, select all the formats that you need, customize the file paths if you need, and again, that’s going to allow you to basically customize the format here. You can see that it’s essentially mapping to the naming we’ve got here. We’ve got the lockup name, we’ve got the format, and then we’ve got the file name, which is being strung together by these hyphens. We can see the client name, the lockup, the color, the size, and that is being included in the file name over here. You can totally customize that.

For this particular case, we could basically put in the client name. Just select that particular logo. When we now export that, I’m just going to include all those options again and click on the export zip button once more. I’ll turn off the custom schemes just to reduce the output for a second. Then I’m going to open that up again. In a second, if I resave that one, you can see that the zip file has also been renamed to the client name. Because we customized that client name, that’s now showing the client name instead of the generic logo export name. Again, we can now just open up that new HTML file in the browser. You can see here that we’ve got all of those variants included and looking really good.

This is going to be a really easy way for you to share those logo packages with your client and customize the naming however you like based on the requirements for the client. That’s basically it. I just wanted to run through this new feature. If you’ve been tasked with packaging up your logos, vector logos into a whole bunch of different files and formats and don’t know where to start or you just don’t want the pain of manually exporting each file and putting them into folders manually, this is going to be a much easier way of automating that whole process end to end. This feature will be improving over time, so it might look a little bit different compared to the tutorial now. It’s going to be getting new features and more useful things added to it over time, but this is basically how it’s going to work. Hopefully, that helps you with your logo export workflows if you’re delivering packages to clients. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.