Smart animate adds motion to matching child layers with a single connection between parent frames. To be considered matching, layer name, parent/ancestor layer name(s), and hierarchy position must match.

You can confirm matching layers in your design using two methods.

🌟 With Design panel open, select an object in layer panel & hold down the shift key

Layers that match selected object will have light blue outline.

🌟 With Prototype panel open, hover over object on canvas with mouse

Children of top-level frame: Layers that match will have matching dark blue outline while hovering.

Nested elements: Hold down the control key while hovering. The bottom nested layer and any matching layers will be highlighted in blue.

How to rematch layers

Rematch layers using either of below approaches:

🌟 Duplicate a correctly matched frame to use as starting point for re-creation

Duplicate an entire correctly matched frame, and modify individual layer properties until Frame/Variant is identical to the one that was unintentionally unmatched.

This is good for cases where a frame has many nodes but only a small subset change in a transition.

🌟 Modify unmatched layers properties directly

Evaluate each unmatched layer individually and modify the layer name, parent/ancestor layer names, and/or hierarchy.

This approaches is best for situations where only a small number of layers aren't properly matched and/or many layers/properties would need to be modified to create the unmatched Frame/Variant by following the first approach.

Layer names

🚫 No Match

✅ Match

Parent layer names

🚫 No Match

✅ Match

Hierarchy position

🚫 No Match

✅ Match