Adobe XDプラグインの開発で、ユーザーインターフェース(UI)は人気のライブラリVue.jsを使いたいというニーズに応えるための記事。 こんな感じのXDプラグインを作れるサンプルを用意した。 リポジトリはこちら。 ics-creative/181211_AdobeXD_Plugin_Kit Vue.jsを使う利点 JavaScript/HTML/CSSを使ってAdobe XDプラグインを開発できる。createElement()メソッドなどJavaScriptを使ってHTMLのDOMを構築する必要があるため、DOMを書くのが大変。 シンプルなDOM構造であればいいが、複雑なUIを開発しようとすると、ライブラリの手を借りずに作るのはしんどい。 Vueの単一ファイルコンポーネント(Single File Component = 略してSFC)を使って開発すると以下のメリットを享受できる。
![Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f66f29567638a98ef018d6a652addaeb564bec85/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9QWRvYmUlMjBYRCVFMyU4MyU5NyVFMyU4MyVBOSVFMyU4MiVCMCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiU5MlZ1ZSVFMyU4MSVBOEJhYmVsJTJGVHlwZVNjcmlwdCVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9MGRmZTViMTFkMGIyMjlmY2M2MzdiODJkNjgyZjllMjc%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2xvY2ttYWtlciZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjFmYjQ3NGQ0YmVhNmFhNzdhMjE2NTg1ZjExY2E1ODU%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D6774cd435ec3e7063b97e537196fdea3)