使用頻度高！最初に把握したいFigmaの3ツールと基本操作

• レッスンの内容
• 1. フレームツール
• そもそもFigmaのフレームとは？
• フレームツールの基本
• 2.移動ツール
• 3. シェイプツール(描画ツール)類
• シェイプツールの種類
• シェイプツールの使い方
• カードにシェイプを追加する

レッスンの内容

ここからのレッスンでは、Figmaの使い方・基本的なツールと機能を学びながら、下図のカードデザインを作っていきます。

こうしたカードデザインはWebサイトだと、特集や記事を並べるときなどによく使われますね。

上図デザインの場合、カードデザイン部分が作れたら、背景や見出しの設定は楽勝でできちゃいます。
今回のレッスンでは、まずこのカードの“枠組み”を作るのにも使う、3つの基本的なツールを見ていきましょう。

1. フレームツール
2. 移動ツール
3. シェイプツール類

1. フレームツール

Figmaを使う上で欠かせないのが、フレームツールです。
ショートカットキーはFrameのFです。

そもそもFigmaのフレームとは？

前のレッスンで、フレームツールではAdobe製品でいう“アートボード”を作れることをご紹介しました。
しかし、Figmaのフレームツールはアートボードツールよりも汎用性が高い存在。デザイン制作でも多く使います。

Figmaではフレームについて、以下のように説明しています。

フレームとは、Figmaの主要なビルディングブロックです。フレームは、シェイプ、テキストや画像などのデザイン要素を保存するコンテナです。フレームを使用して、キャンバス上のデザイン要素を整理して構造化します。

引用元：基本的なワイヤーフレームとプロトタイプの作成 – Figma Learn

もっと簡単に言うなら、Figmaのフレームはグループ化の一種、グループの上位互換版のような存在です。
HTMLコーディングの観点から見ると、bodyタグや、レイアウトのためのコンテナ（親要素）。

レイアウトを組む、グルーピングにも使うため、フレームツールは使用頻度が多いのです。

フレームツールの基本

概念を文字だけで見てもわかりにくいので、実際に使ってみましょう。

フレームツールを持った状態で、キャンバス上でドラッグして下さい。
適当な大きさの長方形を作ります。

作成したフレームを選択すると、右サイドバー（デザインタブ）の表示が変わります。

デザインタブ上部では、整列や位置・大きさなどが設定できます。
幅や高さを決まったサイズにしたいときは、WとHで直に数字を打つことも可能です。

それぞれのアイコンは、上にマウスカーソルを乗せて少し待つと、名前が出てきます。
よくわからない項目（アイコン）があれば、マウスカーソルを乗せて確認して下さい。

右サイドバーの下の方には、塗り、線、エフェクトという項目があります。
シェイプやテキストなどと同じように、フレームもそれ自体にスタイルをつけることが出来るわけです。

塗りではフレーム全体の塗り色を、線は境界線の色や太さ、エフェクトでは影やぼかしといった効果を加えることができます。
それぞれプラス（）アイコンで追加、マイナス（）アイコンで削除ができます。

今回作りたいカードデザインは、枠線は要らないので線はなし。
ドロップシャドウを以下のように設定しました。

このフレームはカードデザインである、とわかるように名前を変えておきましょう。
レイヤーパネルでも、キャンバス上でも、フレーム名をクリックすると打ち替えられます。

2.移動ツール

ツールの左端、ポインターのような表示は“移動ツール”です。
Adobe製品でいう選択ツールと同じようなものです。

名称は“移動”ですが、キャンバス上のアイテムを選択したり、拡大縮小・回転させることもできます。
既にキャンバス上にあるテキストであれば、移動ツールでダブルクリックすれば打ち替えもできます。

既存のアイテムに変更を加える場合は、基本的に、移動ツールで選択をして行います。
デザイン制作をしていく中で、最も利用頻度の高いツールと言っても良いでしょう。

Figmaでは別のツールで描画などの操作をしても、その操作が終わると、自動的に移動ツール選択状態に切り替わります。
先程フレームを作成したときも、何もしなくても勝手に移動ツール選択状態に戻っていましたよね。
これは次に使うシェイプツールや、テキストツールの場合も同様です。

自動的に切り替わってくれて便利、と思うか否かは人次第かもしれません。

3. シェイプツール(描画ツール)類

シェイプツールの種類

