資料
資料はこちら
https://xd.adobe.com/view/ce170690-3b2d-45cb-59bc-7af76674f99c-b826/
https://www.dropbox.com/s/e9o0f7oqhvac4gg/resume-20181120.zip?dl=0
轟啓介 @keisuke322
湯口りさ UIデザイナー @risay
After Effectsへの書き出しも可能になった。
最新情報を追いかけたい時は、AdobeXD公式FBページがある。
XDのMAUは世界第二位。一年で四倍に増加。
新機能、おすすめ情報。
デザイン
レスポンシブ対応
固定させたい場合
右側の「手動」＞「幅を固定する」、
で固定させることが可能。
様々なものがあるときの場合。
顔の写真が離れてしまうことがある。
その時は、左からの距離を固定してあげることが可能。
大きさを変えるときにピンクの線が出てくるときがある。
動かすときにピンクの固定部分が出てくる。
めりこみをつくる
角丸はできるが、めり込みはできない。
めり込んだ形も今回で対応可能。
削る部分の四分の一円を、回転させて設置可能。
一気に角丸の部分を変化させることも可能になる。
吹き出しも一つ一つ調整していたが、
その部分も簡単に。
OFFにしたい時は、Shiftを押すと解除される。
レスポンシブに最適な形で調整済みのUIキットが出ている。
繰りっとを基本にして組まれているものがある。
リンクされたシンボル
ファイルをまたいで、コピーできるようになった。
これは、スタイルガイドをもとにしてアイテムを作成することを目指しているもので、
スタイルガイドが形がい化しない。
普通のシンボルと同じところ
シンボル内の文字を変更することが可能。
違うところ。
スタイルガイドを変更すると、全部に更新通知がいく。
変更して保存すると、クリップが青いクリップマークに変わる。
ちなみにスタイルガイドを複数持つようなやり方もできる。
親シンボルに対して、子シンボルを変更することはできない。
ローカルでちょっと試したいんだけど、という場合は、
アセット一覧で右クリック＞ローカルシンボルに変更することもできる。
まとめ
・コピペするだけ
・青くなったら反映するか決めよう
・赤くなったらリンク切れ。
プロトタイプ
アニメーション表現をアップさせる機能群
アニメーションは、二つのアートボードが必要。
二つのボードの違いをAdobeが自動認識して、アニメーションを起こす。
アニメーションを設定しているアイテムは、
アートボードからはみ出ていても、ボードに所属したまま。
オブジェクトの透明度を変更したい時は、
オブジェクトを選択して、数字入力。３だと30％、３４だと34％など。
ハンバーガーメニュー。
コマンド＋８でパスツールに変更する必要がある。
三角のもの、角をダブルクリックすると丸くなる。
上手く動作しない時。ウサギの場合。
青いポイント(開始点)を合わせて、ポイント数をそろえると、うまく動いたりする。
UIキット
Auto-Animate UI kit
ツイート参照。
このアニメーションはこうやって動かせばいいんだ、
ということがわかるのでおすすめ。
プラグイン
Risize Artboard to Fit Content
いちいちアートボードを作るのが面倒な時に。
コンテンツ量に合わせて、作ってくれる
VizzyCharts
チャートを作ってくれる
CSVファイルを用意。
リングチャートは、現状手入力のみ。
プラグインの注意点として、日本語入力をするとうまくいかないことがある。
Design Hunt Inspirations
適当に画像をはめ込んでくれるプラグイン。
Overflow
プロトタイプで見せたいとき、一枚絵にできるプラグイン。
画面遷移を説明したいときに便利
Google Sheets
スプレッドシートのデータをXDにはめ込んでくれるプラグイン。
共有リンク、必ず公開リンクを指定すること。
この時、レイヤ―名を同じしておくと、推薦してくれる。
リピートグリッドにも対応。
Repeat Grid
リピートグリッド
はじめてのAdobe XDプラグイン開発
2018/12/13 市ヶ谷でやっています。
今後の進化
User Voiceというページは活用しているだろうか。
書き込んで、投票が集まったものは開発チームにチェックされる。
例）三角形が作れないのはどうなっているんだ、とか。
For デザイナー、ディレクター
共同デザイン編集
バージョン管理
デザインシステム
For 開発者
コードの書き出し
For クライアント、エージェンシー
フィードバック
Tweetを追っていたら、XDロードマップが公式Trelloで公開中。
https://trello.com/b/WFKmCVaz/xd-extensibility-roadmap
Adobe XDユーザーグループ。
「Adobe XD Meeting」
思考の速度でデザインする。