> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma から Base44 へのインポート

> Import from Figma 機能で Base44 内にクリーンで正確なレイアウトを作成するために、Figma デザインを準備するためのガイドライン。

## Figma からインポートする前に

Figma ファイルを正しく準備することで、Base44 がデザインを読み取り、動作するレイアウトとして再作成しやすくなります。

* **Figma Design** ファイルで作業していることを確認してください。FigJam、Slides、その他のファイルタイプはサポートされていません。

  <Frame caption="Base44 でサポートされている Figma デザインファイル">
    <img src="https://mintcdn.com/base44/392ibkP8vd5KkQv-/images/Figmadeisgnfiles.jpg?fit=max&auto=format&n=392ibkP8vd5KkQv-&q=85&s=5ae3cf918ed7cc0218c13cf2e67062bb" alt="Figmadeisgnfiles" width="1630" height="338" data-path="images/Figmadeisgnfiles.jpg" />
  </Frame>
* インポートしたい **単一のフレームまたはセクション** を選択します。完全なドキュメントやページレベルのリンクを使用しないでください。
* Figma で、**Share** をクリックして、**Who has access** の下で、リンクを **Anyone with the link – Can view** に設定します。選択したフレームまたはセクションのリンクをコピーして、Base44 の **Import from Figma** に貼り付けます。インポートが完了したら、必要に応じて Figma ファイルの権限をプライベートに戻すことができます。

<Note>
  Import from Figma は選択したフレームまたはセクションに焦点を当てます。Figma ファイルの他の部分は、別途インポートしない限り Base44 には取り込まれません。
</Note>

***

## Figma レイアウトの構造化

Figma での明確な構造により、Base44 が意図に一致するレスポンシブレイアウトを構築しやすくなります。

<Tip>
  明確なセクションと一貫したコンポーネントを持つよく構造化されたホームページは、デザインを完全なアプリに拡張する際に最良の結果をもたらします。
</Tip>

* **ページを論理的なセクションに分割する:** 関連するコンテンツ (例えば、ヒーロー、機能の行、フッター) をフレームまたはグループ内にラップして、ページの各エリアが明確に定義されるようにします。
* **階層に Auto Layout を使用する:** カード、ナビゲーションバー、繰り返しのコンテンツブロックなどのコンポーネントに `Auto Layout` を適用します。例えば、画像、タイトル、説明を持つ情報カードは、`Frame` または `Group`、できれば `Auto Layout` としてグループ化する必要があります。これにより、Base44 が要素同士の関係とそのリサイズ方法を理解しやすくなります。

  <Frame caption="Figma で 2 つの要素を選択して Auto Layout に">
    <img src="https://mintcdn.com/base44/MurR_Wl5TS5X1qcL/images/selectingtwoelementsforautolayout.jpg?fit=max&auto=format&n=MurR_Wl5TS5X1qcL&q=85&s=bfc95a27db769e27148291d3592e4503" alt="Selectingtwoelementsforautolayout" width="1614" height="1062" data-path="images/selectingtwoelementsforautolayout.jpg" />
  </Frame>
* **ネストを意味のあるものに保つ:** 一緒に属する要素 (例えば、カード内の画像 + タイトル + 説明) をグループ化し、視覚構造を反映しない深い不要なネストを避けます。

  <Frame caption="Figma で Auto Layout を適用した後のフレームグループ">
    <img src="https://mintcdn.com/base44/bLTE_wWnl_DPdQ-A/images/Autolayout.jpg?fit=max&auto=format&n=bLTE_wWnl_DPdQ-A&q=85&s=dd70c0ccc6b6dcc9aa673a942ed88f30" alt="Autolayout" width="1614" height="1052" data-path="images/Autolayout.jpg" />
  </Frame>
* **一貫してアラインメントと間隔を取る:** フレーム内で一貫したパディング、ギャップ、アラインメントを使用して、Base44 が間隔と階層を保持できるようにします。

***

## ベクターと形の操作

インポート前にベクター要素をクリーンアップすると、配置とレンダリングがより正確になります。ベクターを平面化して簡素化することで、要素が Base44 で一度入った後の配置、スケール、レンダリング方法のサプライズが減ります。

