#247 Adobe XDやろうぜ!すぐ使えるWebデザイン Tips – 松下絵梨
Adobe XDの自動アニメーション機能で簡単に作れるようになった動きのあるUIデザインの作り方を解説します。また、そのアニメーションをコーダーが実装する方法についても解説します。
ゲスト:松下絵梨
進化が止まらない!Adobe XDアニメーション機能
2018年10月のアップデートより実装の始まったAdobe XDアニメーション機能ですが、3ヶ月のうちにブラウザー共有も可能となりその表現力やパフォーマンスの進化が止まりません。
プロトタイプでアニメーション付けるのはいいんだけど、実装は?
アートボード間でオブジェクトのレイヤー名称を合わせるだけで多彩な表現が可能となる故、Adobe XD上でカンタンに色んな動きをプロトタイプに盛り込む事ができます。でも、果たしてこれは実装できるの?番組では、Adobe XD上で実現可能な自動アニメーションの例を紹介し、続いてこれをCSSアニメーションとしてDreamweaverを使って実装するという流れで紹介していきます。
番組の中で使用したデータ
- XD&コーディングデータ(ダウンロード期限:2019年2月末)
- スライド