ウェブ制作
運用ノウハウ
Figmaの図形ツールの基本操作から編集・カスタム方法まで
今回はFigmaの図形ツールの基本操作をはじめ、図形の編集・カスタム方法をご紹介していきます。
Figmaの図形ツール（シェイプツール）のラインナップ
Fgimaの図形ツールには次の6つが用意されています。
- 長方形ツール
- 直線ツール
- 矢印ツール
- 楕円ツール
- 多角形ツール
- スターツール
- 画像配置ツール
内容：長方形の作成ができる
ショートカットキー：R
内容：直線を引くことができる
ショートカットキー：L
内容：矢印を引くことができる
ショートカットキー：shift+L
内容：楕円の作成ができる
ショートカットキー：O
内容：多角形の作成ができる
ショートカットキー：なし
内容：星形の作成ができる
ショートカットキー：なし
内容：ファイルから指定した画像を配置できる
ショートカットキー：ctrl+shift+K
Figmaの図形ツール（シェイプツール）の使い方
ここからは各図形ツールの操作方法の基本をまとめていきます。
まず、画面左上のツールバーから図形ツールをドラッグし、作成したい図形を選択しましょう。
デフォルトは長方形になっています。図形ツールの右の矢印アイコンをクリックすることで他の図形を選択することができます。
ここからはデフォルトの長方形で説明していきます。
フレーム上をドラッグアンドドロップすると、長方形が作られて、マウスを離したタイミングで選択ツールに自動で切り替わります。
図形編集の基本
shiftを押しながらドラッグアンドドロップすると、縦横の比率が変わらないまま図形を描画できて、正方形が作れます。
alt（Macの場合：option）を押しながらドラッグアンドドロップすると、ドラッグ開始位置を中心として図形を描画できます。
shiftとalt（option）の併用で、ドラッグ開始位置を中心にして正方形描画も可能です。
他にも図形描画途中でマウスを外さずにspaceを押すと、押している間は描画中の図形を移動できます。
選択ツールで図形の縦・横・斜めの端をドラッグするとカーソルが矢印の形に切り替わり、それぞれの方向に図形のサイズを変更できます。
このときもshiftを押しながらで比率を変えずに変形、alt（option）を押しながらで中央を中心に変形できます。
また、斜め端の図形の少し外側にカーソルを持って行くと、カーソルが湾曲した矢印の形に切り替わり、この状態でドラッグすると図形の回転ができます。
このときshiftを押しながら操作すると15度刻みでの回転が可能です。
図形ごとの編集機能
作成した図形ごとに選択ツールで選択できる操作に違いがあります。
長方形の編集
長方形の場合は、四隅にある白い丸をドラッグして角丸にできます。
長方形のアスペクト比と「角丸」を上手く調整することで円を作成することもできます。
楕円の編集
楕円を選択すると、図形右側に白い丸が表示されます。
これを上下にドラッグすると、楕円が途中で割れたような見た目にできます。
白い丸の数も増えて、「開始位置」「終了位置」「塗りの割合」をドラッグで設定できます。
これらを調整することで扇形やドーナツ型の図形を作成することができます。
多角形の編集
多角形にも白い丸があり、それぞれ「角丸」と「角の数」を調整できます。
角の数は、上下にドラッグすることで角数が増減され、三角形や四角形、五角形など「角の数」は3から60まで選択することができます。
多角形のアスペクト比と「角丸」「角の数」を上手く調整することで円を作成することもできます。
スターの編集
スターの白い丸はそれぞれ「角丸」「角の数」「塗りの割合」が設定できます。
角の数に関しては多角形ツールと同じで上下にドラッグで角数の増減ができ、「角の数」は3から60まで選択することができます。
スターのアスペクト比と「角丸」「角の数」「塗りの割合」を上手く調整することで円を作成することもできます。
図形選択時のプロパティエリア
図形を選択していると、画面右のプロパティエリアの表示項目も図形用に切り替わります。
図形情報
右上に図形情報が数値で表示されます。
Fill
［Fill］プロパティでは図形の色を設定します。
Stroke
［Stroke］プロパティでは図形のボーダー設定をします。
［Stroke］プロパティ
色の設定は［Fill］プロパティと同じですが、それに追加で「線の太さ」と「線の位置」を指定します。
線の位置に関しては下記の3つから選択します。
Outside：図形の外側に線がつく
Inside：図形の内側に線がつく
Center：図形の中央に線がつく
Effects
［Effects］プロパティでは図形の特殊効果を設定します。
Inner shadow 図形の内側にシャドウをつける
Drop shadow 図形の外側にシャドウをつける
Layer blur 図形をぼかす
Background blur 塗りや線に透明度が設定されてある場合、その後ろの要素がぼけて表示される
それぞれ左についてあるアイコンをクリックすると詳細な設定画面が表示されます。
