Why are the interactions inconsistent with the original after I set the reactions back to their original values?

Hey @Simon_Yang, thanks for reaching out!

It’s hard to be sure what’s happening and why without seeing how your file was set up. May we ask what you’re were expecting/hoping to achieve by executing the command?

If possible, please include a link to the file, and share it with support-share@figma.com, so we here in the community can take a closer look.

Thank you for your reply. I’m trying to recreate the problem I ran into using the example you mentioned above.

As a novice in Figma plugin development, I want to add interactions by modifying the “reations” attribute of a layer through Figma API. However, when I configured the action in this way, the actual effect produced was different from that added through Figma UI. I compared the “reations” attributes of these two methods through the console and found they were exactly the same.

I wonder why the actual effects would be different? Did I miss any value? The command mentioned above is to demonstrate that even if I give “reations” a value exactly the same as the original one, it would also produce an effect different from the original one.

Here is the link Figma Demo
The above interaction was added using Figma UI, and the below interaction was added using Figma API.

Could you please confirm this for me? I really appreciate it.

Thanks for the context, @Simon_Yang!

Our team noticed that you’re using a deprecated method to try and add the interaction using the plugin API, which may be the reason for your issue. Would you be able to send the exact plugin code you’re trying to run?

This is the correct way to add a prototype interaction to the current selection via the reactions field.

Here is my code to create interaction.

function interact(node: SceneNode, frameNode: FrameNode) {
  const action: Action = {
    type: "NODE",
    destinationId: frameNode.id,
    navigation: "NAVIGATE",
    transition: {
      type: "SMART_ANIMATE",
      easing: { type: "CUSTOM_SPRING", easingFunctionSpring: {
        mass: 1,
        stiffness: 157.91,
        damping: 25.13,
        initialVelocity: 0,
      } },
      duration: 0.8898009657859802,
    },
    resetScrollPosition: true,
    resetVideoPosition: false,
  };
  const reactions = [{
    action,
    actions: [action],
    trigger: { type: "ON_CLICK" },
  }];

  // (node as any).reactions = reactions;
  (node as any).setReactionsAsync(reactions);
}

I read the document and tried using these two different APIs to create interactions, but the results were the same.

I have tried other transition types, such as Custom Bezier, Ease In, etc., which worked as expected, but Custom Spring did not.

Thanks for your patience, @Simon_Yang!

initialVelocity doesn’t need to be submitted. Other than that, the custom spring animation seems to be created correctly when we run it in the viewer.

Thank you for your help.

I tried to remove initialVelocity, and then there was a type error warning. I suppressed the warning and ran the code, but the result was still the same.

These are the versions of my related dependencies.
Figma: 116.17.11

// package.json
"@figma/plugin-typings": "^1.50.0"

To make it easier to see the effect, you can select two frames first and copy this code to the Figma console and execute it to see the result.

  const node = figma.currentPage.selection[0];
  const targetId = figma.currentPage.selection[1].id;
  const action = {
    type: "NODE",
    destinationId: targetId,
    navigation: "NAVIGATE",
    transition: {
      type: "SMART_ANIMATE",
      easing: { type: "CUSTOM_SPRING", easingFunctionSpring: {
        mass: 1,
        stiffness: 157.91,
        damping: 25.13,
      } },
      duration: 0.8898009657859802,
    },
    resetScrollPosition: true,
    resetVideoPosition: false,
  };
  const reactions = [{
    action,
    actions: [action],
    trigger: { type: "ON_CLICK" },
  }];
  
  node.setReactionsAsync(reactions);

You’re welcome, @Simon_Yang, and sorry for the delayed reply!

Can you try dropping the action field and just use actions as you have, or add an await before (node as any).setReactionsAsync(reactions); which would make it await nodesAsync(reactions); ?

Let us know how that goes.

I tried removing the action field, and the result was the same.

  const reactions = [{
    actions: [action],
    trigger: { type: "ON_CLICK" },
  }];
  
  node.setReactionsAsync(reactions);

Then, I restored the code and added the await keyword, but the result was still the same.

  const reactions = [{
    action,
    actions: [action],
    trigger: { type: "ON_CLICK" },
  }];
  await node.setReactionsAsync(reactions);

Finally, I tried combining these two methods, but the result was still the same.

  const reactions = [{
    actions: [action],
    trigger: { type: "ON_CLICK" },
  }];
  await node.setReactionsAsync(reactions);

Thanks for following up, @Simon_Yang!

We copied the plugin api script you posted in the thread from March 14th, and it worked as expected when trying it in a Figma file. We also compared the animation generated by the plugin with manually creating that custom animation, and there is no difference when running that interaction in the viewer.

Are you using the latest plugin api version? Are you confused about the UI of the custom spring animation or the actual animation itself in the viewer?

I have updated all dependencies to the latest versions. But nothing has changed.

These are the version numbers of my dependencies.

MacOS: 14.1.2 (23B92)
Figma Version: 116.17.11

// package.json
"@figma/plugin-typings": "^1.88.0"

Can you tell me your dependency versions? I’ll try that.

Thanks for the info. We stay up to date. We’re now on Version 1, Update 89 was released on March 27th.

Again, are you confused about the UI of the custom spring animation or the actual animation itself in the viewer?