始める前に
以下が必要です。- Replitアカウント。
- Figma アカウントと、インポートしたいファイル（または上記のサンプルファイル）。
Figmaフレームをインポートする
フレームをReplit Designに取り込み、Agentに動作するデザインへと変換させましょう。1
Figmaフレームのリンクを取得する
自分のFigmaファイルを使うか、このガイドの例であるFigma Communityの Personal Fitness Trainer Template に沿って進めます。Figmaで、インポートしたいフレームを右クリックし、Copy/Paste as を選んで Copy link to selection を選択します。
Figmaで開いたPersonal Fitness Trainer Template。これからインポートするCoverフレームが表示されている。
2
Replit Designを開く
replit.com/design にアクセスし、プロンプトボックスの下にある Import Figma を選択します。
Replit DesignのホームにあるImport Figma: Figmaフレームを取り込み、Agentが動作するデザインに変換します。
3
URLを貼り付けて構築を始める
Import Figma design ダイアログにフレームのURLを貼り付け、Attach to prompt を選択します。フレームがプロンプトに添付されるので、送信して構築を開始します。
フレームのURLを貼り付けて、プロンプトに添付する準備が整ったImport Figma designダイアログ。
インポートされたPersonal Fitness Trainerのランディングページが、Replit Designのフレームになった状態。
自分好みにする
インポートされたフレームを選択して、形を変えていきましょう。- 提案に従う: インポート時には次のステップの候補が提示されます — 例えばダークなエディトリアル系のバリアント、価格セクション、モバイルビューポートなど。それぞれが新しいフレームとして生成されるため、元のフレームは比較用に残ります。
- チャットで相談する: フレームの下にある入力欄を使い、自分の言葉でブリーフします。例えば 「ヒーロー画像を差し替えて」、「Call to Actionをもっと大胆にして」 のように。
インポートされたフレームが選択され、ダークなエディトリアル系のバリアント、価格セクション、モバイルビューポートを提案するカードが表示されている。
次のステップ
提案を探る
ワンクリックずつ、次に何をデザインすべきか探ります。
ビジュアルエディター
テキスト、色、スペース、画像を直接磨き上げます。
デザインを構築する
完成したフレームを動作するアプリに変換します。