Let’s Get Started: Developing XD Plugins with Yo Xd-Plugin
This week’s guest post is by Yoshiki Takeoka, a program manager for Adobe Research and Development in Japan.
If you’re a web developer who is already familiar with Yeoman, you’ll be excited to learn about this new, third way to get started building an XD plugin. Read on for all the details!
— Erin Finnegan, Community Engineer, Adobe
If you’re just getting started, we offer a Quick Start tutorial to help you build a plugin from scratch in just a few steps. If you prefer a no-code bootstrapping solution, we also offer customized starter projects on the Adobe I/O Console.
In addition to this, we’re now pleased to offer Yeoman support for XD plugin scaffolding.
What is Yeoman?
Yeoman is a popular command line tool that helps web developers quickly build scaffolding for their projects. It’s often used in conjunction with other popular command line tools like NPM and gulp.
We assume you have already installed NPM, Node.js, and Adobe XD on your machine.
How to scaffold an Adobe XD Plugin project.
npm install -g yo generator-xd-plugin
Next, you can build scaffolding for an XD plugin project by using this command:
Yeoman prompts you with some questions, and that’s all.
Get a Plugin ID and start coding
After Yeoman creates your plugin scaffolding, you will still need to visit https://console.adobe.io/plugins and get a new plugin ID. Open the
static/manifest.json file and paste your new plugin ID as the “id” value.
Next, back in your Terminal, move to the project directory and run your plugin:
Yeoman’s templates include nodemon as project watcher, and triggers building the plugin (by webpack), deploy to the
develop folder (by xdpm) automatically. You no longer have to copy and paste your plugin project folder to XD’s
Finally, you can start your plugin development with three commands:
It’s time to create your own Adobe XD workflow. Please refer to the following resources for more information:
- The official hub for XD Plugin Development
- XD Plugin documentation
- Official XD Plugin Developer Community Forums