Figmaのデザイン情報をスプレッドシートで効率的に管理する（GAS&生成AI活用）
Figma、GoogleスプレッドシートどちらもWeb制作の現場でよく使われるツールです。
どちらもとっても便利なツールですが、情報整理を進めて行くと、互いの情報を双方向に連携させたくなることがあります。調べてみるとスプレッドシートからFigmaにデータを送る方法には便利なプラグイン（Google Sheets Sync）がありました。
一方で、Figmaのデータをスプレッドシートに反映する方法はあまり見つけられませんでした。そこで、GAS（Google Apps Script）を使ってFigmaのデザインデータをスプレッドシートに反映させるスクリプトを作成してみました。
デザインの仕様などを直接デザインデータ側に書き込むのではなく、スプレッドシートを使ってデザインデータを参照しつつ情報を整理したい場合などで活用いただけます。
また、GoogleのGeminiやOpenAIのAPIを使ってデザインデータへの質問やデザインデータから文章生成、コード生成なども可能にしてみました。
gas-figma2sheetについて
gas-figma2sheet を利用すると以下3つの機能が利用できます。
- Figmaのデザインデータを スプシに同期・挿入
- Figmaのデザインデータから 生成AIでHTML作成
- Figmaのデザインデータの Q&AをAIを介して行う
gas-figma2sheetの初期設定
このスクリプトを利用するには以下の設定が必要です。
Figmaの個人アクセストークンの取得
Figmaの個人アクセストークンの取得
Figmaアカウントアイコンから「設定」を選択し、「個人アクセストークン」のセクションで発行できます。
Figmaファイルキーの取得
Figmaファイルキーの取得
FigmaファイルURLから取得できます。たとえば、URLがhttps://www.figma.com/design/xxxxxxxxxxxx/の場合、キーはxxxxxxxxxxxxです。
Web版を利用いただくとURLから取得しやすいです。
Googleスプレッドシートの作成
Googleスプレッドシートの作成
Figmaと紐付けたいスプレッドシートを作成します。スクリプト実行環境のセットアップには2つの方法があります。
- シートをコピーして利用
- コマンドベースでローカルからスクリプトを設置
1. シートをコピーして利用
1の方法で実施する場合は、以下スプレッドシートを開いて「ファイル」→「コピーを作成」から複製してください。
2. コマンドベースでローカルからスクリプトを設置
スプレッドシートを作成した後、スクリプトエディタを開いてスクリプトIDを取得します。
プロジェクトのREADMEを参照の上、デプロイを行ってください。
スクリプトプロパティの設定
スクリプトプロパティの設定
最後に事前に取得したトークン情報などをスクリプトプロパティに環境変数として設定します。
スプレッドシートで「拡張機能」→「Apps Script」を展開します。
左サイドバーから「プロジェクトの設定」を選択し、スクリプトプロパティのセクションで以下を登録します。
-
FIGMA_API_TOKEN: あなたのFigmaパーソナルアクセストークン -
FIGMA_FILE_KEY: インポートしたいFigmaファイルのキー
AI関連の設定
AI関連の機能を利用する場合はGoogleもしくはOpenAIでAPIキーを取得してください。
-
GEMINI_API_KEY: Google Gemini APIキー（Geminiのモデルを利用した生成処理では必須） -
GEMINI_MODEL: Google Geminiモデル（デフォルト: gemini-1.5-flash） -
OPENAI_API_KEY: OpenAI APIキー（OpenAIのモデルを利用した生成処理では必須） -
OPENAI_MODEL: OpenAIモデル（デフォルト: gpt-4o-mini）
gas-figma2sheetの利用方法
カスタム関数、カスタムメニューを利用してスクリプトが実行できます。
FigmaのノードIDについて
スクリプトはFigmaのノードIDを指定して実行します。
ノードIDとは、Figmaファイル内で対象のデザインを特定するために利用するIDです。
このIDはFigma URLから取得できます。URLのnode-id=x-xの部分がノードIDです。
https://www.figma.com/design/[file_key]/[file_name]?node-id=x-x
ノードIDは0:1のような形式で指定します。
Figmaのデザインデータを スプシに同期・挿入
デザインデータをスプレッドシートに表示したい場合に利用します。
カスタムメニューとカスタム関数の2パターン利用できます。
カスタムメニューでの画像挿入
カスタムメニューでの画像挿入
カスタムメニューから「Figmaから画像を挿入」を実行すると対象のデザインデータをシートに画像を挿入します。カスタムメニューを利用した場合では画像がシート上に挿入されます。ただし、同期はされていません。
カスタム関数での画像挿入
FIGMA_IMAGE_URL関数
FigmaノードIDを指定して、画像URLを取得します。
=FIGMA_IMAGE_URL("node-id")
IMAGE関数と組み合わせることで、画像を表示できます。
=IMAGE(FIGMA_IMAGE_URL("node-id"))
Figmaのデザインデータから 生成AIでHTML作成
FigmaのデザインデータからHTML、CSS、JavaScriptを生成できます。標準の出力はHTMLファイルにインラインで出力した形式になります。こちらもカスタムメニューとカスタム関数の2パターン利用できます。
カスタムメニューでのHTML生成
実行すると対象のセルにHTMLが生成されます。追加でCSS設計などプロンプトの指示を入れることもできます。
カスタム関数でのHTML生成
FIGMA_HTML関数
カスタム関数は以下のようにHTMLを生成します。
=FIGMA_HTML("node-id")
第2引数にpromptを指定することで、追加指示を入れることができます。
=FIGMA_HTML("node-id", "CSS設計はFLOCSSにしてください。")
Figmaのデザインデータの Q&AをAIを介して行う
Figmaのデザインデータに対して質問ができます。Google GeminiやOpenAIを利用して質問を行うことができます。QAはカスタム関数でのみ利用できます。
カスタム関数でのQA
FIGMA_QA関数
FigmaノードIDを指定して、デザインデータをベースに質問が行えます。
第2引数に質問内容を記載します。
=FIGMA_QA("node-id", "デザインのフィードバックをお願いします。")
まとめ
Figmaのデザインデータをスプレッドシートで管理することで、デザイン情報を効率的に管理できることを目指しています。また、AIを活用することでデザインデータを起点とした情報整理を行うことができます。QA機能は汎用性高く利用できる機能ですので、ぜひ活用してみてください。
Discussion