Making a GIF is a great way to add some personality and flair to your website or project. Figma makes it easy to create GIFs that are both stylish and functional. Here’s how:
1. Create a new frame in Figma.
To do this, click the “+” icon in the top left corner of the interface and select “New Frame” from the drop-down menu. Alternatively, you can press the shortcut “Shift + F” on your keyboard.
2. Name your frame and select the appropriate dimensions for your GIF. For this example, we’re going to make a GIF that’s 400×400 pixels.
3. Now it’s time to add your content!
You can use any of Figma’s vector drawing tools to create your image. For this example, we’re going to use a simple rectangle.
4. Select the “Rectangle” tool from the left toolbar and click and drag on your canvas to create a rectangle. To change the color of your rectangle, simply click on the “Fill” color in the top toolbar and choose a new color from the color picker.
5. Now that you have your rectangle, it’s time to animate it!
With your rectangle selected, click on the “Animate” button in the top toolbar. This will open up the animation panel on the right side of your screen.
6. In the animation panel, you’ll see a list of all the properties that you can animate for your selected element. For this example, we’re going to animate the position of our rectangle so that it moves across the screen from left to right.
7. To do this, simply click on the “Position” property and then click on the “Add keyframe” button at the bottom of the panel. A keyframe will be created at the current frame position in your timeline.
8. Now move ahead in time by clicking on the forward arrow next to “Current frame” at the top of the timeline or by pressing the shortcut “Shift + Right arrow”.
9. With your second keyframe selected, move your rectangle to its new position on the screen. You can do this by clicking and dragging on your element or by entering new values for “X” and “Y” in the properties panel.
10. That’s it!
Now all you have to do is export your GIF and you’re ready to go. To export, simply go to File > Export > Export As.. and select “GIF” from the drop-down menu.
