Figmaの図形周りの基本操作｜図形の作成方法から細かい設定項目まで

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

図形描画系のツール

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

直線ツールと矢印ツールは、ツールバーの同じカテゴリ内に入れられていますが、性質がパスに近いので今回は省きます。

図形描画の基本

まずは長方形ツールに切り替えましょう。
切り替えた状態でフレーム上をドラッグアンドドロップすると、長方形が作られて、マウスを離したタイミングで選択ツールに自動で切り替わります。

shiftを押しながらドラッグアンドドロップすると、縦横の比率が変わらないまま図形を描画できて、正方形が作れます。

optionを押しながらドラッグアンドドロップすると、ドラッグ開始位置を中心として図形を描画できます（shiftとoptionの併用で、ドラッグ開始位置を中心にして正方形描画も可能です）。

他にも図形描画途中でマウスを外さずにspaceを押すと、押している間は描画中の図形を移動できます。

図形編集の基本

選択ツールで図形の縦・横・斜めの端をドラッグすると、それぞれの方向に図形のサイズを変更できます。
このときもshiftを押しながらで比率を変えずに変形、optionを押しながらで中央を中心に変形できます。

また、斜め端の図形の少し外側にカーソルを持って行くと、カーソルが丸いアイコンに切り替わります。
この状態でドラッグすると図形の回転ができます。

ちなみにこのときshiftを押しながらで、15度刻みで回転ができます。

クリックで描画される図形

描画系ツールに切り替えて、ドラッグではなくクリックをすると、一瞬でデフォルトの図形が描画されます。

ちなみに、図形からは省きましたが矢印ツールもクリックでデフォルトの矢印が作成されます。
作成されるデフォルト図形の情報は下記の通りです。

図形ごとの特徴

選択ツールで選択したときにできる挙動が図形毎に少し違います。

長方形

長方形の場合は、四隅にある白い丸をドラッグして角丸にできます。

楕円

楕円を選択すると、図形右側に白い丸が表示されます。

これを上下にドラッグすると、楕円が途中で割れたような見た目にできます。
白い丸の数も増えて、「開始位置」「終了位置」「塗りの割合」をドラッグで設定できます。

これらをうまく調整することで、下の画像のようなドーナツグラフを簡単に作れます。

多角形

多角形にも白い丸があり、それぞれ「角丸」と「角の数」を調整できます。

角の数は、上下にドラッグすることで角数が増減され、三角形から四角形や五角形に変更できます。

スター

スターの白い丸はそれぞれ「角丸」「角の数」「塗りの割合」が設定できます。

角の数に関しては多角形ツールと同じで上下にドラッグで角数の増減ができます。

図形選択時のプロパティエリア

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

図形情報

右上に図形情報が数値で表示されます。

Fill

［Fill］プロパティでは図形の色を設定します。

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

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

Stroke

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

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

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

• Outside：図形の外側に線がつく
• Inside：図形の内側に線がつく
• Center：図形の中央に線がつく

Effects

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

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