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

Hello, XD Plugin developers! Since we launched Adobe XD Plugin APIs at Adobe MAX 2018, we are continuing to develop new features for the APIs.

Adobe XD plugins are written in Javascript, so it’s easy to start your development with modern frameworks used in web development like React and Vue. You can even use some NPM packages in your plugin or use NPM packages to help facilitate your plugin build process. (For more information regarding NPM package compatibility, please see the documentation).

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.

Prerequisites

We assume you have already installed NPM, Node.js, and Adobe XD on your machine.

How to scaffold an Adobe XD Plugin project.

First, you’ll need yeoman; then you’ll need generator-xd-plugin:

npm install -g yo generator-xd-plugin

Next, you can build scaffolding for an XD plugin project by using this command:

yo xd-plugin
Let’s try yo xd-plugin to scaffold your Adobe XD plugin project.

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:

cd project-directory
npm start

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 develop folder.

Next steps?

Finally, you can start your plugin development with three commands:

yo xd-plugin
cd project-directory
npm start

It’s time to create your own Adobe XD workflow. Please refer to the following resources for more information:

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe I/O on Twitter for the latest news and developer products.