Adobe XDについて
プロトタイピングツールの中では特に直感的な操作で、画面遷移のモックアップまで爆速で作れるソフトです。デザイナー、エンジニア問わず使って楽しくなるツールですので、アプリケーションを作られている方は是非一度使ってみられる事をオススメします！
以下AdobeXDをより便利に使えるTIPS集です。
ショートカット
便利なショートカット。Adobeのヘルプでほぼ全て確認できます。
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html
いい感じのシャドウの描き方
XDのシャドウはスプレッドの項目がないので、表現力に少し乏しい印象を持ちます。
そこで、ぼかしを使った方法で簡単に素敵なシャドウが作れます。
左側が通常のシャドウ、右側が今回作るシャドウです。
1. シャドウを付けたいオブジェクトをコピーします。サイズを調整し、最背面に移動します。この時に塗られている色がシャドウの色になります。もちろん後から変更可能です。
2. blurの項目でObject Blur を選択します。
3. 位置や色を調整して完成です。
ちなみに、CSSで書くとこんな感じです。
See the Pen Floating shadow effect by Kotato okuya (@kotar0) on CodePen.
#XDでの正三角形の書き方
1.四角形を描く。大きさや位置はキリのよい場所で
2. 補助線として2つの円を描く。左下と右下を中心として、半径が四角形の1辺となる円。
円の交点を作る。円の交点を囲む四角形を作成し、パスファインダフィルタで円の交点を作成する。
四角形の左上もしくは右上の頂点を削除する。(四角形をダブルクリックすると頂点編集モードになる。)
円の交点から始まる線を引く。交点の位置を記憶する。
今は三角形となった元四角形の頂点を、前の手順で記憶した頂点に合わせる。この時は手動で数値入力する。(頂点編集モードではうまくガイドが効かないため)
出来上がり！ イラレからコピペの方が早いですね！ｗｗ
