コーディングにおいて、まず取り組むことといえば、画像の書き出し作業だろう。この作業がリズムよく実施できるか否かによって、その後の進捗に影響するといっても過言ではない。少なくとも私は、その認識をもって一気にクリアしたい工程である。
Adobe XDの場合、書き出したファイル名は、レイヤー名に関わる。レイヤー名がそのままファイル名になるということだ。レイヤー名が未変更状態だと、「長方形 xxx」だとか「線 xxx」などの名称が反映されている。
したがってファイル名は、命名規則に沿った名称に変えなければならない。書き出し作業を面倒に感じるのは、きっとこの名前を付けて保存する工程があるからに違いない。
レイヤー名が命名規則に沿ったものであれば、苦労はないが、そこはマークアップエンジニアの守備範囲であることが多い。コーディングの都合で、グループにしたいレイヤーや分割して書き出したい場合が考えられるためである。
それではどのタイミングでリネーム作業をすれば良いのか？いかに効率よく行えばよいかは、そのときの都合や好みによるため一概に何がよいとは言い難い。状況にあわせて書き出しウィザードで名前を付けて保存したり、XD内のレイヤー名を修正したりすればよい。だがそのどちらもシームレスに行えるものではないと感じてしまう。
そこでもうひとつの選択肢になり得る「Rename it」プラグインを紹介したい。
Rename it プラグインについて
Rename itは、レイヤー名リネームをサポートしてくれる。アートボード内のオブジェクト操作に関連してリネームが行えるため意識を逸らすことがない。
特徴
- レイヤー名を変更できる
- 命名パターンが用意されている（レイヤー名、連番、アルファベット、etc.）
- レイヤー名を置換できる
使い方
Rename itは、ダイアログ操作によりリネームを行うことになる。まずはプラグインをインストールしてもらいたい。
インストール
Rename itをインストールするには、Adobe XDツールバー「プラグイン」>「プラグインを見つける…」をクリックするとプラグインウインドウが開く。
つづいて、ウインドウ内の入力フォームに「Rename it」を入力すれば、対象プラグインのみリストアップされるはずだ。インストールボタンをクリックして完了させよう。
リネームする場合
- オブジェクトを選択
- ショートカットキーを押下「⌃+⌥+R」
- リネーム文字列を入力
- Renameボタンをクリック
アートボード上のリネーム対象オブジェクトを選択した後に、ショートカットキー「⌃+⌥+R」押下。するとリネームダイアログが表示される。
Name フィールドに文字を入力して、Renameボタンをクリック。以上でリネーム完了となる。果たして、レイヤー名が変わっていることを確認できる。
置換する場合
- 複数オブジェクトorアートボードを選択
- ショートカットキーを押下「⌃+⌥+⌘+R」
- Find&Replaceに文字列を入力
- Renameボタンをクリック
複数のオブジェクトを選択するか、アートボードそのものをアクティブにすることで置換対象として認識される。選択が済めば、おもむろにショートカットキー「⌃+⌥+⌘+R」を押下して構わない。置換ダイアログが表示される。
Findに検索文字列、Replaceに置換文字列を入力する。それにより選択中のレイヤーから文字列がマッチしていれば、一括で置換が完了する。テキストエディタの文字列置換と変わらない感覚だろう。
まとめ
「Rename it」プラグインによるリネーム方法をお伝えしてきたが、作業フローに組み込むに足る内容だっただろうか。
Rename itでも、やはり完璧なシームレスとはいかないが、アートボード操作中にリネームを行える。僅かでもフローが連動していれば、効率UPにつながるはずだ。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。