Boost Your Prototypes with Sketch's New Smart Animate

type

status

date

slug

summary

Key Features of Smart Animate

Animated transitions

Smart Animate can automatically animate layers with the same name between multiple artboards. For example, when a shape is different in size or position between two artboards, Smart Animate will automatically generate a transition animation of the size or position to make the transition process smooth and natural.

Automatically identify layer changes

Smart Animate automatically identifies changes in the same layer in different artboards and generates animations based on these changes. There is no need to manually set complex animation paths, which greatly simplifies the animation creation process.

Custom animation parameters:

Users can set the duration and easing effect (such as linear, accelerated, etc.) of the animation as needed to control the speed and smoothness of the animation. This can make the animation effect more in line with design requirements and user experience.

Applicable to various interactive effects

Smart Animate can be used in various interactive scenarios, such as page transition after button click, menu expansion, information display, etc., to help designers achieve smooth transition animation and make the user experience more intuitive.

Complex animation control

In addition to basic size, position and transparency animations, Smart Animate also supports more complex animations such as rotation, color change, etc. This enables designers to achieve rich animation effects through simple operations.

Improve the visual effects and interactivity of the design

With Smart Animate, designers can add visual dynamic effects to their prototypes, allowing users to more intuitively feel the dynamic changes of the design and enhance the overall user experience and interactivity.

Showcase of Smart Animate

1. Animation Transition

Smart Animate can automatically animate layers with the same name between multiple artboards. For example, when a shape is different in size or position in two artboards, Smart Animate will automatically generate a transition animation of the size or position to make the transition process smooth and natural.

🔥

In this example, we have an ellipse layer with the same name in two artboards—the only difference is their size. When using Smart Animate to create the transition, the ellipse grows smoothly and gradually.

Smart Animate automatically identifies changes to the same layer in different artboards and generates animations based on these changes. There is no need to manually set complex animation paths, which greatly simplifies the animation creation process.

To set up Smart Animation, make sure all the layers you want to animate have the same name across multiple artboards. Then, when you link from one layer or artboard to another, select Smart Animation as the animation type in the Prototype tab of the Inspector. You can also set the duration and easing type of the animation to customize the animation effect.

Users only need to make sure that the layers that need to be animated have the same name in different artboards and select Smart Animate as the animation type in the "Prototype" tab. You can also set the duration and easing type of the animation to further customize the animation effect.

2. Progress Animation

Smart Animate can be used to indicate loading progress, such as when verifying through fingerprint, using animation to fill in different parts of the fingerprint to help users understand the progress.

3. Progressive Information Display

With Smart Animate, users can choose when to display more information, such as in a music player, when a user clicks on an album, the track list and other details are displayed. Different elements animate based on layer position and transparency, creating a dynamic user experience.

4. Animation fine-tuning

Smart Animate can also be used to fine-tune the details of a design and add a “polished” effect. For example, in an app’s onboarding page, as the user operates, images and elements will move, rotate, or deform with the steps, giving the user a more intuitive onboarding experience.

5. Use smart animations in navigation

A common application of smart animations is in navigation design. In this example, the classic macOS sidebar is recreated with collapsible items. A hover state is added to the sidebar button.

Official introduction: https://www.sketch.com/blog/smart-animate/