HTML をフレームに。ページも画面サイズも、それぞれ Figma のフレームへ

10 ページを 3 つの画面サイズで取り込むと、フレームの名前が重要になります。HTML to Frames は、いつも同じ形式で名前を付けます。

domain/path?query — Screen (width)

たとえば shop.example.com/products?sort=new — Mobile (390) です。プロトコルと www は付かず、名前は 60 文字までに収められるので、キャンバス上でも読みやすいままです。

デスクトップの幅の決め方

デスクトップの画面は、推測ではなく実測するため Site width と呼んでいます。

複数ページを取り込むときは 1 つのサイトに 1 つの幅を使うので、デスクトップのフレームがすべて 1 列にそろいます。その他の画面は固定幅で、ラップトップ 1280、タブレット 768、モバイル 390 です。Pro では、特定のブレイクポイントが必要なときに任意の幅（Custom width）も入力できます。

各フレームには取得元の URL と幅も保存されており、これがあとでワンクリックの再インポートを可能にしています。

一貫した名前は、Figma の外でも役立ちます。フレームへのリンクを共有したり書き出したりしたとき、名前を見ればエンジニアはどのページのどのブレイクポイントかがすぐにわかります。

最上位の各フレームの中では、階層が DOM をそのまま反映しています。そのため、マークアップを知っている人ならレイヤーパネルも見慣れたものに感じられますし、オートレイアウトを設定するための本物のコンテナもそろいます。

エンジンは、決まった順序で処理します。

1. 絶対配置で、ページをピクセル単位で正確に組み立てる。
2. フレームを内側から順にたどり、実測した位置とサイズから、縦・横の並び、折り返しのある行、間隔、パディング、配置を推定する。
3. レスポンシブの意味を置き換える。中央寄せの要素は「中央」に、最大幅のボックスは中央のまま、同じ幅のカードや flex-grow の要素は「拡大」に、ロゴとメニューのあいだの余白は「拡大」の要素にする。
4. 構成を適用し、すべての子要素の位置が 2 px 以内に収まっているかを検証する。
5. 収まらなければよりシンプルな構成を試し、それでもだめなら絶対配置のまま残す。

絶対配置のまま残ったフレームには、Stretch、Scale、Center、Min、Max などの制約が付くので、リサイズしても自然に振る舞います。結果画面には、それぞれが絶対配置のまま残った理由が一覧で表示されます。

実在のサイトで行ったテストでは、およそ 86〜97% のフレームでオートレイアウトが推定されました。大切なのは数字そのものではなく、その裏にある保証、つまりデザインが決して崩れないことです。CSS がフレームにどう対応するかは、CSS の Flexbox と Grid をオートレイアウトに変換する で詳しく解説しています。

1 つのフレームが表すのは 1 つのブレイクポイントだけです。実際のデザイン作業では、少なくとも 3 つは必要になります。Responsive set オプションを使えば、HTML to Frames は同じページのデスクトップ、タブレット、モバイルをワンクリックで取得します。

実用面でのポイントは次のとおりです。

• 1 ページの各画面は、順番にではなく並行して取得されます。
• 1 ページとその全画面は、3 回ではなく 1 回のインポートとして数えます。
• Pro と Team では 1 回のインポートで最大 4 画面、無料プランでは 1 画面を取得できます。
• 各画面はそれぞれ独立した最上位フレームになり、画面サイズと幅が名前に入るので、ひと目で見分けられます。

各画面はその本来の幅で取得されるので、デスクトップのフレームを細く縮めたものではなく、サイトの実際のモバイルレイアウトが手に入ります。メニューボタンにまとまるナビゲーション、4 列から 1 列になるグリッド、小さくなる文字も、その幅でサイトが描画するとおりに再現されます。そのため、レスポンシブデザインをレビューする際の信頼できる出発点になります。

レスポンシブセットを 複数ページの一括インポート と組み合わせれば、複数のページを複数のブレイクポイントで取得できます。上限は 料金ページ でご確認ください。