Blog

ブログ

XDの開発用共有がいい感じ

2019.09.19 公開
Yuko Hashimoto
Yuko Hashimoto デザイナー

『開発用に共有』って何?

ある日気がつくと、Adobe XDの共有メニューに『開発用に共有』という文字が。

なんぞこれ

使ってなかった間に追加された機能っぽい。
早速使ってみたらすごく便利でした。

使ってみた

コメント機能も便利なんですけど、

その下のこれです、これ。

なんて呼ぶのかわかりませんが、要素の詳細を表示してくれるモードっぽい。

カラーや文字をクリックすると、それが使われている要素に色をつけて教えてくれます。あと、カラーはクリックでコピーできます。コンテンツの文字列だって1クリックでコピーできちゃう。やだ楽だわ。

ファイル内に配置した画像に「書き出し対象にする」設定がされている場合、「アセット」からダウンロード可能です。mdpi〜xxxdpiまでの大きさの画像を一括で入手できます。
しかし切り抜いていたり、線やドロップシャドウをつけていたりすると、効果がついた後の状態の画像がダウンロードされるので(XDの書き出しメニューと同じですね)、「ここはコードで装飾してほしい」というところは別に画像を渡す必要があります。

それと、ラスター画像はダウンロードできない様子。

要素そのものをクリック

プレビュー画面の要素をクリックすると、その要素の設定が表示されます。

実装の時にXDファイルを開いてパネルから設定を拾うより早いかも?
デザイン用のソフトとかわかんないよってプログラマさんに渡す時は楽そうですね。Zeplinっぽい。

要素サイズだけでなく間隔も表示

要素間の間隔も表示してくれます。
要素Aをクリックして、要素Bにオンマウスすると表示されます。
なによXDで作業してる時のガイドよりわかりやすいじゃないの!

文字はdp/pt/pxで切り替えられます。

カラーももちろんHex/RGBA/HSLAに切り替えできます。

じゃんじゃん使えそう!

CSS書き出し機能まであるぞ!

ところでですね、ここまでは書き出し先:Androidを選択してたんですが、

書き出し先にWebを選択

書き出し先に『Web』を選択すると

デデドン!

要素のCSSが表示されます!

イラレのCSSパネル大好きな私は感無量ですぞ!
いらない設定もついてるけど……まあそこはうまいこと……なんとか……。

ちなみに、レスポンシブリサイズと自動アニメーションはいまいち実務での使いどころが思いつかなくてあまり触っておりません。
つい作り込んで手をかけちゃうわりにXD内でしか見られないというのがねえ……なんかねえ……なんかうまいことプレビューでの表示に反映されませんかね……複数デバイス用ももっとスッキリ管理できるとか……ねぇ……

XDさん、便利な機能更新をよろしくお願いします!