機能的なプロトタイプやWebアプリのコードを直接Figma Makeで編集したいとき、Figma Makeはファイルのコンテキスト内で軽量エディターを提供します。
コードエディターにアクセスするには、Figma Makeファイルの上部にある[コード]をクリックします。
Figma Makeには、コードを操作するための機能がいくつか用意されています。
- Figma Makeが生成したコードを変更したり、独自のコードを記述したり、インポートしたりすることができるコードエディター。行った変更やエディターに貼り付けた内容をフォーマットすることもできます。
- 機能的なプロトタイプやWebアプリのファイルエクスプローラーにあるすべてのファイルを含め、コードをダウンロードする方法。
- Figma Makeによって作成されたファイルを移動するために使用するファイルエクスプローラー。ファイルエクスプローラーで独自のファイルを作成することはできませんが、Figma Makeにファイルを作成させることはできます。
- Figma Makeが機能的なプロトタイプまたはWebアプリのコードを生成する際に従うガイドラインを追加するための場所。詳細については、「Figma Makeにガイドラインを追加する」をご覧ください。
コードを編集する
コードエディターでは、ファイルエクスプローラーに存在するファイルを直接変更することができます。ファイルエクスプローラーでは、機能的なプロトタイプまたはWebアプリのメインファイルであるApp.tsxがデフォルトで選択されています。
既存のコードを編集したり、独自のコードを記述したり、コードをエディターに直接貼り付けたりすることができます。
コードの変更を元に戻す
コードに変更を加えると、Figma Makeは変更のチェックポイントを作成します。コードの変更を元に戻して、会話の最後のステップのファイルバージョンに戻すことができます。
ファイルへの変更を元に戻すには、AIチャットで、元に戻したいファイルの横にあるをクリックします。
コードをフォーマットする
コードをフォーマットするには、CMD + S(Mac)またはCTRL + S(Windows)を押すか、コードエディターの右上にある[コードのフォーマット]をクリックします。フォーマットを行うと、Figma Makeはコードを整え、行の配置やインデントを修正します。
自分のコードをダウンロードする
Figma Makeファイル内のすべてのファイルを含む.zipファイルをダウンロードするには、コードエディターの右上にある[コードをダウンロード]をクリックします。
ファイルを探す
コードエディターの左側にあるファイルエクスプローラーでフォルダをクリックして展開すると、ファイルを選択することができます。ファイルを選択すると、ファイルのコンテンツがコードエディターに表示されます。
ファイルエクスプローラーでファイルを作成または削除することはできません。ファイルエクスプローラーに新しいファイルを追加したい場合は、AIチャットでFigma Makeにプロンプトを送信してください。例:「テンプレートコードを含むToolbar.tsxファイルを追加してください。」