Create Icon Animation in Figma with Aninix Plugin

January 23, 2023

January 23, 2023

So I recently finished a website design for @EverlendFinance, and I worked hard on icons there, and @jamesm really inspired me with the way he does and presents his work. So I decided to do the same, but also show how I do @LottieFiles directly in @figma using @AninixApp.

1/ First, pls just check out the icons. I really like how they turned out in such an understated 2d style. Let's proceed to animation, believe me, how simple and elegant it is done in Aninix deserves your attention →

2/ So the first step is the storyboard. The coolest thing with the safe is the opening of the door, which I emphasize with glare and this dope pseudo 3d effect. Working only in @figma

3/ The second step is to prepare the layout for animation In this case, I use the "final frame" of the storyboard, but I edit all the elements so that everything looks like in its original state (the first frame) hiding all the additional elements, also I change the namings.

4/ And the last step is animation in @AninixApp. I will not go into details here, since it seems to be not a Twitter format. But can notice that I don't change the animation curves at all because @tonypinkevych put his creation as default animation, and its a magic.

5/ Now you can easily export the animation to @LottieFiles, to use on your site etc.:) Also do not forget that 20% of the efforts give 80% of the result. This animation looks complicated, but at the core it is very simple:) I went through these 3 steps in about half an hour.

Continue Reading