はじめに
みなさんこんにちは。インプルの岩崎です。
今回はこれまでやってきたデザインチェックの最終盤、AIとJSONファイルから情報を抽出したデザインチャッカーを作っていきたいと思います。前回２回分をまだ見ていない人がいたら、ぜひご覧ください。
これまでのデザインチェッカー
Figma API → JSONファイル → Pythonでのデザインチェック
こちらはFigmaからコンポーネント情報を抜きとり、JSONファイル化されたものをPythonのプログラムで比較し、差分をレポートするというものでした。しかし、この方法では、コンポーネントの情報しかひっぱてこれないため、コンポーネントに登録されていないデザイン情報は差分として検出できないのが課題でした。
Figma API → PNGファイル → マルチモーダルAIでのデザインチェック
こちらはFigmaからPNGファイル（画像データ）として情報を抜き取り、マルチモーダルモデルであるGPT-4o-miniを使って比較し、デザイン差分を検出するというものでした。この方法では、デザインガイドラインとデザインカンプをAIが分析・ルール化をして情報をまとめていくので、これまでのやり方よりは格段とさまざまなチェックができるようになりました。
しかし、人間の目で見てやるのと同じようにできる反面、実際のフォントサイズやどのようなフォントが使われているかには弱く、その点は不明と判定されてしまう課題があるのでした。
今回つくるもの
冒頭の「はじめに」でも触れたように、今回はこの２つのデザインチェックのメリットを取り合って、ハイブリット型のデザインチェックを作りたいと思います。
先ほどのデザインチェックの振り返りでも述べたように、マルチモーダルAIによるデザインチェックは非常に優秀でしたが、フォントの種類やサイズを抜き出すのは不得意でした。そこに、JSONデータによる情報を捕捉することで完璧なデザインチェッカーができるのではないでしょうか？
| JSON + Python | PNG + AI | |
| ガイドライン検出 | × | ○ |
| 柔軟な検出 | × | ○ |
| 色 | ○ | ○ |
| フォント種類 | ○ | △ |
| フォントサイズ | ○ | × |
準備
必要なもの（これまでと一緒）
まず、今回は次のものを使うので準備していきましょう。この辺りは前回の記事と一緒ですので、同じものを置いておきます。
取得できたら、下記のように.envファイルにまとめておきます。
FIGMA_TOKEN=figd_XXXXXXXX #Figma Tokenの取得
FILE_KEY=XXXXXXX #FigmaのファイルIDの取得
OPENAI_API_KEY=sk-proj-XXXXXXXX #OpenAPIキーの取得Figma Tokenの取得
下記リンクより、Figma Personal Access Token を発行します。
FigmaのファイルのID取得
下記URLのように、FILE_IDの部分の文字列を抽出します。URLでは figma.com/file/FILE_ID としていますが、fileの部分は、デザインファイルの場合design、FigJamの場合はboard、など違いますので、ご注意ください。
https://www.figma.com/file/FILE_ID/Your-Design-NameOpenAPIキーの取得
OpenAIのAPIキーも準備しましょう！
プログラムの中身
今回は、以下の手順で処理を考えています。
1. Figma Tokenを使ってJSONファイル + 画像ファイルを書き出し
↓
2. JSONファイルからテキストに関わる情報を書き出し
↓
3. GPTでデザインガイドライン情報を抽出
↓
4. Figma APIからフォント情報を取得
↓
5. GPTでデザインカンプ情報を抽出（Figma API情報付き）
↓
6. GPTに差分チェック依頼
↓
7. 差分レポート（マークダウン）ファイル出力基本的には、いままでやってきたことをまとめればいいだけですが、今回はデザインカンプ側にフォント情報を持たせた上でGPTに処理してもらいます。そこがうまくいけばいいのですが、どうなるやら・・・。
次から今回のハイブリット処理で追加されるプログラムを紹介します。
フォント情報の抽出
まずは、FigmaTokenを使ってJSONファイルを書き出す部分です。
font_info = {}
def traverse(node):
if node.get("type") == "TEXT":
text = node.get("characters", "")
style = node.get("style", {})
font_size = style.get("fontSize", "unknown")
font_family = style.get("fontFamily", "unknown")
if text and text.strip(): # 空文字でない場合
font_info[text] = {
"fontSize": font_size,
"fontFamily": font_family
}
print(f"📝 テキスト発見: '{text}' → フォント: {font_family}, サイズ: {font_size}")
elif node.get("type") == "INSTANCE" or node.get("type") == "COMPONENT":
# インスタンスやコンポーネント内も探索
pass
# 子ノードを探索
for child in node.get("children", []):
traverse(child)
try:
traverse(data["document"])
print(f"📊 総テキスト数: {len(font_info)}")抜粋ですが、この部分がFigmaTokenでJSONファイルを取得した後、フォントサイズを抜き出してくる部分になります。
font_info という部分で、抜き出したフォント情報を持たせます。取得した各テキスト要素のフォント情報（サイズとファミリー）を辞書形式で保持している変数です。
デザインカンプの処理
続いて、デザインカンプから情報を抽出する部分です。
print("🎨 Step3: デザインカンプ抽出中...")
try:
design_img = encode_image("design.png")
design_prompt = f"""
この design.png からセクションごとに要素を抽出し、以下のJSON形式で出力してください。
**重要**: 以下のFigma APIから取得したフォント情報を参考にして、正確なfontSizeとfontFamilyを設定してください。
### Figma APIから取得したフォント情報:
{font_info}
### 出力形式:
・・・プロンプトの中に先ほどの {font_info} の変数を組み込み、GPTに処理させています。これにより、マルチモーダルAIが全体を解析し、わからないフォント情報は {font_info} から補足できる、という形を作ることができます。
実行する
それでは、ハイブリットの仕組みを整えることができたので、これを実行していきましょう！
差分を出してもらうデザインガイドラインとデザインカンプは、相変わらず使い回しのこちらのデザインたちです。
早速Pythonファイルを実行させると、FigmaAPI経由でフォント情報を取得することができています。ターミナルに取得された情報がずらずらと並んでいました笑。
（AIにコード作らせると、こういうログまで作ってくれるのが、UX的にはいいですね笑）
その後、フォント情報を全て取得しきり、デザインカンプの情報を抽出、差分チェックをし、差分レポートまで出力してくれました。差分検出などで数十秒ほど時間はかかりましたが、1分程度で差分レポートを作ってくれたので、スムーズにここまで実行することができました。
こちらが出来上がった差分レポートです。
社名のロゴ（フォント）や、ボタンのフォント情報など、デザインガイドラインに記載されていない情報もあり、その部分はN/Aと表示されました。その部分は、ガイドラインに記載されていない情報として、差分に記載があります。
できればもう少し情報量を多く載せてほしかったですが、その辺りはプロンプト調整となりそうですね。デザインチェッカーはさまざまなデザインを見るものですから、今後、プロンプト調整も必要になりそうです。
ちなみに、差分レポートは $0.02 = 3円 ほどで、差分の検出までやってくれました。シンプルなものだったので、そこまで負担がかからなかったのもあるかと思いますが、安いコストでできるのは、素晴らしいですね！
さいごに
いかがだったでしょうか。これで完璧なデザインチェッカーができましたね！
もちろん、まだまだプロンプトの調整や、複雑なデザイン物の読み取り、デザインガイドラインの量は増えた時など・・・さまざまなパターンを想定しなければいけませんが、まずはミニマムなモデルとして、素敵なものが出来上がったのではないかと思います！
コードはこちらのGitHubに入っていますから、気になる方はぜひ見てください。
ご覧いただき、ありがとうございました！