⏰ 所要時間: 約15分 Figma のデザインは体験がどのように見えるべきかを示しています。Replit は Figma のフレームをテスト、改良、共有できる React アプリに変換できます。 例として FitStart を使います: 動作するワークアウトフォーム、進捗カード、週間目標、モバイルレイアウトが必要なフィットネストラッカーダッシュボードの Figma フレームです。Documentation Index
Fetch the complete documentation index at: https://docs.replit.com/llms.txt
Use this file to discover all available pages before exploring further.
学べること
以下の方法を学びます:- インポート結果を向上させるために Figma フレームを準備する。
- Figma フレームを Replit にインポートする。
- Replit がデザインから何を保持したかを確認する。
- インポート後に動作、レスポンシブ性、仕上げを改良する。
- インポートされたアプリに変更が必要なときに Agent、Canvas、Visual Editor を使う。
始める前に
以下が必要です:- Replit アカウント。
- インポートしたいフレームが含まれた Figma ファイル。
- Figma アカウントへの接続アクセス。
- アプリに変換したい正確な Figma フレームの URL。
Figma フレームをインポートする
Replit のインポートフローを使ってフレームを React アプリに変換します。
Replit のインポートを開く
replit.com/import にアクセスします。
または Figma をプロンプトに直接添付する
インポートウィザードではなく、ビルドプロンプトと一緒にフレームを Agent に渡したい場合は、プロンプトコンポーザーの添付メニューを使ってください。Replit を開いてプロンプトボックスをフォーカスする
replit.com にアクセスします。プロンプトコンポーザーはホーム画面にあります。
Replit がインポートするもの
Replit は Figma フレームを使って React プロジェクトを作成します。インポートには以下が含まれる場合があります:- テーマとコンポーネントのスタイリング。
- 画像とアイコンアセット。
- React プロジェクトのアプリスキャフォールディング。
Agent がビルドしたものを確認する
インポート後、Preview を開いてアプリを Figma フレームと比較します。
- レイアウトが Figma フレームに十分近い。
- 色、タイポグラフィ、スペーシング、アセットが保持されている。
- 重要な画像とアイコンが表示されている。
- アプリがデスクトップとモバイルサイズで動作する。
- ボタンとリンクが期待通りに動作する。
- 必要に応じてフォーム、メニュー、タブ、ナビゲーションが存在する。
- リフレッシュ後もアプリが動作する。
- 欠けているものが Agent に追加を依頼するほど明確である。
インポート後にアプリを改良する
インポート後に一部の動作を追加する必要がある場合があります。変更がインタラクション、データ、複数の画面、または隠れたロジックに影響する場合は Agent を使ってください。 FitStart の場合、インポートされたデザインをインタラクティブにするよう Agent に依頼します: 変更が主にテキスト、色、スペーシング、レイアウト、画像の仕上げである場合は Visual Editor を使ってください。 ビジュアルフィードバックにアノテーションをつけたり、バリアントを比較したり、デザイン上で変更すべき点を直接示したい場合は Canvas を使ってください。Canvas でレイアウトを比較してアノテーションをつける
Canvas はインポートされたアプリをフリーフォームのボードに変換し、Agent に代替レイアウトを依頼したり、テキストやスケッチでデザインをマークアップしたりできます。
異なるレイアウトを試す
インポートされたモックアップをクリックして Reimagine を選択し、Try different layouts を選んでください。Agent がコンテンツを維持しながらビジュアル階層を再配置した代替レイアウトを提案します。
必要に応じて Agent で Figma リンクを使う
インポート後、特定のフレームやレイヤーを確認したり、デザインデータを抽出したり、実装をデザインと比較したいときに、Figma のリンクを Agent チャットに貼り付けることができます。 Agent チャット機能には Figma の Dev または Full シートを推奨します。詳細については Figma MCP インテグレーション をご覧ください。 チュートリアルを完了おめでとうございます！Figma フレームをインタラクティブな Replit アプリに変換して、共有・テストできるものに改良しました。次のステップ
Visual Editor
テキスト、色、スペーシング、画像などの細かいビジュアル詳細を仕上げましょう。
Canvas
ビジュアル方向性を比較して、デザイン上に直接フィードバックをアノテーションしましょう。
データベースを追加する
リフレッシュ後もフォームデータを保持しましょう。
ログインを追加する
認証でプライベート画面を保護しましょう。
カスタムドメインを追加する
レビュアーがアプリを試せるパブリック URL を設定しましょう。
チームワークスペースでコラボレーションする
チームメンバーをインポートされたアプリに招待して一緒にビルドしましょう。