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

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のメンバー数分の金額となります。

Hoge teamのメンバーであるAさんとBさんはHoge team内のすべてのFigmaファイルを編集できる

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の大きさも変化します

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

Frame

Groupと同じように要素をまとめて1つのグループとして操作ができます。
ただしGroupと異なり、Frameの大きさはまとめた要素とは連動しません。故に中の要素が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-contentalign-itemsと同じものと考えると良いでしょう。space-betweenも指定できます。

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

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

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

親のサイズを変更しても余白の数値は変わらない

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

元は右の余白は5だったが、親要素のサイズを変更するとそれに合わせて右の余白サイズも変化した

どちらの仕様が良いかは使う人によって異なるかもしれませんが、個人的には親要素のサイズを変更しても設定した余白の値は維持される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もツールの利用目的が同じであり、全体のインターフェイスも似てるので、どちらかの経験がある方であれば、もう一方を使えるようになるまでそう時間はかかりません。
ただし似てるが故に、同じ感覚で操作してるとちょっとした仕様の違いで「これできないんだっけ?」と躓くこともあるので、本記事がそのような方に役立つと幸いです。

B!

Comment

コメント(0)

コメントする

Trackback(1)

Twitter 人気のつぶやき 4/30〜5/13 2022 | Webクリエイターボックス

2022年5月14日@ 10:00 AM
[…] 1. ツール:XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント […]