How to export PNGs with custom color space profiles from Figma using TinyImage

Video Transcript

Today I’m going to be showing you how to export PNG images from Figma with an embedded custom ICC color space profile, which is going to allow you to export your images in a certain color space; for example, P3, CMYK or RGB.

We’ll get started now, and all I’m going to do is go up to the “Resources” icon in the top of my Figma header, I’m going to click on that and search for the word “TinyImage”, and under the “Plugins” tab you’ll see the TinyImage Figma plugin pop up. All you need to do to run it is either click on this “Run” button here, or if you want to save it to your Figma plugins list for later, you can click on this little “More options” icon and click on “Save plugin”, and that’ll save it to your Figma plugins list for later.

I’ve already gone ahead and done that, so I’m going to right click on my Figma canvas, I’m going to go down to “Plugins”, I’m just going to go down to “Saved Plugins” and under “Saved Plugins” you’ll see the TinyImage menu item pop-up. I’m just going to click on that, and that’s going to run the Figma plugin we just installed a second ago.

You’ll notice here that we don’t have any export settings on any of our Figma images at the moment, so the first thing you’ll need to do is just make sure that the images you want to export to PNG with a custom color space profile already have the “PNG” settings you need on them in the Figma export settings. To do that, you just select the Figma layers you want to export, and then go over to the right hand side here, click on the little “Export” plus button and then you’ll be able to change your options here.

By default, it’s already on PNG, and you can change the resolution of that, you can make it 2x, but I’m just going to leave it at 1x for now; and if you need to add more resolutions, you can also add them as extra layers or extra export settings as well. I’m just going to keep it really simple for today and leave it as “PNG” at “1x” just for these two images. Now that we’ve updated that, we just click on the “Refresh” button in TinyImage, and that’s just going to load up the export settings that we just specified in Figma a second ago.

By default, this is going to export your PNGs in the normal Figma default color space, which is basically un-managed; you’ll just get a regular export if you go ahead and export that now, but if you want to change the color space profile settings for your PNG exports, just click on the little “Settings” icon in TinyImage, and you’ll notice down here there’s an option called “PNG Color Profile”. As I mentioned, it’s set to Figma by default, but we can click on that select box and change it to any of these different options; we’ve got some different categories, we’ve got “Display P3”, we’ve got “Adobe Compatible Color Spaces”, “CMYK”, “sRGB” and things like that.

If we wanted to change this to be “P3”, we can do that just by clicking on any of these items here, you can either check the one with maximum compatibility or maximum correctness, I’m just going to go for compatibility at the moment and select that. Then you’ve also got a toggle over here; by default, this toggle is set to use ICC version 4, but if you uncheck that, it’s going to use ICC version 2. Version 4 is mostly supported and probably best to use, but if you do need Version 2, you can just uncheck that and that will use Version 2 instead. I’m going to leave that on Version 4, and that’s all you need to do; you just can close off this settings panel now, so I’m going to click “Close”.

All we need to do now is click on “Export”; I’m going to click this “Export” button, and that is going to set our PNGs with that ICC profile included in the Figma PNG exports. If we save that now, I’m just going to close off the Figma plugin and also re-export these just as regular Figma layers just so we can compare them. I’m going to export those two layers to the desktop, and I’m just going to name these; we’ve got “Kyoto Figma” and “Shop Figma”, and now if we open up our zip file, and I’m just going to drag those two files in there and open up the folder; we can now compare these two different color space profiles by opening up the preview.

I’m just going to open up the Figma one first, and I’ll just move that over here, and then if we go down to the “Shop” one you can see, it depends on where you’re looking, but for example, if you notice down here where we’ve got these crates in front of the doorway; if you keep an eye on that you can see here, this is the Figma version and now I’m going to go down to the color managed version. You can see that the red is quite different, the color space is quite different there, you can notice that also on this pole over here if you see this one’s quite dull, and this one has a lot a lot of a different color space. The same thing up here, there’s all different parts of the image that have basically been modified to that color space.

We can do the same thing if we open up the “Kyoto Figma” one, we’ve got this one which was exported from Figma normally, and then if we go down, you can see that there’s quite a difference between the two color space profiles. We’ve got this one from Figma, that’s the standard one, and then we’ve got the “P3” color space profile, which again you can tell the difference in all of these reds, it’s quite striking when you compare them. That’s Figma, that’s the P3, and you can see this one’s quite different in terms of color space.

That’s a really quick example of how you can do this, as I mentioned, there’s a bunch of different other color space options that you might want to explore; it all depends on what your use case is, where you’re going to be actually using that PNG, and you’ll know if you need a color space setting or an ICC profile based on your use case. You’ll probably get that as a specification from whoever’s requiring that file, and you can just find that ICC profile in your TinyImage settings and Export the PNG with that ICC color space profile embedded really easily, just as we’ve looked at today.

I’ll leave it there, I just want to keep it really simple and show you how to customize your PNG ICC color space profiles in Figma; this is a really quick way of going about it. I hope you find it useful if you or your team has been wondering how to use color space profiles in your image exports from Figma, so thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.