Adobe MAX 2021で使用したプロトタイプ配布

「S915 - Adobe XDでここまでできるマイクロインタラクションの表現」のセッションで使用したプロトタイプを配布します。
※フォントはBarlowを使用しています。

DL_max2021.xd

17076215 Bytes

ファイルダウンロードについて

ダウンロード

Adobe XDの登場により、デザイナーは簡単にウェブサイトやアプリケーションプロトタイプを作成できるようになりました。マイクロインタラクションの表現にこだわれば、これらのプロトタイプをより完成度の高いものにできます。
XDの標準プロトタイプ機能だけでも十分にマイクロインタラクションを表現することができますが、その他の機能と組み合わせることで、さらに細かい表現を実現できます。そこで本セッションでは、いくつかのデモを通じてマイクロインタラクションの表現力を高めるヒントを紹介します。
・マスクや破線を使ったアニメーション
・変形とディゾルブを組み合わせたホバーアニメーション
・アートボードのオーバーレイを使わないリッチなハンバーガーメニュー
・ステートを使ったパスワード入力

High-Quality Micro-interaction Expressions Using Adobe XD - S915

Adobe XD enables designers to easily create website and application prototypes. If you pay particular attention to the expressions of micro-interactions, you can make higher quality prototypes. While you can sufficiently express micro-interactions using only the standard prototype functions in XD, combining them with other functions allows for even finer expressions. This session uses several demos to introduce hints for increasing your micro-interaction expressiveness.
Topics covered include:
・Animations using masks and dashed lines
・Hover animations using both transformations and dissolving
・Rich hamburger menu without using the art board overlay
・Password input using states

参照：https://www.adobe.com/max/2021/sessions/highquality-microinteraction-expressions-using-ado-s915.html