A starter template or repository to immediately get started in Adobe XD plugin development using Vue.js
- Using standard Adobe XD starter project for plugin development
Vue
for better development and integrationmixpanel
for user action tracking to improve the overall usabilitywebpack
configuration for realtime reload in development and build publishable package
- Follow the recommended development setup for setting up the project
- Follow the development for developing the plugin
- Build plugin and select the files and directories that are needed for build to work and then create a
.zip
file and change the extension of the.zip
to.xd
. Install the new plugin by double clicking.xd
file. Follow official Adobe XD's Packaging your plugin guide
-
Go to the directory that stores your development plugin folder:
- Mac:
~/Library/Application\ Support/Adobe/Adobe\ XD/
- Windows:
C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\
- Mac:
-
Rename the
develop
directory, if it already exists:- Mac:
mv plugins oldplugins
- Windows: (use Windows Explorer) If you don't have a develop directory yet, simply create one.
- Mac:
-
Clone this repository in the
develop
directory:git clone [email protected]:HexorialStudio/xd-vue-plugin-starter.git develop
-
Run the plugin in visual studio code. follow development instructions
-
Launch XD, or if already open, use COMMAND+SHIFT+R to reload plugins.
-
Run the plugins from Adobe XD's Plugins menu.
Make sure to check out XD Plugin Tutorials and XD Plugin References.
# install dependencies
yarn install # or
yarn
# development
yarn run watch
# build
yarn run build