npm packages or Node.js APIs in XD Plugins
I am trying to build a plugin for Adobe XD. I'd like to use some npm packages along with some Node.js APIs inside my code. Would this be possible?
2 Answers npm packages or Node.js APIs in XD Plugins
Can I use npm packages or Node.js APIs?
You may be able to use some npm packages without modification, but chances are good that you’ll need to use webpack or rollup in order to generate a bundle.
Node.js APIs themselves are not supported.
lenilsondc 4 months ago
You can use some npm packages in your Adobe XD plugin, but you need to bear in mind the following constraints:
requirefunction does not follow node-style resolution. That is,
require('module')won't automatically resolve to
node_modules/module/index.js. To address this, you'll want to use a bundler, such as webpack. For an example using webpack and React, see the ui-hello-react sample.
Furthermore, the HTML5 DOM API environment supplied by Adobe XD may not be sufficient if your npm package relies upon specific browser APIs. For example, the Web Audio API isn't available to Adobe XD plugins, and so any npm packages that require the use of that module wouldn't work.
For some packages, it may be sufficient to add stubs or polyfills. For example, you could stub
requestAnimationFrame if a module required it, like so:
global.requestAnimationFrame = cb => cb();
Now this isn't a functional rAF, but it might be sufficient for the package you're using.