[Figma] 04 Figmaのチーム・プロジェクト・デザインファイルの解説

「Figma」の特徴の一つであるチーム編集の構造部分の基本的な仕組みを理解しましょう。

階層構造

チーム・プロジェクト・ファイルの階層構造(ファイルブラウザ)

ファイルブラウザでチームのプロジェクトをクリックすると以下のような表示になります。
Figmaのデータは以下のような階層構造になっており、具体的には「チーム > プロジェクト > デザインファイル」と親子関係のある構造です。

なおファイルブラウザで新規ファイルを作るとドラフトの状態であり原則自分しか編集できません。
ドラフトをチームのプロジェクトに移動することでデザインファイルとして扱うことができるようになり共同編集が可能になります。

デザインファイルの構造(編集画面)

次にデザインファイルの編集画面においての構造を確認しましょう。

デザインファイルには、単一もしくは複数の「ページ」と呼ばれるキャンバスが存在します。
「ページ」の中に、フレームツールでアートボードを単一もしくは複数作って配置でき、
テキスト・シェイプ・コンポーネントなどのレイヤーを配置することでデザインを作成します。