Figmaの描き方：鉛筆ツールとベクターポイントT

Figmaプロトタイプで使用するロゴ、ボタン、アイコン、イラストを作成する必要がありますか？FigmaとIllustratorやSketchのような他のアプリを行ったり来たりするよりも、Figmaに内蔵されているイラストレーション・ツールを試してみましょう。鉛筆ツールを使ったフリーハンドのスケッチから、ペンツールを使ったベクター線や図形の作成まで、Figmaでの描画の基本をお教えします。

方法1

フリーハンドで描く (鉛筆)

1. Figmaプロジェクトに新しいフレームを作成します。これは、プロジェクトを開いた状態で F キーを押すことでできます。

   • Figmaを初めて使う場合は、まずアカウントを作成し、インターフェイスを.NETに移行することから始めましょう。
2. 鉛筆ツールを起動するには、⇧ Shift+Pを押します。鉛筆ツールを使うと、フリーハンドでスケッチできるので、完璧なスケールの図形が必要ない場合に最適です。

   • 上部のペンメニューをクリックして鉛筆アイコンを選択しても鉛筆を選択できます。
3. 鉛筆のプロパティを選択します。暗い背景で作業している場合を除き、デフォルトの鉛筆設定は3pxの黒丸ストロークです。 ストロークを変更するには：

   • Figmaの右側にあるデザイン・パネルのストローク・エリアを探します。
   • 色のついた四角をクリックして、色を選択します。キャンバスにすでにある色を選びたい場合は、カラー・ピッカーの下にあるスポイト・ツールをクリックし、希望の色をクリックします。
   • デフォルトでは、不透明度は100%に設定されています。より不透明度の低い色で描画するには、パーセンテージを変更して不透明度を下げることができます。
   • 3本の水平線のアイコンと数字の「3」は、線のサイズをピクセルで表しています。このアイコンをクリックすると、ピクセルサイズが増減します。
   • 鉛筆の形状を変更するには、3つのオプションから1つを選択します。
   • 実線ではなく破線で描画したい場合は、3つの点をクリックして「詳細ストローク」メニューを開き、「ダッシュ」または「カスタム」を選択します。
4. マウスをクリックしてドラッグして描画します。鉛筆ツールは、他のツールを選ぶかEscキーを押すまでアクティブのままです。

   • 最後のストロークを元に戻したい場合は、Cmd + Z（Mac）またはCtrl + Z（PC）を押します。
   • 直線を描くには、Shiftキーを押しながらカーソルをドラッグします。
   • 各ストロークは、現在のフレームに新しいレイヤーを作成します。すべてのレイヤーは、ワークスペースの左側にあるレイヤーパネルで見ることができます。
5. あなたのドローイングの一部を消去します。他の多くのイラストレーション・アプリとは異なり、Figmaには消しゴムツールがありません。線やイラストの一部を消すには

   • キーボードのVを押します。
   • 削除したいストロークをクリックするか、レイヤーパネルのレイヤ名をクリックします。
   • 一度に複数のストロークを選択するには、Shift キーを押しながら各ストロークをクリックします。
   • 選択した線を消すにはDeleteキーを押します。
6. 描画のスケールを変更します。あなたのイラストのサイズを変更したい場合は、簡単にそうすることができます：

   • サイズを変更したいレイヤーを選択します。選択範囲の周囲にバウンディング・ボックスが表示されます。
   • 図面の角をドラッグして、大きくしたり小さくしたりします。

方法2

ベクトルポイント描画 (ペン)

1. Figmaプロジェクトに新しいフレームを作成します。これを行うには、プロジェクトを開いた状態で F を押します。
2. P を押して、ペン・ツールをアクティブにします。ペンツールは、他のアプリのペンツールとほとんど同じで、フリーハンドで描くのではなく、ベクターポイントをつなげて線を作ります。
3. 描画を開始したい場所をクリックします。これにより、その場所にベクターポイントが配置されます。
4. 線の終点にマウスを移動し、もう一度クリックします。これで2つ目のベクトル点が置かれ、2点間に直線ができます。
5. 別のベクトル点を配置するときは ⇧ Shift キーを押したままにします。このキーを押し続けると、45度の軸に沿った線ができます。
6. ベジェハンドルを使って曲線を作る。曲線の線を作るには、ベクトル点をクリックしたまま、曲線の方向にマウスカーソルを動かします。その線分を終えたいところでもう一度クリックする。

   • ベジェハンドル（曲線から突き出た青い細い線）をドラッグして、任意の方向に曲線の形を変えることができます。
   • 直線を曲線に変えるのも簡単です。曲線にしたい線をクリックし、リターンキーを押すかエンターキーを押します。次に、曲げツール（両端に丸が付いた曲線のように見えます）をクリックし、曲げたい線の上にマウスカーソルを置いて、希望の方向にドラッグします。
   • 曲線の作成はちょっと難しいので、Figmaでは、このプロセスをマスターするのに役立つ無料のゲームで試してみることをお勧めします：
7. 元の点をクリックして、ベクター・パスを閉じます。元の点をクリックして、ベクター・パスを閉じます。これで、描画が1つのベクター・イメージになり、どのようにでも操作できるようになります。
8. デザインを色で塗りつぶす。これがその方法です：

   • ベクトル図面を選択します。
   • ReturnまたはEnterキーを押します。
   • Bキーを押してペイントバケツツールを開きます。
   • デザインの内側をクリックして、デフォルトのグレーで塗りつぶします。
   • デザイン・パネルで、Figma の右側にある「塗りつぶし」エリアを探します。
   • デザインを塗りつぶしたい色を選択すると、すぐに塗りつぶされます。
9. 線の色を変更します。線の色は、デフォルトでは黒ですが、簡単に変更できます：

   • 線やオブジェクトを描いたら、それをクリックして選択し、リターンキーを押すかエンターキーを押します。
   • デザインパネルで "ストローク "エリアを見つけ、色（デフォルトでは黒）をクリックします。
   • 希望の色をクリックすると、選択した図面の色が自動的に変更されます。
10. 図面の縮尺を変更します。イラストのサイズを変更したい場合は、簡単にできます：

    • サイズを変更したいレイヤーを選択します。選択範囲の周囲にバウンディング・ボックスが表示されます。
    • 図面の角をドラッグして大きくしたり小さくしたりします。

この記事は、" How to Draw in Figma： この記事は、CC BY-NC-SAの下で公開されている "How to Draw in Figma: Pencil Tool & Vector Point Tutorial "を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。