This preview is just looking through the four frames that we've already selected before clicking the button and it's giving us a real-time preview of that what that will look like if we were to export this to an animated GIF. Once you're happy with that you can click on this "Create GIF" button and what that's going to do is it's going to take the selected images that you've just specified in the select panel before we clicked the button, and it's going to add those into this little preview here. You can you can set the quality beforehand if you want to do that, so I'm just going to bump this up to 95. Once you've selected the images that you want to create an animated GIF from, you can go up here, and instead of clicking the normal "Compress" button that you might use quite a lot for other formats, we're going to use this middle button called "Create GIF".
What I'm going to do, is I'm going to select a few of these photos I'm going to select four, and it doesn't really matter which export setting you select, all that matters is these are the frames that we're going to add into our animated GIF. I've already done this, and you can see here I've got a bunch of exports that I can that I can see and use. If I click on any of my layers here and then go over to the right hand side, you'll see under the "export settings" that I've added a few export settings already, so if you haven't done that, you can click on your layers that you want to include into this animated GIF that we're going to make, and just make sure they've got at least one export setting on those layers JPG is fine, PNG is fine, or SVG - anything you want to add really, just to make them show up in this list here. If you don't see any images, it means that you haven't added any image exports onto your layers. As soon as it loads, you should see some images. The first thing we're going to do is run the Figma plugin, so you can right-click anywhere, go down to "plugins" and then go to "TinyImage Compressor" and left click on that. This is the TinyImage compressor plugin, I already have it installed but if you don't have it installed, you'll be able to click the "install" button over here on the right, and once you've clicked "install: it'll look like that, and it'll say that it's installed and then you're good to go back to your Figma file.īack in our Figma file, we've just got a few very simple layers here so we've got four image layers and three frames and three SVG frames. If you haven't already installed it, you can go to the Figma icon in the top menu bar and go down to "community" then click on "plugins" then what you want to do is search for "tinyimage" up in the search bar up hereand just hit the "enter" key and you'll see it pop right up. This functionality is not built into Figma, so we're going to use a plugin called TinyImage to make this happen for us.
ANIMA Create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.Today, we're going to be looking at how to create and export animated GIFs from Figma using the TinyImage Figma plugin. Don’t forget to check in with our collection Handy Tools and Apps for Designers on a regular basis, where you can find new apps with great ideas to help your creative process.
To install a Figma plugin, simply explore the wide range of resources on the Community page and click "install" to add the plugin to your user account. A list of 20 must-have Figma Plugins and Tools New Figma resources are uploaded daily to the Figma Community and to save you time, we've made a useful list of the best plugins and tools to speed up your design workflow, based on our first-hand experience. Apart from its collaborative functionalities and its capacity to create interactive prototypes, export code, graphics and complete layouts, with the help of plugins, Figma can extend its features further - such as the automation of time-consuming tasks. It's a browser-based interface design tool that is cross-platform and works in any browser and OS, providing the ideal environment for real-time collaboration with other designers and team members. Figma is an excellent tool for designing interfaces, and the one of the best things about it is the enormous community behind it, providing a continuous flow of great resources such as templates, icons, tools and plugins that make your design workflow faster and easier.įigma has a lot of advantages compared to Adobe XD or Sketch.