XDで作るボタンエフェクト
こんにちは。Creative.Divでwebデザイナー兼コーダーをやっている滝口です。
今回は、シンプルなサイトでアクセントにしたい、ボタンのエフェクトを、XDで作ってみました。
photoshopやIllustratorと違い、XDだとよりリアルに近い動きをつけることがきます。
1. 線から塗りに変化するボタン
https://scrapbox.io/files/5fd6d6bc9b6af6001ceba18b.mp4
2. 線が消えたり現れたりするボタン
https://scrapbox.io/files/5fd6d6cc7356e70020b73c3a.mp4
3. 色が変化するボタン
https://scrapbox.io/files/5fd6d6d5bb1afa001c33003e.mp4
４. ふわっとしたシャドウのボタン
https://scrapbox.io/files/5fd6d6f0bb1afa001c330043.mp4
５. アイコンがアニメーションするボタン
https://scrapbox.io/files/5fd6d6fef9c776002226ac5b.mp4
一番最後のアニメーションボタン以外は、「ホバーステート」という機能を使ってパラパラ漫画のように2コマで作っています。
お気に入りのハートの部分は、自動アニメーションという機能で5コマほど使って表現しています。
急ぎの案件や提案など、いざという時にささっとアイディアが出せるように、
エフェクト集をストックしていきたいな〜と思っています。
（一緒にやってくれるデザイナー仲間求む！）
明日は牧野さんです！