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

# Figma からインポート：デザインからアプリまでワンステップで

> フレームへのリンクを共有し、作りたいものを説明するだけで、Figma デザインを実際に動作するウェブアプリに変換します

デザインプロセスで Figma を使用しているチーム向けに、Manus は強力な統合機能を提供しています。この機能を使うと、1 つのコマンドでデザインを機能的なウェブアプリケーションに変換できます。

### 仕組み

Figma デザインを手作業でコードに変換する代わりに、Figma ファイルへのリンクを Manus に提供するだけで済みます。Manus はレイアウト、コンポーネント、フォント、カラーを含むデザインを分析し、対応するウェブアプリケーションのコードを自動的に生成します。

### 手順

1. **Figma でデザインする**：通常どおり Figma でアプリケーションのデザインを作成します。

   <img src="https://mintcdn.com/docs-manus/lidNm1_-GLX2OqHW/images/image.png?fit=max&auto=format&n=lidNm1_-GLX2OqHW&q=85&s=e3ec8ac3e79fe1a72136b12e5e3c3683" alt="image.png" width="720" height="448" data-path="images/image.png" />
2. **リンクを提供する**：Figma フレームのリンクを Manus と共有し、構築したいものを説明します。

   例：

   > 「これは新しいモバイルアプリの Figma デザインです。このデザインに基づいて、機能的なウェブアプリケーションを構築してください。」
3. **Manus がアプリを構築する**：Manus はデザインを解釈し、フロントエンドの HTML、CSS、JavaScript に加えて、デザインを実現するために必要なバックエンドコンポーネントを生成します。

   <Tip>
     リクエストには複数のフレームを添付できます。ページの遷移、インタラクション、コンポーネントの状態（ホバーなど）といった、フレーム同士の関係を Manus に伝えてください。これにより、Manus は複数ページやインタラクティブな体験を正確に生成できます。
   </Tip>

この統合により開発プロセスが大幅に加速します。デザインと開発の間のギャップを埋め、静的なデザインからライブでインタラクティブなアプリケーションまで、わずかな時間で到達できます。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.