> ## 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 からインポートする

> Figma のデザインを動作するアプリやページに変換します。フレームをインポートして新しいアプリを開始したり、アプリエディタの任意のタイミングで既存アプリに Figma ページを追加できます。

Base44 は Figma に接続し、デザインから直接アプリを構築できるようにします。新しいアプリを開始するときに Figma フレームをインポートしたり、開発中の任意のタイミングで既存アプリに Figma のページを追加できます。

<Card title="Figma の要件" icon="figma">
  * **Figma シート:** Editor シートが必要です。Figma は View および Collaborator アカウントの API アクセスをブロックします。
  * **デザインファイル:** Figma Design ファイルを使用する必要があります。FigJam、Slides、その他のファイルタイプはサポートされていません。
  * **公開フレームリンク:** フレームリンクは **Anyone with the link – Can view** に設定する必要があります。Figma で **Share** をクリックして更新します。インポート後にプライベートに戻せます。
</Card>

<Note>
  ワークスペースあたり 1 つの Figma アカウントを接続できます。
</Note>

***

## Figma から新しいアプリを開始する

ホーム画面の **Import from Figma** を使い、Figma フレームを新しい Base44 アプリに変換します。Base44 はデザインのレイアウト、構造、視覚スタイルを出発点として再現します。

<Frame caption="Figma からデザインをインポートして新しいアプリを開始する">
  <img src="https://mintcdn.com/base44/M0pVqHW6EmfLvxHz/images/importfromfigma.png?fit=max&auto=format&n=M0pVqHW6EmfLvxHz&q=85&s=5a3aac7b85f3e8136f064e9dfeea2c98" alt="Import From Figma" width="813" height="414" data-path="images/importfromfigma.png" />
</Frame>

**Figma デザインから新しいアプリを開始するには:**

1. [Base44](https://base44.com) にアクセスします。
2. プロンプトボックスの **+** アイコンをクリックします。
3. **Import from Figma** をクリックします。
4. **Connect to Figma** をクリックします。
5. 画面の指示に従い、Figma への Base44 のアクセスを許可します。
6. Figma リンクを貼り付け、**Generate** をクリックします。

インポートは選択されたフレームまたはセクションを対象とします。Figma ファイルの他の部分は、別途インポートしない限り含まれません。

***

## Figma からページを追加する

アプリがアプリエディタに表示されたら、任意のタイミングで Figma フレームを新しいページとして追加できます。初回インポートに限られません。Figma からページを追加するには Editor アクセスが必要です。Viewer はページを追加できません。また、進行中の生成があれば完了を待ってからページを追加する必要があります。

<Frame caption="アプリエディタで Figma からページを追加する">
  <img src="https://mintcdn.com/base44/Fv7RCtkBLrpIq-Ra/images/addpagefromfigma.png?fit=max&auto=format&n=Fv7RCtkBLrpIq-Ra&q=85&s=e9b5ef87ba86c02258f8048359fa6097" alt="Add Page From Figma" width="457" height="279" data-path="images/addpagefromfigma.png" />
</Frame>

**Figma からページを追加するには:**

1. アプリエディタでアプリを開きます。
2. AI チャットで **+** アイコンをクリックし、**Add page from Figma** を選択します。
3. Figma で、インポートしたい**フレームまたはセクション**を右クリックします。
4. **"Copy/Paste as"** を選び、**"Copy link to selection"** を選択します。
5. リンクをダイアログに貼り付け、**Add page** をクリックします。

***

## Figma インポートガイドライン

インポート前に Figma ファイルを整えておくと、Base44 がデザインを読み取り、クリーンで正確なレイアウトとして再現しやすくなります。最良の結果を得るため、以下のガイドラインに従ってください。

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

Figma で構造が明確だと、Base44 は意図に合ったレスポンシブレイアウトを組みやすくなります。

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

* **ページを論理的なセクションに分ける:** 関連するコンテンツ (ヒーロー、機能行、フッターなど) をフレームまたはグループで囲み、ページの各領域が明確に定義されるようにします。
* **階層に auto layout を使う:** カード、ナビゲーションバー、繰り返しコンテンツブロックなどのコンポーネントに `Auto Layout` を適用します。たとえば、画像、タイトル、説明を持つ情報カードは `Frame` または `Group` としてグループ化し、できれば `Auto Layout` を使います。これにより、Base44 は要素同士の関係とサイズ変更方法を理解できます。
  <Frame caption="Figma で auto layout 用に 2 つの要素を選択する">
    <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** を使い、結果を 1 つのベクター要素に平坦化します。
* **非表示要素を削除する:** 完全に非表示になっている、またはキャンバスから遠くに押し出されているレイヤーを削除し、インポートしたレイアウトを妨げないようにします。
  <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 など) を特定する。
  * 同じデザイン言語とレイアウト原則に従う新しいページを作成する。
  * ホームページのボタン、メニュー、リンクを新しい内部ページに接続する。

**次のようなプロンプトを使えます:**

> `Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.`

<Tip>
  インポートしたデザインで繰り返しのパターン (カード、機能行、CTA ブロックなど) が見られる場合、プロンプトでそれらに言及して、AI が新しいページでもそのパターンを再利用できるようにします。
</Tip>

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