XDの業務使用と流行りのアニメーション紹介

Slide 1

Slide 1 text

Creators MeetUp AdobeXD LT会 #25 まんまるねこ＠Maru_Cat 素早くカッコイイアニメーション作れるXD最⾼〜業務のXD使⽤と流⾏りのXDアニメーション紹介〜

Slide 2

Slide 2 text

アジェンダ 1.⾃⼰紹介 2.業務使⽤におけるXDのTips 3.アニメーション紹介

Slide 3

Slide 3 text

⾃⼰紹介まんまるねこ＠Cat_Maru(まる) ・マネーフォワードケッサイプロダクトマネージャープロダクト開発の仕様決めたり、UXデザイン考えたり・過去：アプリUI/UXデザイナーやWebディレクター(何でも屋) Web、モバイルApp両⽅でXDを使⽤

Slide 4

Slide 4 text

2.業務使⽤におけるXDのTips

Slide 5

Slide 5 text

XDの強み 1. デザインイメージの共有 2. デザインカンプの作成 3. UIのプロトタイプコンペ案提出でカッコよく魅せる業務連携のしやすさ静⽌やちょっとしたアニメーションも表現しやすい素早く作れるのは⼤事！

Slide 6

Slide 6 text

XDのアンチパターン 1. ⽂字装飾やキラキラ効果の多いLP 2. Webコーディング⽤アニメーション作成 psd、aiファイルは効果が外れることが多いチームみんなで1つのデザインツール使いましょう。所感：Webから探したほうが早い！コードもあるので、エンジニアが真似しやすい。テキスト＋アニメーション指定もOK！

Slide 7

Slide 7 text

3.アニメーション紹介

Slide 8

Slide 8 text

3D変形(3D Transforms)の例⾃動モーションの例 Adobe公式サイト：https://letsxd.com/3d-transforms 2020年10⽉の新機能 XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF

Slide 9

Slide 9 text

CSS 3D Transform rotateでやる例： https://qiita.com/7968/items/eddfeb4b424d7c2d2d34#rotatex関数の記述 OOO（英語）＋Codingをつけるとやり⽅が出てきやすい。 Flip Cardも含めてよく使う効果が⾊々あるサイト： https://www.w3schools.com/howto/howto_css_ﬂip_card.asp Flip Design Coding, 3D Flip Card Codingで検索： https://www.youtube.com/watch?v=uGgRhKN5_Ao 3D変形-回転コーディング⽅法例： 3D変形の英語も3D Transformsなので原理が似ている

Slide 10

Slide 10 text

⾃動モーションの例 XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF