この記事の概要
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の分岐を前提としてコンポーネントやページを作る意識が生まれそうで、考慮漏れが減ると思います。
ただし最初にも記載したように、細かくすればするほど良いかと言えばそうではありません。
良いバランスを見極めながらデータを作ってください。