【Adobe XD】意外と簡単にできるシンプルなパスを使った活用術5つ

操作画面左からペンのアイコンをしたペンツールを選びます。

フリーハンドでもクリックでパスを描けます。

ですが、Shiftを押しながらマウスを操作することでパスの角度が15°ずつ操作できます。

一度描いてしまったパスの曲線をハンドルを使って調節できます。

パスのポイントをクリックするとハンドルが表示されるので角度や位置を調節します。

直線でパスを描いてしまった場合はダブルクリックで曲線になります。

今回はこのフリー素材を使って、パスを切り抜きます。

対象の画像の上からペンツール（P）を使ってなぞります。

パスが画像の上に重なった状態で選択してください。

「シェイプでマスク」（Shift⌘M）を使って切り取ります。

パスを描きます。シェイプを配置しても大丈夫です。

描いたパスを選んだ状態で、アピアランス「線分」「間隔」の数値を変更します。

今回のパスは「線分：10」「間隔：10」で設定しています。

パスを描きます。

今回は長方形のシェイプパスで配置します。

アウトライン化をわかりやすくするためにパスを太めに設定しています。

長方形を選択した状態でアウトライン化します。

オブジェクト→パス→パスのアウトライン（⌥⌘O）を選んでください。

アウトライン化すると長方形のアウトライン化したレイヤーと長方形に分かれます。これでアウトライン完了です。

以下画像のようにレイヤーを並べています。

パソコン（レイヤー：画像3）の画像を2つ重ね、一つはマスクをかけたもの、もう一つは最背面に配置。

パソコンの画像を複製し、最平面に配置。

もう一枚の画像をパスでなぞり、「シェイプでマスク（Shift⌘M）」をします。

アニメーション時に動くグラデーションの背景を作成します。

マスクをかけた画像のひとつ下に長方形を配置。

透過度を0にし、アートボード上の端に配置しておきましょう。

円形のシェイプを配置し、線にチェックを入れます。線分と間隔の値を入力します。

今回はサイズ：4、線分：0、間隔：480にしています。

円の大きさにもよりますが下記画像のように円のパスが見えなくなったら完了です。

この円を複製し、サイズを変えてもう一つ配置します。

「OK」の文字が浮かび上がるようにパス化します。

テキスト入力後、オブジェクト→パス→パスに変換（⌘8）をクリック。

円形パスと同様に線にチェックを入れ、線分と間隔の値を変更します。

パスが見えなくなるまで値を変更します。

本記事ではサイズ：3、線分：0、間隔：340と設定しました。

自動アニメーションを設定する前に先程作成したアートボードを複製し、画像のように並べます。

先程アートボード端に配置した長方形をボードいっぱいに広げます。

円形のパスの線分の値を0から変更します。

本記事では線分：1050に設定します。パスが全て繋がって見える状態まで値を変更してください。

先程のアートボードを複製し、同様にアートボードを並べます。

背景を最初の初期配置とは反対側になるように移動させます。

その後、パス化したテキストの線分の値を下記画像のように変更しましょう。

プロトタイプは画面をクリックすると真ん中のボードに移行し、時間経過でボード最後尾まで自動アニメーションが動きます。

初期アートボード→トリガー「タップ」→2枚目アートボード→トリガー「時間」→3枚目アートボード

プロトタイプが設定したら完成です。お疲れさまでした。