Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma パスを描く

    パスを描く

    1. Figma
    2. 機能
    3. ツールバー
    4. ペン/鉛筆ツール
    eyecatch image

    概要

    ペンツールを使用して、任意の形の図形や線を描きます。 描くラインのことをパスと呼びます。 描く際に、クリックまたはドラッグで打った点のことをアンカーと呼びます。

    pen_image01.png

    方法

    【ペンツールのショートカット】

    Mac:P

    Win:P

    ペンツールを選びます。 クリックやドラッグでパスの形を決めていきます。

    pen_image02.png

    直線を描く

    開始点となるところをクリックし、角を作りたいところでクリックするという動作を繰り返します。 最後の点を開始点と同じ箇所で打つとパスで囲われた図形となり、塗りを設定することができます。 囲わずに終えたいときは、最後にクリックした箇所(終了点)から少し離した何もないところでCommand(Ctrl)を押しながらクリックします。

    pen_image03.png

    pen_image04.png

    曲線を描く

    パスが向かう方向(弧の盛り上がる方向など)に、ドラッグでポイントを作っていきます。 例えば山を描くときは、開始点を少し右斜め上に向かってドラッグで作ります。 山を上ったあとは終了点に向かって山は下るので、今度は少し右斜め下に向かってドラッグし、何もないところでCommand(Ctrl)キーを押しながらクリックし描画を終えます。

    pen_image05.png

    pen_image06.png

    pen_image07.png

    パスは線となるので、あとからデザインパネルの線プロパティで色や太さなどを変更することができます。

    author icon

    Designpedia Team

    2024年1月5日(金) 公開