Last time, we introduced how to create a pie chart using Figma's ellipse tool
. This time, as a step up, we will explain how to add animation to the graph you created.
Since adding animation to a pie chart requires somewhat complicated steps, let's start by using a bar chart to deepen our understanding of animation.
What is Smart Animate?
This time, we will set up animation using Smart Animate , which is part of Figma 's prototyping function.
Smart Animate is a function that animates italy b2b leads elements with the same name between frames by compensating for the difference between the elements before and after the change.
The following five changes are applied:
Scale
, Position
, Opacity
, Rotation
, and Fill .
How to add animation to a bar graph
The modifications we will make to our bar graph are Scale and Fill.
Step 1 Prepare a graph before the change
Let's prepare a bar graph before and after the change.
First, use the Rectangle tool to create the graph before the change.
Step 2 Prepare a graph after the change
Next, create the graph after the change.
In this case, we want to align it to the left, so adjust the graph so that the left edge of the rectangle does not move.
Let's change the color as well.
Also, since animation cannot be applied unless the layer and group have the same name, make sure that the names are the same as before the change.
Step 3 Create a component set
Let's turn the elements before and after the change into components.
Select both groups and choose "Create Component Set".
Step 4 Add interaction
Change to the prototype function and add an interaction.
The settings are as follows. Please adjust it to your ideal animation. Trigger: While
hovering
Action: Change to
Animation: Smart Animate
Step 5: Check the operation and it's done!
Once you have set up the component, place it on the frame and check that it works.
It is complete because it has a proper animation when hovered.
summary
What did you think?
By adding animation, you can enhance the visual appeal.
Next time, we will apply the steps we took this time to create an animation of a pie chart. Enjoy!
