XDの新機能、自動アニメーションを使ってみた

Last updated at 2018-12-18Posted at 2018-12-18

みなさま、こんにちは！日本大好き24年、デザイナーのボブです。

本記事では、最近追加されたAdobe XDの新機能「自動アニメーション」の紹介をします。

また、「自動アニメーション」を中心に、XDでどんなことができるかをまとめたので、
XDを知らない方も、これを機会にぜひ使ってみてください。

今回は、明日使える「XD通っぽく聞こえる」言葉も合わせて紹介していきたいと思います。
使えるシチュエーションをしっかりと確認し、活用してくださると嬉しいです。

通っぽく聞こえるということは、詳しい人が日常的に使う言葉や機能であるため、
XDを使ったことが無くともXDトークで円滑にコミュニケーションを取ることができるのではないでしょうか！

 ではでは、XDに馴染みのない方にも分かるように「通フレーズ」を通して、XDのおすすめ機能を紹介していきます

##そもそもAdobe XDとは
そもそもXDとはなんぞや、、という方もいるかもしれませんので簡単に説明します。

XD（Adobe Experience Design CC）は、webやアプリのUIデザイン作成から、ページに画面遷移までを作ることができるモックアップツールです。

 デザインをURLで共有することや、ページ遷移のトランジションをつけることができ、大変重宝しています。
モックアップツールを使うことでコミュニケーションを円滑にし、素早い開発を進めることができると思います。

ちなみに、XDは無料で使えて（無料のアカウント登録は必要）、チュートリアルが豊富なため比較的学習コストは低いんですよ

##Phrase 1：え、そのボタン要素、シンボル化してないの？
 必死に複数のボタンの色を一つ一つ直している人に、この言葉をかけてください。

シンボル機能とは

Adobe XD のシンボルを使えば、ドキュメント内に要素（または要素のグループ）のコピーを複数配置して、後から全部まとめて変更できます。デザインの中に、同じ要素の組み合わせが繰り返し登場する場合には、大きく時間を削減できる機能です。

端的に言うと...
ヘッダーやボタンなどのパーツをシンボル化しておくと、全てのシンボルを一括で編集できますよ〜〜という機能です。
シンボルはアセットパネルに追加され、要素の調整が圧倒的に楽になります。

ボタン要素をただコピーして複数配置していると、形や色が変更になったとき大変です...

また、同じようにアセットパネルにはカラーやフォントも登録することができ、
登録してあるカラー、フォント、シンボルを変更すると、一括で反映されるんだぜ！！
まじ半端ないって。

##Phrase 2：デザインスペックを見ると、便利な世の中になったなって思うよ...
デザインデータを見ながらに小声で呟くと効果は増し増しです。

デザインスペックとは

ファイルのデザインプロパティを自動的に共有できます。デザインスペックを公開することで、開発者にエレメントの高さ、幅、サイズ、整列、2 つのアイコン／エレメント間の相対的な間隔、色、テキスト編集などの重要な情報を提供します。

端的に言うと...
URLでデザイン情報を共有できるよ〜〜という機能です。

デザインスペックで共有できる主な情報
・マージン
・フォントサイズ
・カラー
・アセットに登録している要素
（アセットパネルとは違います！デザインスペックで共有したいアセットは別で設定します）

画面左側のデザインにカーソルを合わせるとマージンが表示され、
画面右側にそのページに使われているアセット、カラー、文字スタイルなどが表示されます！

この機能の出現により、デザインデータにマージンのガイドを引くと言う作業がなくなりました....
そして、なんと！共有されたURLからアセットを書き出す（png,svg,pdf）こともできるんです
すごい。

##Phrase３：自動アニメーションで表現の幅広がったよねぇ
最後に、今回の記事で紹介したいメイン機能です！！！
XDトークで主導権を握りたいときに絶大な力を発揮します。
と、いうのも先月発表されたばかりの機能だからです。  
こんなセリフを言った日には斜向かいの後輩はキラキラした目であなたの方を振り返るでしょう。

自動アニメーションとは