Get the course here: [Download Course] John Crestani – Super Affiliate System PRO
Our website: https://www.genkicourses.site/product/john-crestani-super-affiliate-system-pro/
If you're wondering why our courses are priced lower than the original prices and are feeling a bit suspicious (which is understandable), we can provide proof of the course's contents. We can provide a screenshot of the course's contents or send you a freebie, such as an introduction video or another video from the course, to prove that we do have the course. Should you wish to request proof, we kindly ask you to reach out to us.
Please be aware that our courses do not include community access. This is due to the fact that we do not have the authority to manage this feature. Despite our desire to incorporate this aspect, it is, unfortunately, unfeasible.

Don't make my mistakes!
TL;DR: There is a summary at the end.
This is a list of 7 mistakes I made when I wanted to animate in Figma. One of my friends who is an awesome designer taught me how to avoid it and gave me his tips for them and I summarized his tips in this post and I hope you find it valuable too.
I wort both the wrong and right approaches and I added Gifs for each item for more explanation. I added the tip in a photo!

1. Not naming the layers correctly!

It might sound irrelevant but naming your layers matters a lot in animating.
The truth is that the smart animation is not THAT smart and it actually works by simple rules to detect how to animate things. One of the most important rules that it follows is layer names.
Figma looks at the shapes with the same names and detects them as one shape, and starts to animate based on their changes in each frame.

#: Let’s see a simple example:
In this example, we want to animate the color and border radios change of a rectangle.

What you shouldn’t do

We have a rectangle on two frames. In the first frame, we make it Magenta and in the second frame we make it Cyan and we will round the corners.
We name the first rectangle shape 1 and we name the second rectangle shape 2.
Watch what will happen:
Mistake Number 1: Shapes with different names — Animation doesn’t work properly
As you can see instead of animating the shapes will fade away.

What you should do

Now we name them both the same thing now watch what will happen.
Tip Number 1: Shapes should have the same name — Animation works properly
​
As you can see it is animated perfectly now.
If you forgot to name your layers correctly and then remember it what can you do?
A cool trick for renaming multiple layers at the same time is selecting them on the layer panel or with “CTR”+ “F” and then after selection using the hotkey “CRL” + “R” to rename them at the same time.
Renaming multiple layers at the same time using “CTRL+R”
One other cool thing that I learned from Hisham was to use the “question mark” icon to find the short keys.
https://preview.redd.it/7wn8j4vfye3b1.png?width=1920&format=png&auto=webp&s=ab4be9f8b9713f830d7130c09af7b0f214d0ba5a

2. Not paying attention to grouping!

As we said earlier Figma pays attention to the layer names. Figma sees groups as layers so their naming matters. Items within a group will be animated together as a single unit. This means that your groups should be the same in both frames that you are animating. You can’t animate certain elements without a group in one frame and within a group in another frame.

#2: Let’s see a simple example:
In this example we want to create a move in and out animation by a set of elements.

What you shouldn’t do

We have a set of elements that aren’t in a group on the first frame. In the second frame, we want to change their position altogether, and to make this easier we group the elements and move them. Now see what will happen when we animate.
Mistake Number 2: Grouping objects in only one frame — Animation doesn’t work properly
​
As you can see Figma can’t detect these shapes are similar to the previous shapes and it sees this new group as a new object. That’s why we see a fade instead of a moving animation.

What you should do

Now we move each shape separately without making it a group. Now watch what will happen:
Tip Number 2: Groups are separate objects, don’t use grouping in only one frame, and keep the object states the way it is in both frames — Animation works properly
​
As you can see the animation works perfectly.
Read this if you are a nerd🤓: What will happen if we group it, move it, and then ungroup it again?
Let’s see:
What will happen if we group objects, move the group, and then ungroup it? — Animation works properly
As you can see the animation is working perfectly because Figma can detect that the shapes on both frames are the same and it seems that the group hasn’t existed at all.
What will happen if the shapes were in a group in the first place?
Whatever state they are in (in or out of a group) they should be in the same state on the second frame as well. So if they are in a group first in the second frame they should be in a group as well.
https://preview.redd.it/ohfk86ehye3b1.png?width=1920&format=png&auto=webp&s=346a335afe890455e623e8fb0694607316b2eeb3

3. Ignoring shape types!

