Interactions in plugin!

[san]

INTERACTIONS in plugin development is super cool to look into.

But in the documentation, they did not mention on how to include them in the plugin code.
For absolute beginners like me, It is bit confusing on where to include this piece of code .

should I include them in my development folder by creating a new file (on which format ? ) like we did for the " manifest.json" file or this must be included in the main.js itself.

What should I do to include interactions in my plugin.
Could anybody say a step by step process

[pklaschka]

interactions, first and foremost, is a module like, e.g., scenegraph, meaning you can “require” its contents (documented here) by using

const interactions = require('interactions');

Anywhere in your plugin’s JavaScript code.

I assume by

@san

this piece of code .

you refer to

// Get all interactions in the entire document (grouped by triggering node)
var allInteractions = require("interactions").allInteractions;

// Get interactions triggered by the selected node
var nodeInteractions = selection.items[0].triggeredInteractions;

// Get all interactions leading to a particular artboard
var artboard = ...
var interactionsToArtboard = artboard.incomingInteractions;

// Print out details of one particular interaction
var interaction = ...
console.log("Trigger: " + interaction.trigger.type + " -> Action: " + interaction.action.type);

(the snippet from the docs)?

If so, this is more pseudocode demonstrating how you could use the interactions module (e.g., the ..., could be whatever you want), meaning this is not to let you copy and paste it.

I’ll try to clarify the plugin file structure a bit since I believe this might help here:

A plugin has, at the very least, one JavaScript file (main.js) and its manifest.json. Any functionality will have to get handled by JavaScript (except the declarations of UI Entry points in your manifest.json), meaning also this happens in a JS file.

It is possible to have multiple JS files in your project. You could, for example, export a function in one file and import and use it in your main.js file:

// /main.js
const myFunc = require('./another-file');

module.exports = { commands: { myFunc } };

// /another-file.js
module.exports = function(selection, root) { ... };

(cf. JavaScript support · Adobe XD Plugin Reference)

Therefore, there is no “one place,” where this can get pasted. The section you’ve linked to is part of the technical reference, meaning it is assumed, when you look at it, that you’ve read (and/or can apply) the things described in the Plugin Development 101 section of the docs. This section, among other things, includes descriptions of how to access APIs, including the interactions APIs: Accessing APIs · Adobe XD Plugin Reference.

I want to make it clear that I mean no disrespect whatsoever with the following statement, it is just a neutral observation by me:

The fact that you’re asking the question in the way you do (including asking for a step by step process) shows (to me) that you aren’t able to apply the concepts explained in the Plugin Development 101 section, yet. Being a beginner is not a problem (everyone was, once, in each area, after all), and if you have any questions about things there that you don’t understand, please feel free to ask them, and we’ll try our best to help you.

However, you’re asking about an advanced topic that, having said the above, is, for now, outside your grasp. You currently not fully understanding the basics means that if I provide you with a step by step instruction, you probably won’t really understand what it does, meaning it might solve your immediate problem, but won’t really help you.

Please try to understand the basics first, before diving into the technical reference. When you find aspects of that that you don’t understand, please ask about them here. I’m sure you’re not the only one facing these questions, and getting answers to them in this forum will benefit you and a lot of other developers, meaning I’d be happy to answer them as the time I have allows it.

But please forgive me for not providing a step by step process, as requested. I fear this wouldn’t benefit you or anyone else and only lead to you applying solutions you don’t understand, yet, meaning you’re dependent on the forum for maintaining a plugin. I can assure you (from my own experience) that the time you spend by getting a firm understanding of the basics is well worth the time you save afterward

[san]

A huge thanks to you @pklaschka ! <3
Thanks for taking time to make me understand on what should I do instead of what I am doing right now.
I absolutely wish to learn the basics and I did learn them but in a hurried manner.
Could you refer a better source for learning the basics ( If you have time ) ?

And the Piece of code was :

{
    trigger: { 
        type: "tap"
    },
    action: {
        type: "goToArtboard",
        destination: /* Artboard node */,
        preserveScrollPosition: false,
        transition: {
            type: "dissolve",
            duration: 0.4,
            easing: "ease-out"
        }
    }
}

Anyways I could understand the functions but not on how to implement them in a code. I would get better like a wine

[pklaschka]

Of course.

Regarding the piece of code: This is an example of how the data structure of an Interaction could look like. It’s not a piece of code you’ll use. It is, in a way, documenting an interface called Interaction that, possibly among other places, gets used in interactions.allInteractions. For example, calling

interactions.allInteractions[0].interactions[0]

would return an object that looks like the example provided in the docs.

I’ll research some good English resources for learning the basics as I’ll co-host a workshop about XD plugins in London next week (if anyone is in the area, you might want to take a look at https://nvite.com/AdobeXD/xdplugins2020, it’s a free workshop as long as you register soon enough) and this might be valuable to know there, too, and will “report back”. The resources with which I’ve learned it are German books which, presumably, wouldn’t help you very much …

[san]

I wish I could attend the workshop if I were in London.
I’m from India Would be happy if you upload the workshop content on YouTube, so that many of the other country members could make use of it ( Just a wish! ) .
Will be waiting for a good source from you
You are so kind, Thanks !

[pklaschka]

I’ll try my best lobbying for us doing some sort of online workshop (webinar-like) in the future (cc: @ashryan @Ingo @simonwidjaja). Since most of the value comes from the “free hacking time” (trying developing and getting 1:1 help from more experienced folks like Adobe staff, @simonwidjaja or – I don’t mean this in a bragging way – me), I think it should probably be more of a webinar then “just” videos on YouTube.

[san]

Thats great !
Waiting

[Ingo]

Hi Santosh, while I agree with what Pablo said we though may be able to share some parts of the workshop later. Perhaps we can also offer more deep dive webinars later in the year. But currently we don´t have tangible plans for that.
Best,
Ingo

[san]

Anything that is informative ! Eagerly waiting for sources