🎨 Figma から Framer へのインポートとレスポンシブ化ガイド

📖 詳細な説明

1. 準備段階

適切なデザインを選択

• Figmaコミュニティページから適切なランディングページデザインを探す
• デザインを複製して作業準備をする

フォントの問題を解決

• ローカルフォントをGoogle Fontsなど誰でも利用可能なフォントに変換
• すべてのテキスト要素でフォントを統一する

重要ポイント: サイト全体を一度にインポートせず、セクション単位で個別にインポートすると効率的です。

2. インポート方法

Framer Copy Pasteプラグインを使用

• Figmaでコンポーネント＆プラグインパネルを開く
• 「Framer Copy Paste」を選択して実行
• セクションごとに選択してコピー（Alt+Command+P / Alt+Ctrl+P でショートカット実行）

Framerでのペースト作業

• Framerでメインフレームのサイズやバックグラウンドカラーを調整
• Command+V / Ctrl+Vでコピーしたコンテンツをペースト
• セクションごとに繰り返し作業する

3. インポート後の問題解決

レイヤー順序の修正

• 「Bring to Front」機能で要素の重なり順を調整

マスキングの問題

• マスクのradius（角丸）を適切に設定

SVG問題の対応

• 問題のあるSVGをFigmaから再エクスポート
• 保存したSVGをFramerにドラッグ＆ドロップ

4. レイアウトの最適化（レスポンシブ化の鍵）

メインブレイクポイントの最適化が重要

• FigmaのデザインはFreeform配置のため、レスポンシブにするには再構築が必要
• ブレイクポイント追加前にレイアウト構造を整える

セクションごとのレイアウト構造化

• テキストやボタンをスタックに組み込む
• テキスト要素を「fill parent width」に設定してレスポンシブ対応
• カード要素などをレイアウトに変換
• セクション全体をスタックとしてまとめる

全ページのレイアウト構造化

• 各セクションを重ねて配置するためにフレーム自体をレイアウトに変換
• ギャップをゼロに設定

5. ブレイクポイントの追加と設定

タブレット用ブレイクポイント

• セクションの幅を「fill」に設定してビューポート幅に合わせる
• 方向を垂直（vertical）に変更
• 高さを「fit content」に設定
• 上下のパディングを追加
• テキスト配置を中央に調整（必要に応じて）

モバイル用ブレイクポイント

• テキストサイズや行の高さを調整
• パディングを微調整
• スタックの間隔を調整

プロのヒント: モバイルナビゲーションやレスポンシブデザインの詳細についてはFramerのYouTubeチャンネルに専用動画があります。