![見出し画像](https://assets.st-note.com/production/uploads/images/140164504/rectangle_large_type_2_768237aa6c9ed828ff7b9c7b91a4cf30.png?width=1200)
Figma基礎編:Part1 「ワークスペースについて」
今回は自分自身の復習も兼ねて、Figmaについて記事を書きます!
基礎編・応用編をそれぞれ2記事ずつ、計4記事構成で進めていけたらと思ってます。
まずは基礎編:Part1 「ワークスペースについて」についてです。
1.ワークスペースの構造
Figmaのワークスペースは「チーム」>「プロジェクト」>「ファイル」>「ページ」という構造になっています。
![](https://assets.st-note.com/img/1714550434908-OqRywB2tbn.png?width=1200)
1.チームとは
チームはワークスペースの中で一番大きな単位で、組織ごとに作成するものです。またプロジェクトの作成やチームに参加するメンバーを管理することが可能です。
※無料プランでは1つのチームにつき、プロジェクトは1つまで・ファイルの数は3つまでと制限があるので注意しましょう。
2.プロジェクトとは
プロジェクトはファイルをまとめたフォルダ的なものです。
※無料プランでは1つのチームにつき、プロジェクトは1つまでと制限があります。
3.ファイルとは
プロジェクト内の作業スペースであり、Figmaのデザインファイルそのもののことです。
※無料プランでは1つのプロジェクトにつき、ファイルの数は3つまでと制限があります。
4.ページとは
ページはファイル内にあり、デザイン用ページや開発用ページ、コンポーネント用のページなど階層を作ることができます。
※無料プランでは1つのファイルにつき、ページの数は3つまでと制限があります。
2.ワークスペースの見方
![](https://assets.st-note.com/img/1715331310479-D3UJCbnZL1.png?width=1200)
1.ツールバー
![](https://assets.st-note.com/img/1715330905095-ky2Oaznakt.png)
画面上部にあり、フレームやオブジェクトの選択ができます。
また、プラグインの追加やコメントなどもこちらのツールバーから行えます。
![](https://assets.st-note.com/img/1715330948685-XEksKDOwfq.png)
中央部にある部分はファイル名が表示されています。
![](https://assets.st-note.com/img/1715330964579-3kLjh6s0ol.png)
オブジェクトを選択するとメニューが切り替わり、コンポーネントの作成やマスクの設定が行えます。
2.レイヤー・アセット
![](https://assets.st-note.com/img/1715331094081-BPQJg9Y1PZ.png)
こちらではレイヤーとアセットの選択ができます。
アセットでは作成したコンポーネントを表示,選択できます。
3.ページ
![](https://assets.st-note.com/img/1715331191606-VIW6cydMLE.png)
ファイル内のページの管理ができます。
4.レイヤー
![](https://assets.st-note.com/img/1715331155974-4xTJtr9gKO.png)
ファイル内のレイヤーの管理ができます。
5.キャンバス
こちらでデザインの作成を行います。
6.デザイン設定・プロトタイプ
カラーやサイズなどデザインの設定が行えます。
また、こちらからデザインファイルの書き出しが行えます。
プロトタイプタブを選択するとプロトタイプの設定が行えます。
3.キャンバス内について
![](https://assets.st-note.com/img/1715329105569-lHememUJHG.png?width=1200)
1.セクション
セクションは主にキャンバスの整理が目的です。
セクション内にはセクション・フレーム・オブジェクトを子要素として配置することができます。セクション内に配置されたフレームにはフレームの名前が表示されるため、要素が分かり易くより整理することが可能になります。またプロパティの一括適用も可能です。
2.フレーム
フレームはアートボードとして使用します。スマホ・タブレットなどのデバイスに合わせてフレームサイズを設定します。
フレームもセクション同様フレームやオブジェクトを子要素として配置することができますが、フレーム内にセクションは配置することができません。
3.オブジェクト
オブジェクトはフレーム内に配置する要素で、画像・テキスト・矩形などのことを指します。
以上がFigma基礎編:Part1 「ワークスペースについて」でした!
次回はPart2でお会いしましょう。
最後まで見て頂きありがとうございました!