最適な用途
- すでに持っているフレームから、コード化されたReplitアプリが必要なプロダクトデザイナー。
- Figmaファイルを持っていて、白紙から作り直さずにライブ化したい創業者。
コネクタ
始める前に
名前が付けられたフレーム(ホーム、商品、チェックアウトなど)を含むFigmaファイルを 用意してください。Figmaを接続します。ファイルをAgentと共有するか、ファイルのリンクと 対象となるフレームのリンクを貼り付けてください。マーケティングサイトなのか、アプリ なのか、単一のランディングページなのかを伝えてください。エージェントへの指示
期待できること
Agentは選択されたフレームを読み込み、Replitから公開できる対応ページを構築します。 余白、タイポグラフィ、カラーをFigmaと照合して抜き取りチェックしてください。ナビゲーション、 フォーム、ホバーなどのインタラクティブな部分は自分で確認してください。多くの場合、追加の 調整が必要です。デスクトップとスマートフォン幅でプレビューしてください。ナビゲーションと フォームをクリックし、公開前にスクリーンショットをFigmaと比較してください。自分に合わせてカスタマイズする
トラブルシューティング
- Agentがファイルを読み込めない: Figmaを接続し、ファイルを共有した上で、ファイルのURLだけでなくフレームのリンクを貼り付けてください。ファイルに複数のフローがある場合は、フレームに名前を付けて(ホーム、商品、チェックアウトなど)伝えてください。
- ホバー、ナビゲーション、フォームが未完成に感じる: レイアウトとカラーが先に完成することが多いです。インタラクティブな部分については追加の調整を依頼し、余白をFigmaと照合して抜き取りチェックしてください。
関連情報
ランディングページをデザインする
Notionのブリーフから、まずフレームが必要なプロダクトデザイナー向けです。
オンラインストアを構築する
次にShopifyストアフロントが必要な創業者やプロダクトデザイナー向けです。