10
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

エンジニアにもデザイナーにも進めたいAdobe XDのちょっとした小技集

Last updated at Posted at 2018-02-28

Adobe XDについて

プロトタイピングツールの中では特に直感的な操作で、画面遷移のモックアップまで爆速で作れるソフトです。デザイナー、エンジニア問わず使って楽しくなるツールですので、アプリケーションを作られている方は是非一度使ってみられる事をオススメします!


以下AdobeXDをより便利に使えるTIPS集です。

ショートカット

便利なショートカット。Adobeのヘルプでほぼ全て確認できます。
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html

いい感じのシャドウの描き方

XDのシャドウはスプレッドの項目がないので、表現力に少し乏しい印象を持ちます。
そこで、ぼかしを使った方法で簡単に素敵なシャドウが作れます。
左側が通常のシャドウ、右側が今回作るシャドウです。

image.png

1. シャドウを付けたいオブジェクトをコピーします。サイズを調整し、最背面に移動します。この時に塗られている色がシャドウの色になります。もちろん後から変更可能です。

image.png

2. blurの項目でObject Blur を選択します。

image.png

3. 位置や色を調整して完成です。

image.png

ちなみに、CSSで書くとこんな感じです。

See the Pen Floating shadow effect by Kotato okuya (@kotar0) on CodePen.

XDでの正三角形の書き方

1.四角形を描く。大きさや位置はキリのよい場所で

image.png

2. 補助線として2つの円を描く。左下と右下を中心として、半径が四角形の1辺となる円。

image.png

円の交点を作る。円の交点を囲む四角形を作成し、パスファインダフィルタで円の交点を作成する。

image.png
image.png

四角形の左上もしくは右上の頂点を削除する。(四角形をダブルクリックすると頂点編集モードになる。)

image.png

円の交点から始まる線を引く。交点の位置を記憶する。

image.png

今は三角形となった元四角形の頂点を、前の手順で記憶した頂点に合わせる。この時は手動で数値入力する。(頂点編集モードではうまくガイドが効かないため)

image.png

出来上がり! イラレからコピペの方が早いですね!ww

image.png

10
18
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?