We know how important animation is to bringing digital products to life. Animations can make scrolling from one item to the next in a list easy and intuitive, while liking something with a heart can feel playful and fun. In FigJam, animated emotes and high-fives are a core part of the magic of being in the file together, and we wanted to help our users build similar experiences. That’s why we recently launched spring animations, which allow you to design more fluid transition animations when prototyping.
Building spring animations took our engineering team back to the classroom—to make animations that are both natural and accurate, we borrowed principles from physics. We’re excited to share the mechanics behind the movement, and the story of how spring animations bounced their way into Figma.
Spring animations make designs behave more naturally because they adhere to the laws of physics
Until we launched spring animations, bezier animations were the primary way to create animations in Figma. Bezier animations allow you to specify how an object should start moving, and how it should stop. As flexible as they are, bezier animations can still be a little tricky to work with, and if you’re not careful when adjusting bezier curves, you can quickly end up with chaotic animations where objects gain speed out of thin air, change directions unnaturally, or come to a stop.
在我们推出弹簧动画之前，贝塞尔动画是在 Figma 中创建动画的主要方式。贝塞尔动画允许您指定一个物体应该如何开始移动，以及应该如何停止。尽管很灵活，但贝塞尔动画在操作上还是有点棘手，如果您在调整贝塞尔曲线时不小心，很快就会出现混乱的动画，对象会凭空获得速度，不自然地改变方向，或者停下来。
Spring animations work a bit differently. Instead of defining how an object moves, you specify what the physical properties of the movement are and let the laws of physics come up with the actual path. (Th...