FigmaのデザインをFramerに取り込む方法

FigmaのデザインをFramerに取り込むには、無料プラグイン「Figma to HTML with Framer」を入れて、移したいフレームを選び、Framerのプロジェクトに貼り付けます。レイヤーもグループも構造もそのまま残るので、着地するのはそのまま編集できるWebキャンバスです。書き出した静的なコードではありません。貼り付けたあとはひたすら手直しで、この手直しの話は誰も先に教えてくれません。

FigmaからFramerに取り込む手順

Figma Communityから「Figma to HTML with Framer」を入れます。無料で、Framerの表記では利用者は60万人を超えています。外部の変換ツールではなく、Framer公式の経路です。移したいレイヤーかフレームを選んでプラグインを実行すると、何レイヤーをコピーしたかがメッセージで出ます。Framerのプロジェクトに切り替え、キャンバスをクリックして貼り付けます。Framer公式のFigma to HTMLのページも同じ8ステップで説明しています。プラグインを入れる、Figmaのデザインをコピーする、Framerに貼る、そのまま編集する、レスポンシブにする、エフェクトとアニメーションを足す、ページとリンクを足す、公開する、の順です。

セクションはひとつずつ貼る

ページ全体のフレームを選んで一度に運ぶのはやめましょう。ランディングページのレイヤーは数百枚あり、どこかが崩れても原因の場所が分かりません。ヒーローを貼ったらヒーローを直す。ロゴの列を貼ったらロゴの列を直す。訪問者がスクロールする順番と同じ順で、上から下へ進めます。Framer自身も、複雑なFigmaの構造はWeb向けの手直しが必要だと明言しています。直す単位は小さく保ちましょう。

最初に直すのはフォント

Framerのヘルプははっきり書いています。Figmaから取り込むと、Framerが持っていないカスタムフォントはFramerの標準フォントに置き換わります。ヒーローの見出しが急にシステムのゴシックになり、1行の長さが変わり、余白も一緒に狂います。レイアウトに手を付ける前に、まず書体を片付けます。テキストレイヤーを1つ置き、右パネルのフォントピッカーを開き、Customタブに移動して、Upload Fontsから自分のファイルをアップロードします。読み込み速度の面で、Framerは.woff2を勧めています。そのあと取り込んだテキストレイヤーを選び、フォントを当て直します。先に内蔵のライブラリを見るのも手です。FramerにはGoogle FontsとFontshareが入っていて、探している書体がすでにあるかもしれません。

一緒に来るものと、来ないもの

レイヤー、グループ、階層はそのまま来ます。レイアウトの設定も来ます。Framerのアカデミーでも、オートレイアウト、階層、fillの設定は自動で引き継がれると説明されています。来ないのは、そもそもFigmaになかったものです。ブレークポイント、ホバーの状態、スクロールのエフェクト、Framerで言うところのコンポーネント。FramerのFAQも、取り込んだあとで静的な部品を本物のコンポーネントに置き換えるよう書いています。ここは真面目にやる価値があります。ナビ、ボタン、カードはFramerのコンポーネントとして作り直します。貼り付けたコピーを40個抱えると、修正のたびに40回同じ作業をすることになります。

貼ったフレームを伸縮するスタックに変える

固定ピクセル幅のまま貼ったセクションは、スマホではみ出します。Framerのトラブルシューティング記事は、Phoneブレークポイントでページが画面いっぱいにならない一番多い原因として、これを挙げています。モバイルの表示領域より広い要素、たとえば321pxのような固定幅や、大きすぎるMax Widthです。セクション単位でコンテナを選び、右パネルのSizeでWidthを固定値から100%か1frに変えます。Max Widthは中身のラッパーだけに残します。そうすれば、広いモニターでも文章の幅が読みやすいままです。作業はDesktopから始めます。Desktopの値は下のブレークポイントに流れていきます。

そこからFramerらしい部分を足す

ここがコードを書き出さずにFramerを使う見返りです。ブレークポイントを3つ設定します。ボタンにホバーとタップの状態を付けます。セクションにスクロールで現れる動きを足します。繰り返し使う要素はコンポーネントにして、1か所直せば全部に反映されるようにします。テキストスタイルはAssetsパネルのStylesで作り、Desktop、Tablet、Mobileごとのサイズを持たせます。個別のレイヤーを触らなくても文字の大きさが変わります。どれもFigmaのファイルには存在しなかったものです。モックアップがページに変わるのは、この工程です。

私たちの作業順

最初にフォント、次に色とテキストスタイル。そのあとは上からセクション単位で進め、固定幅を伸縮する指定に変えていきます。繰り返す部分はコンポーネントにします。次にブレークポイントを、DesktopからTablet、Phoneの順で設定し、それからインタラクションを足します。メタ情報とリンクは最後です。構造が動かなくなってから触ります。この順番なら、ランディングページ1枚が1日で終わります。順番を崩すと3日かかります。あとの修正が前の修正を打ち消していくからです。