![]() ![]() That's done one play through, and you can see it stopped on our last frame here so it's gone through these stops. We can actually change this to say loop it one time, if I set it to "1" and then click "Update Preview", let's just let it play through. If we did want to change that, we can uncheck this "infinite" check box and we now have access to this input number here. Now you can see it has slowed down the animation instead of going and from 0.5 seconds per frame, we're now doing 1 second per frame so every 1 second it's going to switch through these four, and you can see here it's set to playback as "infinite" which means that that will just keep going on forever, it's never going to stop. If you want to see that change reflected you can click on this "Update Preview" button down here, and what that's going to do is just refresh that preview with our settings that we've just changed. If we want to increase that and slow it down a little bit, we can set the time per frame to be something more like 1 second. The first one would be the "time per frame" this is a slider that we can move up and down at the moment it's set on 0.5 seconds, which means that each of your four frames are going to show for half a second before it moves on to the next one. Let's dive into a few of the settings that we have some control over. 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. Today, we're going to be looking at how to create and export animated GIFs from Figma using the TinyImage Figma plugin. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |