Framerで速く組めるFigmaファイルの作り方

Figmaファイルはこう整えます。デスクトップのフレームは幅1200。外側のフレームも含めて、すべてのコンテナにオートレイアウトを入れます。各要素をfillにするか固定にするかは、Figmaにいるうちに決めます。ここまでやれば、ランディングページは半日でFramerに移ります。飛ばすと半分を手作業で組み直すことになり、1日で終わる仕事が3日になります。

Framerが実際に使う幅で設計する

Framerのキャンバスにはブレークポイントが3つあり、製品ページのタブにはDesktop 1200、Tablet 810と表示されています。framer.comで公開されているコードも同じです。レスポンシブ画像は、min-width 1200px、810pxから1199.98px、max-width 809.98pxという条件で配信されています。なので、デスクトップは幅1200のフレームで作ります。そこで本当にレイアウトが変わるなら、幅810のタブレットのフレームを足します。スマホは390前後で1枚。1440で作って祈ると、自分のモニターでしか正しく見えないヒーローができあがります。

外側のフレームまで含めて、全部オートレイアウト

Framerのアカデミーでは、オートレイアウト、階層、fillの設定は取り込みのときに引き継がれると説明されています。ここが肝です。オートレイアウトで組んだセクションは、伸縮の仕方を知っているスタックとしてFramerに着地します。箱を目分量で置いて作ったセクションは、ばらばらのレイヤーとして着地し、組み直しになります。セクションは縦のオートレイアウトで包みます。横並びの行は横のオートレイアウトで包みます。空白を足して離すのではなく、gapで間隔を作ります。オートレイアウトの外にあるレイヤーは、2回作ることになるレイヤーです。

渡す前にfillか固定かを決める

Figmaでは、セクションのラッパーをfill containerにします。中のコンテンツラッパーには1200や1140のような固定の最大幅を持たせます。行の中のカードはfillにして、幅を均等に分け合わせます。これはFramerにそのまま対応します。Widthを100%か1frにして、コンテンツラッパーにMax Widthを置くだけです。Framerのトラブルシューティング記事によれば、Phoneブレークポイントでページが画面いっぱいにならない一番多い原因は、固定幅か大きすぎるMax Widthです。Figmaに残した固定値は、そのまま先に送るバグです。

テキストスタイルに名前を付けて使い回す

書体の指定に名前を付けて使い回します。H1、H2、H3、body large、body、caption、eyebrow。Framerでは、これをAssetsパネルのStylesで一度作り直し、右パネルのTextとStylesから当てます。Framerのテキストスタイルは、Desktop、Tablet、Mobileごとのサイズを持てます。フォントサイズ、行の高さ、文字間、段落間まで含みます。Figmaファイルに少しずつ違う見出しのサイズが14種類あれば、テキストスタイルを14個作るか、モバイルで読みにくい文字と付き合うかのどちらかになります。

フォントのライセンスはムードボードの段階で確認する

FramerにはGoogle FontsとFontshareが入っていて、フォントピッカーのCustomタブから自分のファイルもアップロードできます。同時にFramerは、Webサイトにフォントをアップロードする前に正しいライセンスを持っているか確認するよう案内しています。デスクトップ用のライセンスでカバーできるのはFigmaのモックアップまでです。公開したページはカバーされません。書体を選んでいるその場で片付けます。公開の前夜では遅いです。フォントを変えると、ページ全部の改行位置が変わります。

画像は表示されるサイズで書き出す

Framerは画像をエッジでWebPとAVIFに圧縮し、デバイスごとにリサイズします。パフォーマンスのページに書いてあるとおりです。配信はそれで面倒を見てくれます。ただし、幅4000ピクセルで貼ったスクリーンショットは元に戻せませんし、PNGのロゴがSVGになるわけでもありません。ラスター画像は表示サイズの2倍程度で書き出します。ロゴとアイコンはSVGにします。altテキストは、内容を覚えているうちに書きます。

Figmaファイルの受け渡しチェックリスト

Figmaファイルを完成と呼ぶ前に、7つ確認します。デスクトップのフレームは幅1200になっている。すべてのセクションがオートレイアウトのフレームに入っている。セクションのラッパーはfillで、最大幅はコンテンツラッパーが持っている。文字は名前を付けたスタイルで動いていて、はぐれたサイズがない。フォントはWeb用のライセンスがあり、ファイルもアップロードできる状態になっている。画像は妥当なサイズで書き出してあり、ベクターはSVGになっている。レイヤー名はFramerのレイヤー一覧で見たい形になっている。名前は残したそのままの形で引き継がれます。