* **複雑なベクターを平面化:** ベクターが多くの別々のパス (例えば、複数の形から作られたアイコン) から構築されている場合は、可能な限り単一のベクターに平面化します。

  <Frame caption="Figma で複雑なベクターを単一のベクターに平面化する">
    <img src="https://mintcdn.com/base44/392ibkP8vd5KkQv-/images/Flattencomplexvectorsintoasinglevector.jpg?fit=max&auto=format&n=392ibkP8vd5KkQv-&q=85&s=477f4e731f164d23d51e6168e7ca53be" alt="Flattencomplexvectorsintoasinglevector" width="1626" height="1054" data-path="images/Flattencomplexvectorsintoasinglevector.jpg" />
  </Frame>
* **平面化する前にストロークをアウトライン化:** 線、円、星、および同様の形に対して:
  * **Outline Stroke** を使用してから、結果を単一のベクター要素に平面化します。
* **隠れた要素を削除:** インポートされたレイアウトを妨げないように、完全に隠れている、またはキャンバスから遠くに押し出されたレイヤーを削除します。

  <Frame caption="Figma で隠れた要素を削除する">
    <img src="https://mintcdn.com/base44/KFsdFz7i1wqax-he/images/hiddenelements.jpg?fit=max&auto=format&n=KFsdFz7i1wqax-he&q=85&s=170ab4d786073f01726b36b622a68461" alt="Hiddenelements" width="1684" height="1100" data-path="images/hiddenelements.jpg" />
  </Frame>
* **塗りを簡素化:** 要素に複数の塗りがある場合、実際に必要なものだけを保ちます。Base44 は要素の最後の塗りのみをインポートします。

  <Frame caption="Figma で複数の塗りを持つ要素">
    <img src="https://mintcdn.com/base44/K4xKJvhMiJxUbRoz/images/multiplfills.jpg?fit=max&auto=format&n=K4xKJvhMiJxUbRoz&q=85&s=2e4cfa24784a430ce87fef6ce59f002c" alt="Multiplfills" width="1698" height="1102" data-path="images/multiplfills.jpg" />
  </Frame>

***

## フォント、効果、その他の制限

Figma デザインの一部の部分は、結果のレイアウトが Base44 で確実に動作するようにインポート中に適応されます。

* **フォント:**
  * Google Fonts のみが完全にサポートされています。
  * カスタムフォントはインポート中にデフォルトフォントに置き換えられます。タイポグラフィは後で Base44 内で更新できます。
* **正確に保持されない可能性のあるデザイン効果:**
  * 画像フィルター
  * 単一要素の複数の背景レイヤー
  * 変数および変数駆動のスタイル
* **レイアウトの洗練:**
  * インポート後に AI チャットまたは Visual Edit モードを使用して、間隔、レスポンシブ、インタラクションを微調整します。
  * 何かが正しく見えない場合は、Base44 で直接構造を調整するか、Figma ファイルを更新してよりクリーンなフレームから再度インポートします。

<Warning>
  デザインがサポートされていない効果や複雑な変数のセットアップに大きく依存している場合は、インポート後の視覚的な違いを予想して、Base44 内で結果を洗練する計画を立ててください。
</Warning>

***

## アプリの残りの部分の構築

Figma フレームがインポートされたら、新しいページを完全なアプリまたは Web サイトの基礎として扱うことができます。

* インポートされたページを **ホームページ** と、構造、レイアウト、視覚言語のメインリファレンスとして使用します。
* AI チャットに以下を依頼します:
  * どの追加ページが欠けているかを特定する (例えば、About、Pricing、Blog、Contact)。
  * 同じデザイン言語とレイアウト原則に従う新しいページを作成する。
  * ホームページのボタン、メニュー、リンクを新しい内部ページに接続する。

**次のようなプロンプトを使用できます:**

> `ホームページのコンテンツとデザインスタイルの両方を含めて、慎重にレビューしてください。ホームページを Web サイトの構造とデザイン言語を理解するためのメインリファレンスとして使用してください。完全な Web サイトを作成するために、どの追加ページが必要かを特定してください。同じデザイン言語、レイアウト原則、視覚スタイルを維持しながら、欠けているページを作成し、それらが直接の続きとして感じられ、切り離されていないようにしてください。完了したら、ホームページに戻って、すべての関連するボタンとリンクが適切な内部ページに移動するように接続してください。`

<Tip>
  インポートされたデザインで繰り返しのパターン (カード、機能の行、コールトゥアクションブロックなど) を見つけた場合は、プロンプトでそれらを言及して、AI が新しいページでそれらのパターンを再利用できるようにしてください。
</Tip>

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>