XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント

関わっている現場の一つで、デザインツールをAdobe XDからFigmaに移行しました。その時に今までFigmaを使ったことのないメンバー向けにFigma勉強会などを開催し、すぐに使い始められるようサポートをしました。
その経験の中で、これからFigmaを使い始めるXDユーザーが理解に時間がかかる点や躓くところをまとめてみました。

ファイル構造と管理構造

XDは1つのXDファイルの中にアートボードで各種画面を作成します。またCreative Cloudのグループ版およびエンタープライズ版ではチーム内でXDファイルを共有できます。

Figmaファイル内の構造

Figmaは1つのFigmaファイルの中に、pageという階層があります。pageの中にFrameで各種画面を作成します。

Figmaアカウントのファイル管理構造

Figmaでは1アカウントごとにDraftとTeamがあり、それらの配下でFigmaファイルを管理します。 Draftは文字通り下書きの意味で、1人もしくはごく限られたメンバーで使うFigmaファイルの配置を想定されています。Draftに置かれたFigmaファイルでも他のメンバーにファイルを共有することは可能ですが、閲覧権限のみで編集権限は付与できません。（freeプランの場合）Draft配下では無制限にFigmaファイルを作成できます。

Teamはさらにプロジェクトというディレクトリを持ち、その中でFigmaファイルを管理します。 Teamはチームコラボレーションを前提としてます。Teamに編集権限でメンバーを招待すると、招待されたメンバーはそのTeam内の全てのFigmaファイルの編集権限や新規ファイルの作成削除の権限を持ちます。
Team作成はfreeプランでも行えますが、Team内で作成できるファイルは3つまで、編集権限で招待できるメンバーは2人までとなります。 そこを開放するには、professional以上の契約が必要となります。 なお、課金はTeamの編集権限を持つメンバー数分の金額となります。

Frameについて

XDでは、ひとつひとつの画面をアートボード単位で作成します。Figmaでこのアートボードに該当するのはFrameになります。

ただし、XDのアートボードとFigmaのFrameは似て非なるものと思ったほうが良いでしょう。
主に下記の点がXDのアートボードと異なります。

• Frameの中にFrameを入れられる（入れ子にできる）
• ボーダーや角丸のスタイルやドロップシャドウなどのエフェクトを設定できる
• UIパーツにもFrameを使う
• auto layoutが設定できる（後述）

おそらく”XDのアートボード”の感覚でいると、入れ子にしたり、小さなUIパーツにもFrameを使うことに違和感を覚えると思います。極端な話、まずはFrameという言葉に惑わされずに、そういうFigma特有の機能だと捉えると良いでしょう。

FrameとGroupの違い

FigmaにはGroupもあります。なので、Frameを入れ子にするくらいならGroupを使えば良いのでは？と思うかも知れません。私も最初はそう思ってました。
確かに要素をまとめるという目的で言えばGroupで事足りますが、Frameはそれだけに留まらず、UI作成に便利な機能が備わってます。FigmaのUI作成においてはGroupよりFrameの方が利用頻度が高くなります。
以下で、GroupとFrameそれぞれの特徴を案内します。

Group

言葉通り、要素をまとめて1つのグループとして操作ができます。XDのグループと同じと捉えて問題ないでしょう。
Groupはグルーピングした要素と互いに影響し合います。必ずGroupの大きさは中身を全部選択した時の大きさになります。

またGroupには色やボーダーなどのスタイルを指定できません。

Frame

Groupと同じように要素をまとめて1つのグループとして操作ができます。
ただしGroupと異なり、Frameの大きさはまとめた要素とは連動しません。故に中の要素がFrameの枠よりはみ出すこともあります。（Frameより外に出た要素をは表示させないようにする設定もあります）

また色やボーダーなどのスタイルや、ドロップシャドウなどのエフェクトも設定できます。

auto layout

Figmaにはauto layoutという機能があります。auto layoutでは、アイテムが並ぶ方向やアイテム同士の間隔、親要素の余白などが設定できます。 XDのスタックとスペースをまとめた機能と考えるとイメージしやすいと思います。
ただし、似てるようで細かい部分が異なります。

Figmaのauto layout

auto layoutはframeに対して指定します。
auto layoutの仕様はcssのflexboxに非常に近いです。auto layoutを設定したframeがcssで display: flex を指定した親要素、auto layoutの余白はcssのpadding、アイテムの間隔はgapとイメージしていただくと分かりやすいと思います。

