A Adobe XD plugin sample using modern React. Currently supporting React v17.0.2
Official Adobe XD Documentation
npm install -g yarn
yarn install
yarn add react react-dom
yarn add -D @babel/cli @babel/core @babel/node @babel/plugin-transform-react-jsx @babel/polyfill @babel/preset-env babel-loader nodemon webpack webpack-cli --dev
In order to watch all modifications in the development process, you have to run this command.
yarn watch
Webpack will watch every file modification and will compile to a new bundle in main.js
file. You must reload your plugin on Adobe XD to make your modifications take effect.
It's possible debug the plugin using Chrome Dev Tools (You must use Chrome).
You will find the configuration file debug.json
and all details to enable the debugging mode can be found on the Abode XD Documentation
Supported components
<sp-heading size="XXXL">Heading</sp-heading>
<sp-heading size="XXL">Heading</sp-heading>
<sp-heading size="XL">Heading</sp-heading>
<sp-heading size="L">Heading</sp-heading>
<sp-heading size="M">Heading</sp-heading>
<sp-heading size="S">Heading</sp-heading>
<sp-heading size="XS">Heading</sp-heading>
<sp-heading size="XXS">Heading</sp-heading>
<sp-body size="XXXL">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="XXL">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="XL">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="L">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="M">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="S">Lorem ipsum dolor sit amet.</sp-body>
<sp-body size="XS">Lorem ipsum dolor sit amet.</sp-body>
<sp-detail>Lorem ipsum dolor sit amet.</sp-detail>
<sp-label>Lorem ipsum dolor sit amet.</sp-label>