figma-code-workflows

プロジェクトを Figma にインポートする

このワークフローは、Figma への出力（単独の Code/Make、実行可能な Code Layer、編集可能な Design レイヤー）が明示的に依頼された場合、または保存先として Figma ファイルのキー／リンクが指定された場合にのみ使用してください。一般的な「コードプロジェクトを作成して」や「コードコンポーネントを作成して」という依頼、および Figma Code/Make の名称だけでは、出力先は指定されていません。出力の意図が不明な場合は、ローカルコードと Figma への出力のどちらを希望するかを尋ねてから、このワークフローを開始せずに待ってください。

ユーザーのプロジェクトを維持してください。前提条件とパラメーターについては、各ツールの現在の説明とスキーマを使用してください。

プロジェクトの準備と検証、アーカイブのアップロード、Figma でのインポート完了といった主な段階で、ユーザーに進捗を知らせてください。インポートの保留、復旧作業、ブロッカーが発生したら、その都度報告してください。確認されていない段階を完了したと説明しないでください。

1. 出力と保存先を選択する

ユーザーが希望する出力を特定し、以下の表に従って適切なスキルを読み込んでください。出力が不明な場合は、先にユーザーに確認してください。

入力	ユーザーが希望する出力	次のアクション
実行中のアプリまたは静的 HTML	未指定 — Figma に配置／インポートするだけ	**「編集可能なデザインレイヤーとコードレイヤーのどちらを希望しますか？」と尋ね、そのターンを終了してください。**回答を待ってください。
実行中のアプリ	編集可能な Design レイヤー	figma-generate-design を読み込んでから、Design ファイルで generate_figma_design を呼び出してください。
静的 HTML	編集可能な Design レイヤー	Design ファイルで html_to_figma を呼び出してください。
実行中のアプリ	実行可能な Code Layer または単独の Code/Make	このスキルの手順に従い、send_code_to_figma を呼び出してください。
静的 HTML	実行可能な Code Layer または単独の Code/Make	このスキルの手順に従い、send_code_to_figma を呼び出してください。

ボタンが機能する HTML プロジェクトであっても、ユーザーが出力を選んでいなければ、意図は不明です。Design リンクは保存先を指定するだけで、出力は指定しません。

実行可能な出力先を選ぶ前に、whoami を呼び出してください。Design Code Layer を選択またはインポートできるのは、whoami.code_layers_enabled が true の場合のみです。それ以外の場合は単独の Code/Make を使用するか、明示的に指定された Design 保存先を変更する前に、制限を説明してユーザーに確認してください。

画面数のヒューリスティックを適用する前に、明示的なコードレイヤーまたは単独出力の依頼を優先してください。実行可能なコードで Design リンクが指定されている場合は、Code Layer を使用してください。単独の Code リンクが指定されている場合は、単独出力を使用してください。保存先が指定されておらず、コードレイヤー／単独出力の明示的な選択もない場合は、画面数を推定します。10 未満または不明の場合は Code Layer、10 以上の場合は単独出力を使用してください。Code Layer と単独出力のどちらにするかを尋ねたり、画面数を数えるようユーザーに求めたりしないでください。出力を選択した後は、明示的に指定された保存先とリンクを優先してください。

指定されたファイル URL を使用してください。新しいファイルが必要な場合は、選択した保存先の種類とユーザーが選んだプランを指定して create_new_file を使用してください。

保存先が指定されていない状態でコードレイヤーが依頼された場合は、Design ファイルを作成してください。

確定した出力の選択は変更せず、ファイルを作成した後にユーザーへ再選択を求めないでください。

編集可能な Design レイヤーの場合は、選択したツールの指示に従ってください。generate_figma_design は実行中のアプリのレンダリング済みページをキャプチャし、html_to_figma は自己完結型の静的 HTML ドキュメントを変換します。生成されたレイヤーを確認し、Design リンクを共有してください。実行可能なコードの出力の場合のみ、以下に続けてください。

2. インポート応答に従う

現在のスキーマを使用して、選択したローカルソースと宛先を指定し、send_code_to_figma を呼び出します。返された準備とアーカイブの手順に従い、指示された場合は、アップロードする前にアプリを保持してローカルで検証します。

準備、検証、アップロード、保留中のインポート、セットアップの復旧について、各応答の指示と返された nextStep に正確に従います。先に進む前に返された前提条件を満たし、完全な継続引数を変更せずに渡します。復旧手順が欠けている場合、独自に補ってはいけません。nextStep がない場合は、応答の指示とツールの現在の説明に従います。

返されたファイル／レイヤーのリンクを添えて完了し、結果によって確認されたインポートとプレビューの成否のみを報告します。