ベクターネットワークは、ベクターパスで構成されるシェイプレイヤーです。これらのパスは、レイヤーのストロークや塗りプロパティを適用する場所を含む、そのシェイプをキャンバスでレンダリングする方法をFigmaに指示します。
多くのベクターツールでは、ベクターパスを一方向にしか描画できず、通常は元の開始点で終了します。ベクトルネットワークは、特定の方向を必要としない点が特徴です。別々のパスを作成したり組み合わせたりする必要なく、さまざまな方向に分岐する複数のパスを持つことができます。
ベクターネットワークを使用して、独自のシェイプ、詳細なアイコン、手の込んだイラストを作成しましょう。ペンツールを使用すると、独自のベクターネットワークをゼロから正確に作成できます。また、ベクター編集モードを使用して、基本シェイプや、ブラシツールや鉛筆ツールで描かれたベクターパスを含む任意のベクターレイヤーを修正し、ベクターネットワークを作成できます。ベクター編集モードに関する詳細はこちらをご覧ください。
注: この動画はFigmaの古いインターフェースを使用しています。新しいインターフェースの例については、この記事内の内容を参照してください。
ペンツールを使用してベクターネットワークを作成する
ペンツールを使用すると、キャンバスで点を正確に配置して、精密なベクターネットワークを作成できます。
以下の方法で、ペンツールを使用します。
- ツールバーでペンツールを選択するか、Pを押します。
- ベクターネットワークを開始したい場所にペンツールを配置してクリックし、最初の点を追加します。
- ペンツールの位置を調整し、クリックしての点とパスを継続して追加します。パスに曲線を追加するには、カーソルをクリックしてドラッグし、曲線の長さと曲がり具合を決定します。曲線ツールを使用して、ベジェハンドルが付いた曲線のパスを作成することもできます。
- 次のいずれかの操作を行って、パスを完成させます。
- パスを閉じるには、ペンツールをベクターネットワークの別の点に配置します。カーソルの横に小さな円が表示され、パスがその点で閉じることを示します。クリックしてパスを閉じます。
- パスを開いたままにするには、Escapeキーを押してベクターネットワークの選択を解除します。
作成後、ベクター編集モードを使用してベクターネットワークをさらに改良し、修正します。ベクター編集モードに関する詳細はこちらをご覧ください。
エンドポイントに端を追加する
開いたパスの終了点にスタイルを追加できます。Figmaは、選択したベクターパスの種類に応じて異なる場所に端プロパティを表示します。
2つのエンドポイントがあるベクトルパス
エンドポイントが2つしかないベクターパスが選択された場合、Figmaは右サイドバーに端プロパティを表示します。その他の各端点を個別に設定できます。
3つ以上のエンドポイントがあるベクトルパス
3つ以上のエンドポイントがあるベクターパスが選択された場合、Figmaは線の詳細設定に端プロパティを表示します。
ベクターパス全体が選択されている場合、端点を個別に編集することはできません。端点を個別に編集するには、ベクター編集モードで単一のベクターポイントを選択し、端タイプを調整します。
以下の6つの異なる端スタイルを選択できます。
- なし: パスの終点に端を追加しません。パスの端は四角で、パスには長さが追加されません。
- 線矢印: 終了点の両側に45度の線が2本追加されます。これはパス自体と同じ線の太さを使用します。矢印の先端線の長さは変更できません。
- 三角矢印: 両方の終了点が三角の矢じりになります。パスの片方の終了点にのみ矢印を適用するには、ベクター編集モードに入る必要があります。
- 逆三角形: 三角形の矢印を反転させたもので、矢印の先端はパスの内側を向いています。
- 円矢印: 円状の端です。
- ひし形矢印: ひし形の端です。
- 角丸（デフォルト）：線の半分の太さの端を追加し、パスの終了点を幅の50％に丸めます。
- 正方形: パスの終了点を直角にし、線の半分の太さの端を追加します。