[Figma] [Figma] 07 Figmaのインターフェイスの解説 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

「Figma」でデザイン制作を行う際に作業場となるインターフェイスをブラウザ版のスクリーンショットと共に解説します。
まずは以下のリンクからFigmaへログインしておきましょう。

Figma

この記事の目次

1 インターフェイスの解説

インターフェイスの解説

インターフェイス(全体)

まず、Figmaで新規デザインファイルや既存のファイルを開くと以下の画面が開きます。

インターフェイス(全体)
記号	名称	機能など
A	ナビゲーションパネル	デザインファイルやホーム画面へのアクセス、レイヤーの管理、アセットの表示など、デザイン作業に必要な機能がある。
B	プロパティパネル	選択したオブジェクトやレイヤーなどの様々なプロパティを調整するためのパネルで、選択したオブジェクトで内容が変化する。
C	ツールバー	デザインを作成する際に使用する様々なツールや機能が配置されいる。
D	キャンバス	デザインを作成するスペース。

インターフェイス(ナビゲーションパネル)

次に画面左側に位置するナビゲーションパネルを見てみましょう。
主な役割は、デザインファイル全体や、ファイルを構成しているページやレイヤーやオブジェクトの一覧です。

インターフェイス(Aナビゲーションパネル)
記号	名称	機能など
A-1	メインメニュー	Adobe系アプリでいうメニューバーの役割を持つ。またプロパティパネルと同じように各種値の調整を行うことができる。
A-2	UIを最小化ボタン	ナビゲーションパネルとプロパティパネルを最小化して、キャンバスを広く使うことができる。
A-3	ファイル名	ファイル名をクリックすると書き換えができる。右側の下向きの「>」をクリックするとデザインファイルのメニューが開き、ファイルのエクスポートや複製、ゴミ箱への移動などができる。
A-4	所属しているチーム	ファイルが属しているチームおよびプロジェクトが表示される。ドラフトの場合はドラフトと表示されるので、いずれかのチームへの移動が必要となる。
A-5	ファイルタブとアセットタブの切り替えボタン。	ファイルタブには[ページ][レイヤー]が表示され、アセットタブからはコンポーネントの検索や参照、挿入を行うことができる。
A-6	ページパネル	ページとはキャンバスのことであり、複数のフレーム・グループ・レイヤーを管理するもの。デザインファイルに存在するページが表示され、+ボタンで増やすことができる。
A-7	レイヤーパネル	Adobe系アプリと同じくレイヤーパネルの役割を持つ。ロック・ロック解除、表示・非表示の切り替えや、重なり順の変更などが可能。クリッピングマスクがグループ化されるためわかりやすい。

インターフェイス(プロパティパネル基本編)

今度は画面右側に位置するプロパティパネルを見てみましょう。
主な役割は、アートボードやシェイプ・テキストなどのレイヤーのプロパティの調整を行うパネルをまとめたものです。
プロパティパネルは選んだツールなどで表示が変わるため、今後の授業で細かく確認していきましょう。

インターフェイス(Bプロパティパネル基本編)
記号	名称	機能など
B-1	位置パネル	オブジェクトの整列や回転・反転、また位置の調整などを行うパネル。
B-2	レイアウトパネル	オブジェクトの横幅や高さを調整するパネル。またオートレイアウトを有効にすればオートレイアウトの設定調整を行うことができる。
B-3	外見パネル	オブジェクトの不透明度や角丸のサイズなどを調整する。また描画モードなども変えることができる。
B-4	タイポグラフィパネル	テキストレイヤーの書体やサイズや行送り、トラッキング、上下左右の配置などの指定を行う。
B-5	塗りパネル	オブジェクトの塗りの色を設定するパネル。
B-6	線パネル	オブジェクトの線の色や太さなどを設定するパネル。
B-7	エフェクトパネル	オブジェクトにドロップシャドウなどのエフェクトを追加するパネル。
B-8	選択範囲の色パネル	複数のオブジェクト、もしくはグループを選択している場合、それらのオブジェクトの塗りや線の色を一括で表示するパネル。同一色は個別選択の必要なく括で変更できる。
B-9	エクスポートパネル	全体もしくは部分的な書き出しおよび設定を行うパネル。