シェイプツールの中には、長方形ツールや直線ツールなどいくつかのツールが隠れています。
下矢印（）から展開して、描画したい形のツールを選んで使いましょう。

特に、1キーで持ち替えができるようになっている長方形（R）・直線（L）・楕円（O）の3つはよく使います。
最初からショートカットキーを使うようにすると、効率よく作業できます。

シェイプツールの右隣りにある“作成ツール”は、ベクターオブジェクトを自分で描画したい時に使います。
作成ツールは、人によって使う・使わないが分かれるので、ある程度操作に慣れてから使ってみるのがオススメです。

シェイプツールの使い方

ツールバーから描画したい形状のツールを選択、もしくはショートカットキーでツールを持ち替えます。
そして、キャンバス上でドラッグして、好きな大きさのとろこで離せばシェイプが追加されます。

せっかくなので、作成したフレームの上で描画してみましょう。

数値で入力したほうが良い場合は、右側デザインタブのW,Hで設定してもOKです。

もう一つシェイプを追加してみる

もう一つ、シェイプを追加してみましょう。
今度は、フレームの外側、薄灰色のカンバス上に描画します。

Shiftキーを押した状態でドラッグすると縦横の大きさが同じになります。
正方形・正円などを書きたい場合に便利です。

ちなみに、縦横比の概念がない直線ツールと矢印ツールの場合。
Shiftキーを押しながらドラッグすると、角度（回転）が45°刻みのみになります。
まっすぐに引いているつもりなのに微妙に斜め…という状況にならないよう、活用して下さい。

長方形や楕円シェイプでも、Shiftキーを押しながら回転すると、45°刻みに出来ます。

フレームの役割と恩恵をチェック

フレームの内と外、２つのシェイプを追加しました。
レイヤーパネルで見ると、フレーム内に描画したシェイプは子要素＝cardフレームの中身として、自動的に配置されていることがわかります。

フレームの子要素として設定しておくと、シェイプの配置が楽です。
キャンバス上に描画したシェイプは、整列が使えず、X,Y座標もわかりにくいですよね。

cardフレーム中にあるシェイプは、整列が使えます。
X,Y座標も、フレームの左上が基準（0）になっているので分かりやすいです。

フレームの横方向中央に置きたければ、中央揃えをポチッと。
上を10pxあけたければ、Yのところに10と打てば良いです。楽ですね。

カードにシェイプを追加する

cardフレームの一番上、サムネイル画像が入るところの四角は出来ました。
楕円ツールと星ツールで、デザインで“画像・図形”が入るところをざっくりと作ります。
ワイヤーフレームでも使われる「ここは画像入れる予定ですよ」という表示を作ってみるイメージです。

星を描画する

星ツールを持った状態でフレーム上をクリックすると、100×100の★が描画されます。

キャンバス上で細々作業するのは大変なので、デザインタブで設定しちゃいましょう。

• 縦横比を固定 にする
• サイズを16 × 16にする
• Xを10にする（上の長方形と左端を合わせる）
• 塗りをオレンジ色（#F15A24）にする

縦方向の位置（Y）は文字を入れて調整するので、とりあえず見える場所にあれば大丈夫です。

一つオレンジ色の★が出来たら、『移動した場所に複製』しましょう。
星のシェイプを選択した状態で、Windowsの方はAlt、Macの方はOptionキーを押しながらドラッグ。
星が複製され、２つになっていらた成功です。

次に、以下のショートカットキーで『同じ作業の繰り返し』を行います。

• Windows :Ctrl + D
• Mac OS :⌘ + D

直前の作業が繰り返され、星が3つになったら完了です。

写真を入れる正円を作る

Oキーで楕円形ツールに持ち替え、左下の丸を作ります。
星を作ったときと同じように、だいだいの大きさ・位置を設定し、配置しておきましょう。

円のサイズは26 × 26にしてみました。
正円であれば、サイズはなんでも良いです。

作成したシェイプの整理

確認用に作った、フレーム外の長方形シェイプは要らないので削除。

星3つは、位置（3つの並び）がズレてしまわないようにグループ化しておきましょう。
ショートカットキーはWindowsの方はCtrl＋G、Macの方は⌘＋Gです。
右クリックメニューから操作・ショートカットキーの確認もできます。

ここまででcardフレームの中身は、以下のようになりました。

次回のレッスンで画像とテキストを入れ、カードデザインを完成させます。