Figma｜第2章画面の構成を知ろう

【2-1】ホーム画面の説明

☑️ Figmaを立ち上げて初めに目にする画面です。
※ここはデザイン制作をする画面ではありません。

☑️ 色々な項目がありますが、初めに使う所は以下のような項目で十分です。

A アカウント	自分のアカウントの確認・変更や、設定が出来ます。
B デザインファイル	ここからデザインするファイルを作成します。
C インポート	Figmaファイル(.fig)を開くときに使います。 ※このカリキュラムではいくつかサンプルデータを用意しております。サンプルデータはここから開きます。
D 下書き	個人で利用するための下書きデータの一覧、及び新規作成します。機能的にはデザインファイルとの違いは無いです。
E データ一覧	使用したデータがここに一覧として表示されます。Figmaのデータを作成する度に、増えていきます。初期では空の状態です。

☑️ 以下の項目については、チームで仕事をする際に使用する機能です。
1 . 【FigJamボード】チームで共同作業をする際のホワイトボードのようなツールです。

チームで一緒に図を描いたり、ブレーンストーミングをしたり、アイデアを整理したりできる視覚的なコラボレーションホワイトボードです。

2 . 【チームを作成】チームで制作する際に使用します。

※現時点では特に気にする必要はありません。気になる人以外はスキップしましょう。

☑️ 【コミュニティを見る】は、Figmaユーザーのコミュニティです。
ライブラリ、プラグイン、アイコンセットなどFigmaのユーザーが作成した多くの素材があり、Figmaユーザーに提供されています。
※現時点では特に気にする必要はありません。気になる人以外はスキップしましょう。

☑️ 先ほど確認したこの画像の、「B」のボタンをクリックしましょう。

「デザインファイルを新規作成」を選択すると、デザイン編集画面に切り替わります。この画面で作業します。

※次の2-3より、詳細に説明しています。
初期の段階ではファイル名が「無題」となっているので、まずはデザインファイルに名前を付けてみましょう。

※ファイル名の隣の「▼」アイコンをクリックすると、下記のメニューが出てきます。

※ デザインファイル名をダブルクリックしても、ファイル名を変更できます。

☑️ Figmaには、WEBデザインをするためのツールが多く用意されています。
※一度に全て覚えるのは難しいので、使いながら少しずつ覚えていきましょう。

【インターフェース画像】

A ホームのアイコン	クリックするとホーム画面に戻れます。
B Figmaアイコン	クリックすると、ファイルの新規作成や編集など一覧を表示。基本的な項目を選択出来ます。
C 左パネル	主にレイヤーの確認で使用する事が多い。その他 ”ページ”を増やしたり、”アセット”で登録したパーツの確認など。
D プレゼンテーション（プレビュー）	制作したものをプレビューできます。
E 共有ボタン	Figmaで制作したものを他の方と共有出来ます。※相手がFigmaをインストールしていなくてもOK
F 倍率	表示サイズの倍率を示しています。※100％が基本のサイズです。
G 右パネル	選択したオブジェクトの編集（デザインやテキストの調整など）。
H キャンバス	ここでデザイン作業します。
I ツールバー	Figmaの作業に必要なツールが、このツールバーに集約されています。