Just to show you what that looks like, I will click on the "Compress" button up here and TinyImage is going to run through all the selected images that we just told to compress, and it's going to compress all of them to JPG and PNG, depending on which layer had which setting attributed. Now that we've got those set up, we've got JPGs and we've got PNG setup, if we do this normally what's going to happen is it's going to export them just as those formats, it's going to export PNG's and export JPGs. That's just a brief intro to how these little images pop up in the TinyImage plugin, they're directly correlated to the export settings that you put in to the Figma column. I can do that to multiple images at the same time just by holding down shift and clicking on more than one, and then changing that down here to add to PNG now if I refresh you can see there it's changed to PNG. On the other hand, these little icons here do contain transparency I do want to export those as PNGs at the moment they're set to SVG, what I can do is I can just go down here to my export setting, click on where it says SVG and change that to PNG in my case. By default, it's PNG, but I want to use JPG because these are more photo based, there's no transparency, there's really no need for me to use PNG for these ones. To do that, you can just click on an image layer, go to the "export" tab over here in the right hand Figma colum, click on that and then it's really up to you to set the formats. If you're running the Figma plugin and you're not seeing any images pop up, it's because you need to apply export settings from this little sidebar in Figma, and that way TinyImage will understand what exports you want to be making for all of these different images. If I remove those, and then click on the "refresh" icon in TinyImage, you can see that it'll warn us, saying that we don't have any export settings on this layer. What I mean by that, is if we click on - let's just click on this this matcha photo here - you'll see in the right hand side, we've got this this little section called export, and at the moment I've got two export settings, I've got two different JPG exports. The first thing to know, is that TinyImage bases the images that it exports from the native Figma export settings on any of your frames or any of your layers. Once you've installed it, you can jump back to your project in Figma, then to run the Figma plugin that we've just installed, you can just right click anywhere, go down to "plugins", and then go down to "TinyImage Compressor" that will run the Figma plugin that we've just installed. Because I've already got it installed, my button on the right here looks like this, and it's got this little check mark with "installed" on it, but yours might just say "install" if you haven't already installed it if you click on "install" it'll install it straight away, and you'll see it changed to say "installed" like mine does. The first thing you want to do is go up to the main menu and click on the Figma icon in the top left here, and you want to go to a search or community, either one, and in the search bar we just want to type in the word "TinyImage", that's just one word and when you do that and go to the plugins tab, you'll see this Figma plugin called TinyImage Compressor" pop right up. We're going to be taking these images here and exporting them instead of exporting them to JPG and PNG, we're going to export them to Google's WebP image format, which Figma doesn't natively support, but we're going to use a Figma plugin to help us out with that. Today, I'm going to be showing you how to export Google's WebP image format directly from Figma.
0 Comments
Leave a Reply. |