Figma からウェブサイトへ：ランディングページを公開
Figma のマーケティングフレームを HTML、CSS、JavaScript に変換し、完成したサイトを公開します。
Figma のデザインを動作する Web アプリに変換
Figma のフレームリンクを貼り付け、ページの動作を説明すれば、Manus が公開可能なフロントエンドとバックエンドを構築します。
デザインフレームから動作するページへ
Manus は Figma フレーム内のレイアウト、コンポーネント、フォント、色を読み取り、機能する Web アプリを構築します。
デザインフレーム動作するページ
イラストによる例です。
必要なページのデザインをコードに変換
ランディングページ、ダッシュボード、または複数のつながったフレームから始めましょう。各リクエストでは、デザインの裏にある動作を説明できます。
Figma からコードへ：動くダッシュボードを構築
管理ダッシュボードのデザインを共有し、必要なデータと操作を説明してください。Manus がフロントエンドとバックエンドのコンポーネントを備えた Web アプリを構築します。
Figma からアプリへ：フロー全体をつなぐ
複数のフレームを 1 つのデザインからコードへのリクエストにまとめる。ページ間のつながり方、クリック時の挙動、重要なコンポーネントの状態を説明する。
プラグインではなくリンクで Figma をコードに変換
ドキュメントに記載されているワークフローでは、別途 Figma からコードへの変換プラグインは不要です。Figma アカウントを接続し、フレームのリンクを貼り付けて、ページ上で何が機能すべきかを伝えてください。
サイトを公開し、その後も改善を続ける
AI によるデザインからコードへの変換はプレビューで終わりません。ウェブサイトを公開し、独自のドメインを接続し、会話の中で望む変更を説明してください。
1 つのリンクと明確な要望だけで、公開できるサイトが完成
フレーム同士のつながりを説明してください。その後、結果を確認し、会話の中で引き続き変更を加えてください。
Manus で構築を続ける
よくある質問
Manus で Figma をコードに変換するにはどうすればよいですか？
Figma アカウントを Manus に接続し、構築したい Figma フレームのリンクを共有して、作りたい Web アプリを説明してください。Manus はそのレイアウト、コンポーネント、フォント、カラーを読み取り、フロントエンドと必要なバックエンドコンポーネントを構築します。
Manus は Figma を HTML と CSS に変換できますか？
はい。公式ドキュメントに記載されている Figma インポートでは、フロントエンド用の HTML、CSS、JavaScript に加え、リクエストされた Web アプリに必要なバックエンドコンポーネントも生成されます。デフォルトでは、Manus はこれを React と Tailwind CSS を使ったプロジェクトとして構築し、ブラウザ上で HTML、CSS、JavaScript として動作します。フレームのリンクとともに、必要なページと動作を説明してください。
Manus は Figma から React、Figma から Tailwind への変換をサポートしていますか？
はい。Manus はデフォルトで React と Tailwind CSS を使ってウェブサイトを構築するため、Figma からインポートしたデザインは Tailwind でスタイリングされた React フロントエンドとなり、さらにリクエストに応じたバックエンドコードも生成されます。プロジェクトのコードはプライベートな GitHub リポジトリにエクスポートできます。
Figma のコード変換プラグインは必要ですか？
ドキュメントに記載されているフローでは、別途プラグインは不要です。Figma アカウントを接続し、フレームのリンクを Manus に共有して、作りたいものを説明してください。デザインに複数のページや状態がある場合は、フレームを追加できます。
Figma MCP サーバーをインストールする必要がありますか？
いいえ。Manus は Figma のサインインを通じて、あなたの Figma アカウントに直接接続します。接続後はフレームリンクをインポートしてアプリを説明するだけで、インストールや実行が必要な個別の Figma MCP サーバーはありません。
Figma Dev Mode または有料の Figma シートは必要ですか？
いいえ。Manus は Dev Mode ではなく、接続済みの Figma アカウントを通じてフレームをインポートします。無料の Figma アカウントでも接続できます。Figma はアプリがファイルを読み取る頻度を制限しています。無料プランや Dev Mode を使わないシートには少ない月間上限が設定され、Dev Mode を使う有料シートにはより高い上限が設定されます。上限に達した場合、Manus が通知します。
Figma からコードへの AI ワークフローで、実際に動作するアプリを構築できますか？
はい。Figma フレームのリンクを共有し、アプリの内容を説明してください。Manus はデザインを解析し、フロントエンドに加えて、動作する Web アプリに必要なバックエンドコンポーネントも構築します。
Manus は複数ページのデザインやインタラクションを処理できますか？
はい。複数の Figma フレームを共有し、それらのページフロー、インタラクション、またはホバーなどのコンポーネント状態を説明してください。これにより Manus がインタラクティブなマルチページの Web エクスペリエンスを構築しやすくなります。
変換後にサイトを公開できますか？
はい。Web アプリをプレビューして「公開」をクリックすると、オンラインでアクセスできるようになります。カスタムドメインを接続でき、Manus に変更内容を伝えることで継続的に修正できます。
これは Figma Make とどう違いますか？
Figma Make は Figma の製品です。Manus では、ドキュメントに記載されたフローは Figma のフレームリンクと Web アプリのリクエストから始まります。バックエンドのコンポーネントを含めることもでき、その後サイトを公開して、会話の中で編集を続けられます。
Figma から Flutter、または Figma から React Native への出力を使用できますか？
このページでは Figma から Web アプリへの変換を扱います。インポートガイドではフロントエンドに HTML、CSS、JavaScript を使用すると記載されていますが、Flutter や React Native の出力については確認されていません。