UI/UXデザインツール『Figma』入門

4-5. ペンツールと鉛筆ツールの使い方

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

Figmaのペンツールと鉛筆ツールは他のIllustratorやPhotoshopのものよりも使いやすい点があります。このレッスンでは、ペンツールと鉛筆ツールの使い方を解説します。

公開日:2019/08/21最終更新日:2021/08/19

1.ペンツールの使い方

ショートカットキー : P

ペンツールは、自由度の高いオブジェクトを作ることが出来るツールの一つです。これを利用することにより、UIのアイコンや複雑なオブジェクトを作ることが出来ます。

ペンツールを使うにはショートカットキー : Pを押すか、図1のツールバー右から3番目の万年筆のようなアイコンをクリックしましょう。

図1 ペンツール

Figmaのペンツールは、IllustratorやPhotoshopのペンツールと同じように、アンカーポイントを打つことでオブジェクトを作成していきます。

パスを始点と重ねて閉じるとクローズドパスが生成されます。重ねない場合は、enterを押すことでオープンパスが生成されます。

または、図2の「Done」を押すことで、パスの終了をすることが可能です。

図2 パスを終了(Done)

2.ペンツールの基本操作

ペンツールを使用してオブジェクトを描く、基本的な書き方は2つあります。

  • 直線=クリックで描く
  • 曲線=ドラッグで描く

描画の始点と終点を重ねると、ペンツールのカーソル右下に黒丸が表示されます。

これを確認して、クローズドパスを完成させましょう。

図3 クローズドパス生成方法

クリックで描く

図4のようにクリックをして位置をずらした場所でもう一度クリックすることで、2点間の直線を引くことが出来ます。このとき赤丸の中の点のことをアンカーポイントと言います。

次にShiftを押しながらクリックをすると、水平、垂直、45度の線を引くことが出来ます。

図4 クリックで描く

曲線を描く

曲線の描き方をマスターすることで、イメージした線を描けるようになります。
ドラッグした際に見える線がハンドルと言われる方向線を示すものです。方向線は角度や、長さによって曲線を変えることが出来ます。

  • 向き : カーブの方向を決める
  • 長さ : カーブの強さを決める
図5 曲線を描く

これを応用すると図6のように描く事ができます。

図6 曲線を描く応用

折れ曲線を描く

途中から角度が変わる曲線を描くには、方向線の角度を変える必要があります。

角度を変更するには、ハンドルをドラッグしながら指定の位置に持っていくことによって、図7のような谷型折れ曲線を描くことが出来ます。

図7 折れ線

直線から曲線

直線から曲線を描くには、図7ペンツールで上記直線を描いた後に、ドラッグを行うとハンドルが出てくるので、直線からの曲線を描くことが出来ます。

図8 直線から曲線を描く

曲線から直線

曲線から直線を描くには、曲線を描いた後に終点ポイントのアンカーポイントをクリックします。クリックすることで、方向線を消去することが可能です。

図9 曲線から直線を描く

方向線の切り替え(アンカーポイント切り替え)

ショートカットキー : Command

方向線を切り替えるには、「Bend Tool」という図10赤枠のツールを使用します。

図10 Bend Tool

使用することで、図11や図12のように方向線をなくしたり、方向線を付けたりすることが出来ます。

図11 Bend Tool使用例1
図12 Bend Tool使用例2

3.シェイプの形を編集する

レッスン2-2でシェイプを学んだと思います。この生成したシェイプを元にオブジェクトを編集する方法があります。

シェイプの形を編集するには、シェイプを選択後、図13ツールバー中央にある赤枠のオブジェクトを編集ツールを選択、またはシェイプをダブルクリックします。そうすると、シェイプにアンカーポイントが表示されるので、「Move」ツールでドラッグして動かすことで、図14のように図形の形を変形させることが出来ます。

※オープンパス、クローズドパスどちらも編集することが出来ます。

図13 オブジェクト編集モード

オブジェクト編集モードでオブジェクトの形を変形させる様子です。

図14 オブジェクト編集

また、アンカーポイントを選択した上でaltを推し続けると他のアンカーポイントとの間隔の数値が表示されます。

図15 オブジェクト編集

 

まとめ

ペンツールは、慣れるまでに時間がかかると思います。最初は様々な図形のトレースを行うなどの練習を積み重ねましょう。

4.ペイントバケット

ショートカットキー : B

Figmaには、ペイントバケットツールという機能があります。

ペイントバケットツールは、クローズドパスになっているオブジェクトのみ塗りつぶしを行うことができ、クリックで塗りつぶしか、塗りつぶさないかを選択することが可能です。また塗りつぶした面は、オブジェクト編集モードで変形させることも出来ます。

図16 Paint Bucket

ペイントバケットで色を塗る様子です。

図17 ペイントバケット

5.鉛筆ツールの使い方

ショートカットキー : Shift + P

鉛筆ツールはキャンバス上で、ドラッグすることによりフリーハンドパスを描くことが出来るツールです。

鉛筆ツールは図17のメニュー左から5番目のプルダウンメニューから選択することが出来ます。

図18 鉛筆ツール

鉛筆ツールを使用すると図18をようなオブジェクトを作ることが出来ます。
鉛筆ツールも同様に、始点と終点を結ぶことでクローズドパスを生成することが出来ます。

図19 鉛筆ツールの例

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者