Feature Request: Reusable Interactions

When working on complex prototypes, I often reuse interactions (e.g. animation curves) across screens or steps. In order to do this, I have to manually rebuild them each time. This requires a lot of work - selecting the interaction where I used my custom curves last time, open the interaction panel, copy the custom curves, go to the new interaction I want to apply the same curves to, open the interaction panel, select “custom”, and paste.

It would be great if a) I could copy & paste interactions or b) I could leverage an “Interaction Design System” and apply custom values in the same way I can apply custom colors, typography styles, etc.

Has anyone else found an easier way to do this that I’m missing or is there a plugin to manage this? :raised_hands:t2:

7 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Continuing the discussion from Feature Request: Reusable Interactions:

I am reopening the Feature Request from Benjamin Dauer here as this is a real need and I doubt I am the only one in this?

I copy paste my curve values millions of times per day when building a prototype and it feels incredibly cumbersome with Smart Animate resetting itself for every new interaction…

1 Like

Reopened the topic.

While working on a prototype and applying interactions on components and screens, I found myself repeating the same interactions and sometimes not sure if the duration of an interaction I just applied to a component is consistent with similar components or page transitions.

Example:
Mobile keypad showing/leaving a page should have the below interactions

  • “smart animate” or “Move In” with a direction
  • “ease in and out”
  • “10ms”

Every time I have to show a keypad on a page. I have to go through the above interaction. And make sure it’s consistent with other similar instances.

Suggestion based on above scenario
Where as to If i could set up the above as an interaction style. So when I apply an “on tap” event(on an input field) to trigger a page to show a keypad I can simply select a predefined interaction style named “show-Keypad”.

Value of this

  1. This is help designers and teams agree on animation styles for various components. And also help them stay consistent with the interactions.
  2. Ease in updating interactions across prototypes. (improve time spent on prototyping)
  3. Design hand-offs can also include animations
2 Likes