毎日1つはAdobe XD を使ってコンセプトデザインや自動アニメーションを使って何かしら作っているのですが、今回は流行りのSoft UI(Neumorphism)とホバーアクションを組み合わせたSNSボタンを作ってみました。Soft UIをつかったアプリケーションはいつ頃出始めるのでしょうかね?
今回はこのようなボタンを作ってみました。とてもシンプルな作りなので、3分もあれば作れます。では作り方をご紹介しますね。
下のホバーアクションを参考にしました。
See the Pen Stylish Social Buttons by Chris Deacy (@chrisdothtml) on CodePen.
作り方
ボタン
先ずはボタンですが、Soft UIを使ってデザインしています。前回Adobe XDでのSoft UIの作り方をまとめたのでそちらを御覧ください。数分で読み終わるので良かったらどうぞ。
まずは下のようなボタンをSoft UIを使って作ります。
アイコン
プラグインのIcon4Designを使って、FacebookやTwitter等のロゴをダウンロードします。
真ん中に白(#ffffff)で配置しましょう。
マスキング
ボタンが隠れるほどの図形を作成します。これがホバーした際に変わる背景色になるのでSNSのロゴに応じて色を変えておきましょう。
Facebookだと#3B5998、Twitterだと#1DA1F2ですね。
マスキングのやり方はこちらから
後はその上にボタンの図形を複製しマスキングします。その際にシャドウは要らないです。
アイコンを一番上に配置してひとまず下準備は完了です。
コンポーネント化
ボタン全体を選択してコンポーネント化します。
Command/Ctrl + K コンポーネント化
ホバーステート
コンポーネント化したらホバーステートの追加をしましょう。コンポーネントの欄の+をクリックすればホバーステートを追加できます。
初期ステートとホバーステートの編集
初期ステートとホバーステートの先程マスキングした要素の背景の位置を変更します。要素はレイヤーから選択するか、クリックし続ければ選択できます。
そしたら、背景の要素の角度を45度傾けて上のGIFのように初期ステートではボタンから離れた位置に配置します。
プロトタイプをいじらなくても完成しているので初期ステートを選択して、プレビューで確認してみてください。あとはプロトタイプでイージングやスピードを変えて自分好みの設定にしてみてください。
どうでしょうか?Adobe XDではこんなにも簡単にホバーアクションを作成することができます。前回にCSSでよく使われるホバーアクションをまとめているので、よかったら覗いてみてください。
https://13creativ.com/adobe-xd-hover-css/
ではまた!