![Figmaのベクターデータの編集のしかた](https://design-spice.com/wp/wp-content/uploads/2022/07/img_main-figma-vevtor-10-768x390.png)
Figmaのベクターデータの編集のしかた
Figmaのベクターネットワークについて詳しく調べてみたので、まとめました。
目次
ベクターネットワーク
Figmaでのベクターは、ベクターネットワークと呼ばれています。Adobe製品に代表されるような一般的なベクターパスとほぼ同じようなものですが、一部異なる部分があります。
主な違いは下記のようになります。
種類 | クローズパス | オープンパス |
一般的なベクターパス | 1つのパスのみ | 始点と終点が1:1 |
ベクターネットワーク | 複数のパスを持てる | 始点と終点が1:n |
![](https://design-spice.com/wp/wp-content/uploads/2022/07/0f8353dcb22cd309d8c600fecaae12b6.gif)
一般的なベクターパスに慣れていると戸惑う部分もありますが、理解すればさほど難しくはありません。
ここからはFigmaのベクターネットワークの使い方を案内します。
用語
使い方を説明するにあたり、用語を案内しておきます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/bf37dde92be5487bb9bb313fb8a1d827.png)
※ 当ブログ記事内での呼び方です。正確な名称と異なってる可能性もありますのでご了承ください
ベクター編集モード
ベクターネットワークはベクター編集モードで編集できます。
ベクター編集モードでは、個々のアンカーポイント、パス、またはシェイプ全体のプロパティを調整、変更することができます。
ベクター編集モードに入る
ベクター編集モードーには下記のいずれかの操作で入れます。
- パスを選択して
Enter
キーを押す - パスを選択して
edit object
アイコンをクリック - パスをダブルクリック
![](https://design-spice.com/wp/wp-content/uploads/2022/07/eab2bb33c2f4ded954d67f07bc70328f.png)
ベクター編集モードの終了
ベクター編集モードは下記のいずれかの操作で終了できます。
Enter
キーを押すesc
キーを押す- 編集中のシェイプの外側をダブルクリックする
- ツールバーの
done
ボタンをクリックする
![](https://design-spice.com/wp/wp-content/uploads/2022/07/34867873cc38e0c706bcaf9dab8a0909.png)
ベクターネットワークの編集
パスの作成
ペンツール
(ショートカット:Pキー)を選択します。
キャンバス上の任意の場所をクリックするとアンカーポイントが追加されます。そのままキャンバス上の別の場所をクリックすると、アンカーポイントとアンカーポイントを結ぶパスが作成されます。
アンカーポイントの上にマウスをホバーすると黒丸マークが表示されます。その状態でクリックするとクローズパスが作成されます。Shift
キーを押しながらだと45度刻みの角度でパスを引けます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/ea69e6a51b7d2a54911870967a58b55b.gif)
アンカーポイントを追加する際にクリックしたままドラッグするとベジェハンドルが表示され、曲線を調整しながらパスを作成できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/4235fbf4367a0cb798d705a455c4cd02.gif)
またこの時にOption
キーを押しながらドラッグするとベジェハンドルのミラーリングが解除され、ハンドルを別々に操作できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/398cd4e824ec938df08f692392019038.gif)
アンカーポイントの追加
ペンツール
の状態でカーソルをパス上に持ってくるとプラスマークが表示されます。その状態でクリックするとパスに新しいアンカーポイントが追加されます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/e1692a35a42dd123625cfaa90e47bba0-2.gif)
アンカーポイントからパスを作成する
ペンツール
の状態でパスを作成したいアンカーポイントにカーソルを持ってくると黒丸が表示されます。その状態でクリックするとそのアンカーポイントを起点にパスが引けます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/813ba764aad3e2c0557f9428c9c80fb5.gif)
なお、ベクターネットワークでは1つのアンカーポイントから複数のパスを作成できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/08/e58e91a42b019800151795af63b0bb91.gif)
アンカーポイントの削除
ペンツール
の状態でOption
キーを押しながらアンカーポイントの上にカーソルを持ってくると、マイナスマークが表示されます。その状態でクリックするとでアンカーポイントが削除されます。また、端点でなくパス上のアンカーポイントを削除した場合は、その前後のアンカーポイントをつなぐ形でパスが引き直されます。(オープンパスにはなりません)
![](https://design-spice.com/wp/wp-content/uploads/2022/07/f3c15e00a999f8da00dcc2fcda8e4a98.gif)
塗りつぶし
パスで囲まれたエリアは塗りつぶしができます。
塗りつぶしはバケツツール
(ショートカット:Bキー)を選択して、塗りつぶしたいエリアをクリックします。
また、別々の閉じた領域であれば、異なる色で塗りつぶすことができます。
塗りつぶされているところでは塗りつぶしツールにマイナスアイコンが表示され、この状態でクリックすると塗りつぶしが削除されます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/ad95580ca61e64880bc1ffd51fc9c389.gif)
ベジェカーブの操作
ベジェハンドルのポイントをクリック&ドラッグしてパスのカーブを調整できます。
通常ペジェハンドルは一方を操作するともう片方も同時に動きますが(ミラーリング)、ポイントをOption
キーを押しながらクリック&ドラッグするとハンドルを別々に操作できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/bc9b3df7240378bc35c2a2e35a29d91f.gif)
ミラーリングでなくなったハンドルは、ポイントをコマンド
キーを押しながらドラッグでミラーリングに戻することができます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/58d874bc3f3d9c4203ef61e8551f3975.gif)
ミラーリングにするかしないかは、右のプロパティパネルでも変更できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/mirror.png)
ハンドルのないコーナーの場合、ツールバーのBend tool
を選択した状態か、コマンド
キーを押しながらポイントをクリック&ドラッグすると、ハンドルが表示され、ミラーリングされたカーブが作成されます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/6e2fbf4915a58cdc1f0b639bd95b9248.gif)
ハンドルを無くしたい場合は、Bend tool
を選択した状態か、コマンド
キーを押した状態でアンカーポイントをクリックするとなくなります。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/c96dafe34ef978125f917d228375558a.gif)
Bend tool
を選択した状態でパスをドラッグするとカーブを調整できます。選択ツール
の時はパス上でコマンド
キーを押しながらドラッグで同様の操作が行えます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/557134237930da3bec2b3450b38d607f.gif)
角丸
パス上のコーナーは、右サイドバーの角丸プロパティで丸めることができます。パス全体を選択すると、すべてのコーナーが同じ程度に丸められます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/98e3d45a50da6e85c02b2fb00860503d.gif)
個々の点を選択した状態で角丸の設定をすると、個別に角丸の大きさを設定できます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/f09c27a0fff786949a123dc3cbeba8c8.gif)
キャップ(端点のスタイル)
開いているパスの終点にスタイリングを追加できます。選択したベクターの種類によって、キャップの設定が変わります。
2つの端点を持つベクター
端点が2つしかないベクターを選択すると、右サイドバーにキャップのプロパティが表示されます。それぞれのキャップを独立して設定することができます。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/cap-1.png)
2つ以上の端点を持つベクター
端点が2つ以上あるベクターを選択した場合、ストロークの詳細メニューにキャッププロパティを表示します。
ベクターパス全体が選択されている場合は、キャップを単独で編集することはできません。終点のキャップを独立して編集するには、ベクター編集モードの状態でポイントを1つずつ選択して設定します。
![](https://design-spice.com/wp/wp-content/uploads/2022/07/45b2d0318730618d2f6d954cbd27717e.gif)
その他Tips
その他、知ってると便利なTipsをざっと紹介します。
ペンツール
やバケツツール
でコマンドキー
を押してる間はBend tool
になります- アンカーポイント選択してから
delete
キーでアンカーポイントが削除され、オープンパスになります shft + delete
だとオープンパスにはならず、両側のアンカーポイントを繋ぐ形でパスが引かれます選択ツール
でshift
キーを押しながらクリックするとアンカーポイントを複数選択できます選択ツール
でドラッグすると、その範囲内にあるアンカーポイントが全て選択されます- 複数アンカーポイントを選択した状態で整列ができます
- アンカーポイントを選択した状態で
Option+ドラッグ
でアンカーポイント複製できます
![](https://design-spice.com/wp/wp-content/uploads/2022/07/2e9aff887a549623e854c4cad9d244f6.gif)
![](https://design-spice.com/wp/wp-content/uploads/2022/07/ffc4fba8b9fe5f1baed195b1c94df9b3.gif)
終わりに
私がそうだったのですが、Adobe製品などでいわゆるベクターパスに慣れてる方には、1つのアンカーポイントから複数のパスが引ける点などは最初は戸惑う点だと思います。それもあり今回詳しく調べたのですが、仕様を理解すると難しいことではないですし、逆に使いやすいと思う点もあるので、本記事が今後Figmaのベクターを使っていく方の一助になると幸いです。
Comment
コメント(2)
匿名
hiro
コメントする
Trackback(0)