If you paid enough attention to the Example #1 you would have noticed that we didn’t use a circle for the second frame we rounded the corners of the rectangle to get that animation. As you know smart animation remembers our actions on the canvas and replays it later. So what would happen if we haven’t rounded the corners and have used a circle instead of a rectangle in the first place?

#3: Let’s see a simple example:
In this example we want to animate a rectangle to a circle.

What you shouldn’t do

As you probably guessed there is no animation involved in changing the shape. The rectangle fades away and a circle will appear and it doesn’t matter if we name them the same or different.
Mistake Number 3: Use different shape types even with the same name — Animation doesn’t work properly

What you should do

Use the same shapes with the correct naming and round the corners of a rectangle to get a circle shape.
https://preview.redd.it/y2mez2jiye3b1.png?width=1920&format=png&auto=webp&s=48b747c10a0aaa4c0a8a5107eae95d274ab0b1ce

4. Messing around with shapes’ anchor points!

To continue from the previous point if we change the anchor points of a shape Figma detects that as a new shape no matter if the name is the same and it can’t animate it perfectly. It fades from the previous shape to the new shape.
🤓If the change was subtle or the duration of the animation was short Figma still fades things but it is hard to detect and it might sound like the animation is working.

#4: Let’s see a simple example:
In this example we are changing the anchor points of a rectangle.

What you shouldn’t do

In this example we changed the anchor points of the rectangle on the second frame and as you can see although the layer name is the same the animation is not working properly.
Mistake Number 4: Making changes in shape anchor points — Animation doesn’t work properly

What you should do

Don’t mess around with the anchor points until Figma releases an update for this!😉

So to sum up a more general rule from points 3 and 4: the shape and all its anchor points should be the same in 2 frames in order for the animation to work.

https://preview.redd.it/4g4k6pljye3b1.png?width=1920&format=png&auto=webp&s=5e98066b6198b672be3df6b21e59d3ea42843b0b

5. Ignoring layer order!

Figma pays attention to the order of layers and it will animate based on that.

#5: Let’s see a simple example:
In this example, we have 2 rectangles and we are changing their border-radius in the second frame.

What you shouldn’t do

If we change the order of the layers, this will happen:
Mistake Number 5: Layer order is not the same in both Frames — Animation doesn’t work properly
As you can see the animation is laggy and it fades away because we changed the layer orders.

What you should do

Now we keep the order the same in both layers. Now watch that the animation is happening smoothly.
Tip Number 5: Keep the layer orders the same in all Frames — Animation works properly — Gif By
This might sound so simple but when you are doing bigger animations it comes so handy. We have one example of it in the FigChallenge challenges for the spinning carousel challenge by Adrian. If you didn’t pay attention to layer orders your animation wouldn’t look like the tutorial.
https://preview.redd.it/163awiokye3b1.png?width=1920&format=png&auto=webp&s=20fa2ecf511b88f089c3dfc7fa68f78270ac24e7

6. Moving the layer outside the frame

While you are animating when you are changing the location of a shape make sure that its layer remains in the frame. Even if your shape is completely outside the frame and it is not visible it still needs to be on the frame layer. This one happened to me many times! While you are animating you might accidentally move the shape outside the frame. To avoid this hold the “SPACE” key while moving your object.

#6: Let’s see a simple example:
In this example, we want to create an animation in which our rectangle comes from outside of the frame to the frame.

What you shouldn’t do

If we don’t hold space while moving the rectangle it goes outside the frame. You can check it on the layer panels as well. When we animate the animation doesn’t work and instead of moving objects we will see a fade!
Mistake Number 6: Accidentally moving the shape outside the Frame — Animation doesn’t work properly

What you should do

If we hold the “SPACE” key while we are moving the rectangle remains in the frame. (You can check it on the layer panels as well.) Now you will see the animation works perfectly!
Tip 6: Keep your shapes inside the Frame by holding SPACE — Animation works properly
​
https://preview.redd.it/7b6dx09mye3b1.png?width=1920&format=png&auto=webp&s=2556cada2ed723b45893509823ca3d89600d029a

7. Not paying attention to the animation type!

If you paid attention to all the above points and still your animation doesn’t act like what you see in the tutorial it might be because of the difference between the type of animation you used. This subject is an advanced one and it deserves its own post. I'll write about it soon.
Summary!
If you like to see a more complete and neat version of this here is the link to the article.