Figmaでは、図形（四角形・円など）だけでなく「ベクター」 と呼ばれる線やパス、鉛筆モードを使って、自由な形のデザインを作ることができます。矢印・吹き出し・チャートの線・位置ピン・アイコンなど、UIデザインで必要な図形のほとんどは ベクター編集 が基礎になっています。
1. ベクターとは？
ベクター（Vector）とは、点（ノード）と線（パス）を組み合わせて作る図形 のことです。
- 点（node / anchor）
- 線（path / segment）
- ハンドル（direction）で曲線を調整
- 線の太さや端の形を変えられる
- 拡大しても粗くならない（解像度に依存しない）
Illustratorのペンツールと似ていますが、FigmaはUIデザインに特化したシンプルな使い心地が特徴です。
2. ペンツールで三角形を描く
まずは ペンツールで三角形を描く基本操作 を練習します。ツールバーからペンツールを選択し、キャンバスを クリック → 次の点をクリック → もう1点クリックします。最初の点の上にカーソルを合わせてペンに○アイコンがついたらクリックで閉じます。この時点では 線の図形 扱いです。塗りはまだありません。
3. 曲げツールで直線を曲線に変える
最初から曲線を描くのは、ペンツール操作では若干難しいので、Figmaは、直線を描いてから曲線に変えることもできます。
- 三角形（パス）を選択
- ツールバーから曲げを選択、
- 線の上にマウスを合わせてドラッグするとハンドル（方向線）が出て曲線になる
- 戻す時は、点にマウスを合わせてoption（Alt）キーを押しながらクリックすると直線に戻る
4.図形からベクター操作
長方形や楕円や描いた後、図形をダブルクリックするとベクターモードに変わります。ベクター用のツールが出てくるので、点を移動させたり、曲げツールをクリックし、option（Alt）キーを押しながらクリックして直角に変更してみましょう。
5.ベクターのハサミで図形を切り離す
図形をダブルクリックし、ベクターモードのツールバーが出てきたら、ハサミを使って星を２つに分けてみましょう。ハサミツールをクリックし、真ん中あたりをドラッグします。通常の選択ツールに持ち変えて、図形を切り離してみましょう。
6.ペンツールでハートを描いて、ベクターで中を塗る
ペンツールでドラッグしながら描くと曲線が描けます。ハートを描いてみて、プロパティから色を入れても線の色になるので、ベクターツールの塗りで中の空いたところの色を入れることができます。
新しい機能 描くツール
Figmaの新しいツールに「描く」モードがあります。線のプロファイルなどもあり、さまざまなオブジェクトが描きやすくなっています。他にブラシ・鉛筆もありますので、試してみましょう。
