Figma Use

figma-use は、use_figma を呼び出す前に毎回インストールしておくことで、Figma のファイルコンテキスト内で JavaScript を安全に実行できるようにするスキルです。ノードの作成・編集、変数やスタイルの接続、コンポーネントやバリアントの構築、ファイル構造のプログラム的な निरी査といった、デザイン実装作業を支援します。リポジトリには、よくある Figma 自動化エラーを減らすための使い方、注意点、パターンがまとめられています。

figma-generate-design は、公開済みのデザインシステムを使って、コード化されたページ、モーダル、ドロワー、サイドバー、パネルなどの複数セクション画面を Figma へ落とし込むのに役立ちます。Code Connect や関連ソースからコンポーネント、変数、スタイル、ライブラリアセットを見つけ、画面全体を一から描き直すのではなく、Design Implementation 向けにセクションごとに組み立てます。コードやトークンとの忠実性を重視して Figma 画面を作成したいときは、figma-generate-design ガイドを使ってください。

figma-create-new-file は、ドラフトに新しい空の Figma または FigJam ファイルを作成し、エディタ種別とファイル名の既定値を設定します。この figma-create-new-file スキルは、デザイン実装、迅速なプロトタイピング、use_figma を使う前に新しいキャンバスを用意する作業に役立ちます。必要に応じて whoami を使った planKey の解決も行います。

figma-implement-design は、Figma の画面をリポジトリ内で本番投入可能なコードへ変換するスキルです。レイアウト、状態、トークン、レスポンシブ挙動まで含めて、見た目の再現性を高く保つことを狙います。Figma の編集、code connect のマッピング、新規デザイン生成ではなく、Figma-to-code 実装に使ってください。Design Implementation ワークフロー向けの導入手順、使い方の注意点、適用範囲のルールが含まれています。

figma-generate-library は、コードベースを tokens、variables、components、theming、documentation を備えた Figma の design system library に変換するのに役立ちます。Design Systems の作業で、install、setup、discovery、creation、validation、code との reconciliation まで含む段階的なワークフローが必要なときに、この figma-generate-library スキルを使います。

figma-generate-design は、実際の画面・ページ・複数セクションのレイアウトを、汎用的な図形ではなく公開済みのデザインシステムを再利用しながら Figma に落とし込むのに役立ちます。コードやプロダクトページとの高い整合性、編集しやすい構造、トークンベースの一貫性を重視する場合に最適です。ラフなモックアップではなく、フルページの UI デザイン更新に使ってください。