auto layoutではアイテムをどのようにに配置するか設定します。ここもcssの、justify-content、align-itemsと同じものと考えると良いでしょう。space-betweenも指定できます。

XDのスタック・スペースとFigmaのauto layoutとの違い

上記で説明したように、auto layoutの各アイテムの位置は個別に設定するのではなく、全体に対する設定となります。逆に言うとアイテム毎に位置は指定できません。（frameを入れ子にすることで可能ではある）
追記：アップグレードでできるようになったようです
Figmaの新機能まとめ #Config 2022｜Naoki Hashimoto｜note

また、frameのサイズを変化させてもpaddingは変化しません（維持されます）
auto layoutは設定した余白以上に余白が生じることがあります。これは、”この値の余白になる”のではなく、”最低限この値の余白は確保”されるという仕様のためです。

一方、XDでは余白の値が変化します。XDのパディングは必ずその値で余白が作られます。

どちらの仕様が良いかは使う人によって異なるかもしれませんが、個人的には親要素のサイズを変更しても設定した余白の値は維持されるFigmaの仕様のほうが使いやすいと思っています。

コンポーネント

FigmaとXDのコンポーネントの仕様は大体同じです。マスターコンポーネントとインスタンスがあって、マスターコンポーネントを変更すると、変更はインスタンスにも反映されます。
細かいところで違いがあるので以下で説明します。

Figmaのコンポーネントの特徴

インスタンスの各レイヤーの色やエフェクトなどのプロパティは変更できます。また、レイヤーの表示非表示もインスタンス毎に変更できます。また、コンポーネント内にコンポーネントがある時は、そのインスタンスを別コンポーネントに差し替えできます。
一方、インスタンスのレイヤー構造自体は変えられません。つまり、レイヤーの順番を変更したり、インスタンスに新しいレイヤーを追加はできません。

Variants

コンポーネントにはVariantsという複数のスタイルを持てる機能があります。XDのステートと似たような機能と考えていただいて良いでしょう。
FigmaのコンポーネントのVariantsは、ステートと異なり複数の状態をかけ合わせて指定できます。例えば以下の例では、「style」「type」「status」という3つのプロパティを設けて、それぞれの値を変えることでコンポーネントのスタイルを切り替えられます。

共有方法

ファイルを他のメンバーに共有する場合、XDは基本的にアートボード単位での共有となり、アートボード内に無いもの、例えばアートボードの外に書いたコメントなどは共有されません。ファイルのすべてを共有するには、そのメンバーを共同編集者として追加するか、XDファイルを渡す必要があります。

Figmaファイルの共有

Figmaファイルの共有は、基本ファイル単位となります。つまりファイル内の全て（すべてのpage、各pageの中身全て）も共有されることになります。
また常に現在のファイルの状態が反映されているので、ファイル内の編集は即時に閲覧してるメンバーの画面にも反映されます。共有するたびにURLを発行する必要はありません。

Figmaファイルの共有方法

Figmaファイルを他のメンバーに共有する一番簡単な方法は、右上のShareをクリックして、左下の「Copy link」をクリックするとクリップボードにURLがコピーされるので、そのURLを共有します。URLにアクセスするだけで、誰でもFigmaファイルを閲覧できます。
※ 招待したメンバーのみアクセス可能にする、閲覧・編集権限を変更する、など細かい設定もできます

FigmaにXDファイルをインポート

現在、XDファイルをそのままFigmaにインポートすることはできません。下記のような有料のサービスがありますが、使ったことはないので精度は分かりません。
Magicul – Design-to-anything converter engine – Convert Adobe XD, Figma, Sketch and more

複雑な構成でなければ、コピー・ペーストで移管することはできます。その時にコツとしては、XDでコピーをする時に「SVGコードのコピー」でコピーしてからFigmaでペーストすると正確な情報で移管できる可能性が高くなります。

終わりに

XDもFigmaもツールの利用目的が同じであり、全体のインターフェイスも似てるので、どちらかの経験がある方であれば、もう一方を使えるようになるまでそう時間はかかりません。
ただし似てるが故に、同じ感覚で操作してるとちょっとした仕様の違いで「これできないんだっけ？」と躓くこともあるので、本記事がそのような方に役立つと幸いです。

追記

freelance hubのコラム記事でこの記事を取り上げていただきました。
注目度高めのデザインツール！「Figma」の魅力と疑問が解決できるブログ記事まとめ