Skip to main content

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? 🙌🏼

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…

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

It’s 2024 and we need this feature!

+1, I need this so much.


Plus, it doesn’t help that setting an interaction “kinda” applies the last settings used but NOT all of them. I often create animations using “after delay” interactions. Every single time I drag an arrow between frames or component instances, I need to re-select “After Delay” from the dropdown that otherwise is always set back to the default “Click” AND erase the default 800ms value (that for some reason needs at least 1ms and won’t accept 0, but that’s trivial). This is so tedious.


Oh, and there’s one case when it doesn’t set back to “click”, but that’s even worse : it’s when a frame has been copied and pasted from another document and retains “click > none” interactions. Then you would drag an arrow from a button but since “Click” is already “occupied” by a totally useless “none”, it sets to the next available choice, which is “Drag”, and then you wonder why clicking your button has no effect in presentation mode. I got tricked by this so many times, it’s a big pain point.

Reply


Terms & ConditionsCookie settings