MD-Blog_Web Creative

今回は、「Adobe XD」について書いていこうと思います。
近年、弊社でもWebのデザインを制作する際に使用するようになってきました。

デザインするのには修正も楽で、立ち上がりも早い、そしてデザインデータの共有も楽！　という、とても使いやすいイメージがありますが、後工程のエンジニアの方たちがマークアップするときに迷ってしまうものでは意味ありませんよね？

そこで今回は、"後工程に優しいXDの作り方"について、自分のためにも書いていきたいと思います。

今回は、後工程に役立つプラグインの紹介をしたいと思いますので、Adobe XDについての細かい説明は省かせていただきます。

プラグインのダウンロード方法

メインメニュー → プラグイン → プラグインを見つける → 参照から検索

01. テキストボックスの高さを合わせる「TrimIt」

TrimItは、テキストボックスの高さを合わせてくれ、サイズを整数に変換してくれます。
文章が長くてテキストボックスに収まらないときや、テキストボックスが余ってしまっているときに使用することで、一発でサイズを合わせることができます。

先日のXDのアプデにより、テキストサイズを揃える機能が追加されましたが、こちらは、複数のテキストボックスをまとめて揃えることができるため、おすすめです。

テキストボックスに余白が余ってしまっていると、開発用URLでコンテンツの幅を正確に調べることができなくなるため、必須のプラグインだと思います。

使い方

プラグインパネル、または、メインメニューの「TrimIt」を選択

02. 図形の端数を消し去る「Remove Decimal Numbers」

Remove Decimal Numbersは、端数を消してくれるプラグインです。
上記のTrimItは、テキストボックスのみですが、図形の端数も消すことができるため、とても重宝します。中途半端なサイズがなくなり、エンジニアへの受け渡しがスムーズになります。

使い方

プラグインパネル、または、メインメニューの「Remove Decimal Numbers」を選択

03. アートボードを整列させる「Artboard Plus」

アートボードをグリッドに合わせ簡単に整列させることが可能です。
さらに、レイヤーをアートボードの名前の順番に変更させることができます。
規模のあるWebサイトをデザインしているときに、一瞬でアートボードを揃えることができるのは、とても助かりますし、後工程にとっても見やすいXDを作る事ができると思います。

使い方

プラグインパネル、または、メインメニューの「Artboard Plus」から「Rearrange Artboards into Grid」を選択

04. レイヤー名を一括で変更できる「Rename it」

このプラグインを使用すれば、選択したレイヤーの名前を一括で変更し、一括で名前を置換することができるため、リネームにかかる時間を減らせます。

自分も以前、アートボード内のレイヤーをリネームする作業に追われてしまうことがありました。
その際はこんな便利なプラグインがある事を知らなかったため、かなりの時間を費やしてしまうという苦い経験をした事があります...

使い方

プラグインパネル、または、メインメニューの「Rename it」から「Rename Selected Layers」を選択

05. アートボードの高さをオブジェクトに合わせる「Resize Artboard to Fit Content」

XDには、オブジェクトの高さを合わせてリサイズする機能がないため、毎回数字を調べて手入力していました。この機能があるとよく発生するこの作業にかかる時間を大幅に短縮する事ができますね。

使い方

プラグインパネル、または、メインメニューの「Resize Artboard to Fit Content」から「アートボードをコンテンツに合わせる」を選択

まとめ

だいぶWebデザインする際のお供として定着してきたXDですが、個人的には、後工程にパスするとき以外でも、「もっとこんな機能があったら...」という痒いところに手が届かないことがちょくちょくあるため、今後のアプデに期待したいですね。 もっと便利なプラグインがたくさんあるため、今後も時間を見つけて探してみたいと思います。

最後までご精読いただきありがとうございました！