🎨

XD で line-height と letter-spacing を取得するプラグインを作ってストアに公開した話

2023/04/15に公開

2022年9月に Adobe が Figma を買収するというニュースが出て僕の周りでも XD から Figma への乗り換えの動きがありました。
実際にはまだ買収されていないっぽいですが、 XD のアップデートも止まっていたり、個別の製品ページが無くなっていたりと今後も Figma を使うことが増えていきそうです。

そういうニュースを見ていて、結構前に XD のプラグインを作ったことを思い出したので作った時のメモを残しておこうかなと思います。（個人ブログからの転載になります）

作ったもの

Convert font data to CSS というプラグインです。
これは選択したテキストの行間と文字間の数値をCSSで使えるものに整形して取得することができるものです。

元々はこちらの note で言及されている問題に僕も悩んでいたので、それを解決するために使いました。
https://note.com/lby/n/ne71f93c72702

GitHub リポジトリはこちらです。
使い方などはこちらに書いてあるので参照ください。

作り方

XDのプラグインは意外と簡単に作ることができます。

プラグイン > 開発版 > 開発フォルダー を表示とするとXDフォルダ内のdevelopディレクトリが開かるので、ここにプラグイン用のディレクトリを作ってそこで開発していきます。

最低限必要なのは main.js, manifest.json, アイコン画像 だけだと思います。
これらがあれば最低限動くものは作れるはず。

ここのファイルを修正するとプログラムの変更結果が自分の XD に反映されるので楽に開発することができます。

作り方の参考にさせていただいた記事

ストアに公開

作るところまでは結構検索したら出てきたので解説はそちらの記事にお任せします。
GitHub も公開しているのでソースなどはそっちも参考にしていただければです。

結構検索してみたんですが、ストアに実際に公開している日本語の記事が見つからなかったので、そこらへんの経験をお伝えできればと思います。

作ったプラグインを圧縮して `.xdx` に変換する

実はプラグインはストアからじゃなくても配布することができます。

プラグインを動かすために必要なファイル達（ main.js, manifest.json, アイコン画像 ）をまとめて zip に変換します。
その後に拡張子を .xdx に変更するとXDのプラグイン用のファイルになります。
これをダブルクリックで展開するとプラグインとしてインストールされます。

例えば社内で使うプラグインならこの方法で配布してもいいですし、自分のサイトとかでこれをダウンロードできるようにしておけば他の人にも使ってもらうことができます。

レビューに提出する

XD のプラグインをストアに公開するためには Adobe のレビューに合格する必要があります。
レビューは Adobe Developer Console という管理画面にログインしてプラグイン情報を登録して、提出します。

やり方は公式の以下のページに沿ってやっていけばOKです。
英語がめちゃくちゃ苦手な私でもできたので皆さんもちゃんと上から読んでいけばできると思います。

↓公式ドキュメントの最新はこっちらしい

やることとしては本当に単純で「自分のプラグインを .xdx ファイルにして、 Adobe Developer Console で色々入力してレビューを提出」するだけです。

あとはレビューに合格すれば公開完了です。

レビューでリジェクトされた

僕はレビューに2回落ちて、3回目でやっと合格しました。

その時に指摘を受けた内容は以下です。

ユーザーにフィードバッグしてね

僕のプラグインの場合、スタイルをクリップボードに貼るのがメインの処理なのですが、「処理が成功/失敗にかかわらず完了したタイミングで適切にユーザーにフィードバッグしてね」というフィードバッグをいただきました。

xdにはアラートを表示するライブラリがあるのでそれを使うことにしました。

↓最新はこっち

使い方は

npm install @adobe/xd-plugin-toolkit

で落としてきたモジュールのlibディレクトリごと自分のプラグインにコピーして使います。（最後に一緒にzip化する）

あとは普通に読み込んで使うだけです。

const { alert, error } = require("./lib/dialogs.js");

// アラートのタイトルとテキストを渡す
alert('title', 'text')

// エラーのときはこっち。タイトルが赤くなります。
error('title', 'error')

フィードバッグは処理に失敗した時も出さないといけないので、私の場合には「なにもオブジェクトを選択されていない時」や「テキスト以外のオブジェクトを選択している時」に error() を使って「テキストを選択してね！」と出すようにしました。

日本語に対応するならちゃんとしてね

レビューを出す時にプラグインが対応している言語を選択できるのですが、英語はデフォルトで対応になっていて、追加で日本語を選んでいました。
そうしたら「日本語で使っている人には日本語の表示で出してね」というレビューが返ってきました。

多分日本語を追加してなかったらレビュー通ってたんだろうなと思いつつ対応することにしました。

言語の変更は ヘルプ > 言語 で切り替えることができるみたいです。（当時Twitterで教えてくださった方ありがとうございます！）

対応の方法ですが、 application というモジュールを使ってやりました。
他にもいろいろなAPIがあるみたいなので色々できそうです。

↓最新はこっち

使い方はこんな感じ。
これを使ってユーザーへのフィードバッグ文言を日本語と英語で対応しました。

const application = require("application")

if (application.appLanguage === 'ja') {
　　// 日本語の場合                
} else {
　　// それ以外の場合（英語）
}

あと、コマンドを実行するときのラベル名も対応言語ごとに設定しないといけないみたいです。

ラベルも多言語化

これは manifest.json で設定しているところです。

"uiEntryPoints": [
  {
    "type": "menu",
    "label": {
      "default": "GET FONT DATA ALL",
      "ja": "全てのフォントデータを取得"
    },
    "commandId": "getFontDataAll",
      "shortcut": {
        "mac": "Cmd+Alt+A",
        "win": "Ctrl+Alt+A"
      }
  }
]

こんな感じでlabelにdefaultとjaを設定しました。
設定していない言語以外は英語で出したかったので英語をdefaultにしています。

これらの対応をした結果...

無事に公開されました！

まとめ

以上、私がプラグインを作ってストアに公開するまでの記録でした。

レビューは10日間くらいかかるよーというメールがきていたのですが、大体毎回1日かからないくらいで返事をくれました。（日本とアメリカだからいい感じの時差があったのかな？）

2回目のリジェクト時には画像と動画まで送ってくれました。
動画がレビュアーの Google Drive に保存してあって閲覧権限がなかったのでリクエストしたりと、なんだか楽しい体験でした。

レビューメールの指摘はわかりやすかったたし必ず最後に

We look forward to reviewing your submission after the above issues have been resolved.
(上記の問題が解決された後、送信内容を確認できることを楽しみにしています。)

と書いてあったおかげて、2回リジェクトされても負けじとレビューを出すことができました。
楽しかったですが結構苦労したので、ぜひ使ってみてください。