Figmaのパス周りの基本操作｜基本的な描画方法からペンツールと直線ツールの細かい違いまで

2021年11月10日 2021年11月23日

今回はFigmaのパス関連の操作についてまとめておきます。

パス描画系のツール

パス描画系のツールは下記の4つになります。

曲線にも対応したペン系ツールと、直線のみ作成できる直線系ツールの2分類で、ショートカットキーもそれぞれP（Pen）とL（Line）で、shiftを押すともう片方のツールに切り替えられるので、かなり覚えやすくなっています。

ペンツールは「アンカーポイント」と呼ばれる点をクリックして繋げていくことで直線が描けます。
Vを押して選択モードに切り替えたり、escを押すと途中で抜けられます。

クリックではなくドラッグをすると、アンカーポイントからハンドル（方向線）が出てきて、アンカーポイントを基点に曲線が描けます。

この線はベジェ曲線といって、フリーハンドではなくアンカーポイントと呼ばれる点を繋ぐことで図形を描画する方法です。
フリーハンドは描き方によっては線がガタガタになってしまいますがベジェ曲線ではキレイな線が引けます。

あとからの編集も簡単で、点を移動させたり調整することで微調整が効きやすいのが特徴です。

ちなみに、shiftを押しながらで縦横や斜め45度でアンカーポイントやハンドルが操作できます。
ハンドルに関してはoptionを押しながらドラッグすると、ハンドルの片方のみを操作できます。

ペンツールは開始点を最後にクリックして繋げると、線ではなく図形として「塗り（Fill）」の設定が反映されるようになります。
繋がっていない状態だと塗りを指定しても反映されないので注意が必要です。

鉛筆ツールはペンツールと違って、ドラッグでのみ利用可能なフリーハンドのツールです。

マウスを離したタイミングでガタガタになっている線は少しだけ補正してくれます。
これも、shiftを押しながらで縦横や斜め45度にキレイに線が引けます。

また、鉛筆ツールの場合は線で囲まれた場所は塗りの設定が反映されるようになります。

少しでも隙間が空いていると反映されないので注意が必要です。

直線ツールと矢印ツールの使い方はシンプルで、ドラッグすると線が引けます。
ペンツールや鉛筆ツールとは違って線を曲げることは不可能で、あくまで1本線引くことができるツールになっています。

shiftを押しながらドラッグすると縦横や斜め45度で線が引けます。

ちなみに矢印ツールの状態でクリックすると、長さ100pxのデフォルトの矢印が作成されます。

パスを選択していると、画面右のプロパティエリアの表示項目もパス用に切り替わります。

［Fill］プロパティではパスの塗りの色を設定します。
パスが閉じている状態でしか意味はなく、直線・矢印ツールでも指定はできますが無視されます。

色をクリックすると、別パネルが開いて色の指定ができます。

左上の「Solid」をクリックするとグラデーションや画像を塗りとして設定できたり、「バツボタン」の左隣にある「しずくアイコン」をクリックするとブレンドモードの変更ができます。

［Stroke］プロパティではパスのボーダー設定をします。

色の設定は［Fill］プロパティと同じですが、それに追加で「線の太さ」と「線の位置」と「矢印の種類」を指定します。

線の位置に関しては下記の3つから選択します。

矢印の種類は開始点と終了点それぞれに設定できます。

［Effects］プロパティではパスの特殊効果を設定します。


Inner shadow	パスの内側にシャドウをつける
Drop shadow	パスの外側にシャドウをつける
Layer blur	パスをぼかす
Background blur	塗りや線に透明度が設定されてある場合、その後ろの要素がぼけて表示される

それぞれ左についてあるアイコンをクリックすると詳細な設定画面が表示されます。