この記事の概要

Figmaデータ上でも結構細かくレスポンシブデザインの挙動を設定できます。
ただしVariablesをちゃんと理解している必要はあり、若干難しいです。
というわけで、この記事ではステップバイステップで解説します。

やり過ぎるとデータの管理や更新が大変になるので、どこまで再現するかはチームで相談しながら決めてください。
こんな記事を書いておいて元も子もないですが、どこまでFigmaで細かく表現したとて、最終的にユーザーに届けるのはコードによって実装されたものです。
Figmaで完璧に再現するのが最善とは限らない、という前提でこの記事を読んでください。

完成品

Mobile, Tablet, DesktopをAppearanceから選択可能
それぞれのデバイスサイズごとに最小幅と最大幅が設定されている
Appearance選択にあわせて、ページ内のコンポーネントのVariantも変更される

動画

静止画

1~3番目のセクションをラップするComponentを作って、ページに配置しています。

Mobile	Tablet	Desktop

作り方

Variablesを設定する

Device type
- コンポーネントのvariantsに設定するためのString
Min width
- 各デバイスごとの最小幅を設定するためのNumber
Base width
- 通常時、デザインデータを作る基準にするデバイス幅のためのNumber
Max width
- 各デバイスごとの最大幅を設定するためのNumber

それぞれの数値は一旦設定しているだけなので、参考程度に使ってください。

また、ここで使っている数値も別でVariableとして登録し、再利用するのも良いと思います。
例えば640という数値を「モバイルとタブレットの境界」といった名称で登録し、MobileのMax widthとTabletのMin widthの両方で使うイメージです。

Componentを作成する

Mobile, Tablet, Desktopそれぞれで必要な見た目を作ります。
必要に応じて、既存のComponentのInstanceをここで使用してください。

作成後、VariantのValueとしてMobile, Tablet, Desktopを設定します。
VariantのNameは何でも大丈夫ですが、ここではResponsiveにしました。

Instanceに`Device type`のVariableを設定する

Instanceを作成したら、ResponsiveのVariantにDevice typeのVariableを設定します。

ページの設定をする

Instanceを配置する
FrameのWidth, Min width, Max widthに、VariablesのBase width, Min width, Max widthをそれぞれ適用する

完成：ページのAppearanceを設定する

Appearanceが設定できるようになっているはずなので、適宜切り替えて検証します。

最後に

やや細か過ぎるかもしれませんが、デバイスごとにBase width, Min width, Max widthを設定しておくことで、検証時に「画面幅が1920pxもあるのにモバイルのレイアウトを表示している」といった事態を防げます。

また、はじめからDevice typeの分岐を前提としてコンポーネントやページを作る意識が生まれそうで、考慮漏れが減ると思います。

ただし最初にも記載したように、細かくすればするほど良いかと言えばそうではありません。

良いバランスを見極めながらデータを作ってください。