第2章　Figmaの基本操作

第3節　画面各部の名称

この節では、Figmaの作業画面の各部名称について学習します。

第1項　画面各部の名称

この項の学習目標

デザインファイル画面の各部名称

デザインファイル画面の各部名称を確認します。
前節で作成した「練習.fig」を使用するか、デザインファイルが存在しない場合は新規デザインファイルを作成します。

ワークスペースの各部名称は以下のような構成です。
下記画像と現在操作を行っているFigmaの画面と比較を行ってみましょう。

① [メニュー]…デザインファイルの操作、オブジェクトの作成などができます。
② [左サイドバー]…レイヤー・アセットを表示します。ファイル内のオブジェクトやコンポーネントの一覧が表示されます。
③ [右サイドバー]…デザイン・プロトタイプの情報を表示します。

④ [キャンバス]…デザインを作成するスペースです。

この4つの名称は、今後作業を進めていくうちで何度も操作を行うため是非覚えましょう。

ツールバー各部の名称

更に細かく操作で使用するツールバーのボタンの名称を紹介します。
ボタンの名称に関しては全ての名称を一気に覚える必要はありません。

①サーチ／メニュー Figma上で行えるメニューを開きます。[クイックアクション]検索窓にキーワードを入力し、コマンドを呼び出すこともできます。
②移動／拡大縮小 デフォルトでは「移動」ツールが選択されており、オブジェクトの選択や移動ができます。「拡大縮小」ツールに変更すると、オブジェクトのサイズを拡大・縮小できます。
③フレーム／セクション／スライス デバイスや画面サイズに合わせたフレームなどを作成できます。
④シェイプツール 長方形、楕円、線などさまざまなシェイプを作成できます。
⑤ペン／鉛筆ツール ベジェ曲線を利用してパスを描画できます。鉛筆ツールでは、フリーハンドで描画できます。
⑥テキストツール テキスト入力ができます。
⑦リソース コンポーネント、プラグイン、ウィジェットを呼び出して使用できます。
⑧手のひらツール 表示画面を動かしたいときに使うツールです。
⑨コメントの追加 キャンバス上にコメントを追加できます。
⑩オブジェクトの編集 オブジェクト（図形）を編集できます（ツールはオブジェクトを選択中のみ表示される）。
⑪コンポーネントの作成 コンポーネントを作成できます（ツールはオブジェクトを選択中のみ表示される）。
⑫マスクとして使用 選択したオブジェクトに対してマスクを適用できます（ツールはオブジェクトを選択中のみ表示される）。
⑬アバター 作業中の人のアイコンが表示されます。
⑭共有 ファイルを共有できます。
⑮モード切替えトグル 開発モードとデザインモードを切替えます。
⑯プレゼンテーションを実行 プロトタイプを起動できます。
⑰ズーム／表示オプション キャンバスの拡大率を変更できます。

左サイドバーの各部名称

左サイドバーには「レイヤー」と「アセット」のタブがあります。
「レイヤー」タブでは、ファイル内のページ構成やキャンバス内のレイヤーを確認できます。
「アセット」タブでは、ファイル内のコンポーネントやライブラリにアクセスできます。

レイヤータブ

「ページパネル」では、ページを作成して管理が行えます。
ページの中には複数のレイヤーが存在し、目的や用途ごとにページを分割、また、ページ名も任意の名前をつけることが可能です。
「レイヤーパネル」では、作成したフレーム、シェイプなどが表示され、レイヤーの種類がアイコンでわかるようになっています。

アセットタブ

アセットタブでは、コンポーネントの一覧が表示されます。
コンポーネントとは、Figmaファイル、ページ間で共通で利用できるオブジェクトなどのパーツのことを指します。ボタンやヘッダーなど、よく使われるパーツをコンポーネントとして作成を行うと、様々な場所で繰り返し同じパーツを流用することができます。
※スタータープランでは、コンポーネントの公開はできません。

①検索バー コンポーネントを検索できます。
②表示切替 グリッドとリストの表示切替ができます。
③チームライブラリ チームライブラリを使用できます。
④ローカルコンポーネント 現在のファイルで作成されたコンポーネントが表示されます。

右サイドバーの各部名称

右サイドバーには「デザイン」と「プロトタイプ」のタブがあります。
編集権限によって表示されるタブは変わります。
デザインタブでは、選択したレイヤーによってさまざまなプロパティパネルが表示されます。
プロトタイプタブでは、プロトタイプの設定ができます。

確認ができたらファイルを閉じましょう。

ワンポイント

いきなりすべての機能や名称を覚える必要はありません。
Figmaの操作画面はシンプルにできています。そのため、実際に使用しながら用語を理解するとよいでしょう。
また、ボタンが見つからなくても右クリックで呼び出せる機能もあるので色々試してみましょう。

この項のまとめ

Figmaの各部名称

以上でこの節の学習は終了です。
次の節へ進んでください。