〜Figma未経験者向け〜 INI UXデザイナーによるFigma基礎講座｜1.Figmaの構造について

ホーム
INI WAY
ナレッジ・ノウハウ
〜Figma未経験者向け〜 INI UXデザイナーによるFigma基礎講座｜1.Figmaの構造について

2022年にAdobeがFigmaを買収、2023年1月にはAdobe XD単体販売終了のニュースが流れ、業界に衝撃が走りました。2023年12月、結果的にAdobeはFigma買収を断念することになりましたが、業界では急速にFigmaへの移行が進んでおり、実際にINIでもFigmaへ移行を始めています。

とはいえ、「どうやら多機能らしい」「オートレイアウトが便利らしい」などとFigmaの良い噂を耳にしつつも、結局「慣れているXDの方が早い！」となかなか移行に踏み切れない方も多いのではないでしょうか。

INIで駆け出しUXデザイナーとして日々奮闘している私・高橋（通称：まゆゆ）も、最初はFigmaへの抵抗感が強く、「Figma流行ってるけどXDで作業したいな・・・」と思っている側の人間でした。
ですが、プロジェクトでの利⽤を通じて⼀気に習得・移⾏が進み、今では「Figmaの⽅がいい！」と思えるまでになりました。
そこで、Figma移⾏したてホヤホヤの私からFigma基礎講座を3部構成でご紹介したいと思います！まず第⼀弾は、「まずは構造を理解しよう！」ということで「Figmaの構造」について解説します。

1.ワークスペースの構造

Figmaのワークスペースは「チーム」「プロジェクト」「ファイル」の3要素から構成されており、親⼦関係でいうと「チーム＞プロジェクト＞ファイル」の関係性になっています。

以下でそれぞれ詳しく説明します。

ファイル

ファイルとは、Figmaのデザインファイルそのものを指します。ファイルの中⾝については、後ほど詳しく説明しますが、複数のアートボード（Figmaではフレームと呼ぶ）を並べることができるので、採⽤サイトやコーポレートサイトなど1つWebサイトを1つのファイルで管理することが⼀般的ではないかと思います。（少なくとも私はそのように使ってます）

※無料プランで作成できるファイルは、共同編集用ファイルは3つ、個人用ファイルは無制限です。

プロジェクト

プロジェクトとは、前述のファイルの集合体で、フォルダのようなものになります。ファイルがWebサイトの単位になるので、プロジェクトはINIのようなクライアントワークの場合は「クライアント名（ex.INI 株式会社）」事業会社の場合は「サービスや事業」の単位で取り扱うことが多いのではないでしょうか。

※無料プランで作成できるプロジェクトは1つです。

チーム

最後にチームとは、ワークスペース内の一番大きいまとまりのことで、前述したプロジェクトを束ねる要素となります。その名の通り「INI デザインチームA」などといった組織単位で取り扱うことが多いのではないでしょうか。

※無料プランで作成できるチームは1つです。

2.ファイルの構造

Figmaのデザインファイルには、以下5つの概念が存在します。

フレーム
オブジェクト
グループ
セクション
ページ

以下でそれぞれ詳しく説明します。

フレーム

まず、⼀番わかりやすいフレームからご説明します。フレームとは、特定のデバイスやスクリーンサイズの枠組みで、MacBook AirやiPhone13&14などの選択肢からサイズを選び、PhotoshopやXDでいうアートボードのように作業領域を作成することができます。（フレームにはもう1つの使い道がありますがそれはまた次回。）