はじめに
みなさんこんにちは。インプルの岩崎です。
ここ最近Devinの記事ばかり作成していましたが、本日は別のテーマです笑
デザイナーの皆さんはご存知かもしれませんが、デザインツールのFigma、みなさん使ったことありますか！？
画面デザインをする際には重宝するアプリケーションですよね。そのほかにも、ホワイトボードのような機能があったり、スライドの機能があったりと、優れもののツールですよね！
今回はこのFigmaを使って、とあることをしてみたいと思います。
デザインファイルをJSON化して、デザインチェック！
デザイン経験者ならわかると思いますが、多くのデザイン物では、タイトルや本文、色合いをあらかじめ決めておき、それにならってデザインをすると思います。（デザインガイドラインと言ったりします。）
最後、これらのチェックをするわけですが、その際に自動化ができたらすごい便利ですよね。そこで今回は、Figmaのデザインファイルで使用されているスタイル情報を、API経由で取得しJSONファイル化します。そのファイルを使ってデザインのチェックをしてみよう、というわけです。
今回は、ガイドラインに定義されているスタイルがちゃんと使用されているかどうかをチェックしたり、定義されていないスタイルが使用されているかどうかをチェックしていきます！
準備しよう！
Figmaの準備
まずはAPIで取得するデザインファイルを作っていきましょう。今回は次の二つが必要です。
・デザインガイドライン
・デザインされたファイル
両方ともすでにお手元にある場合は、この過程を飛ばしてもらっても構いません。私は特に準備をしていなかったので、早速準備します。といっても、うまく差分が出せているかどうかをみたいので、簡単なものを準備しました。
左側にデザインガイドライン、右側にデザインカンプを用意しました。
デザインガイドラインには、色やフォントの情報をスタイルとして登録してあります。デザインカンプも、色やフォントをスタイルとして登録させてありますが、デザインガイドラインには定義されていないストイルなので、この後の判定ではエラーが出るようになっているというわけです。
ここでの注意点としては、デザインをスタイルに登録させる、という点です。
今回の実践では、先ほどもお話ししたように、ガイドラインに定義されているスタイルがちゃんと使用されているかどうかをチェックしています。なので、使用しているフォントやカラーはスタイルに登録するようにしましょう。
取得するJSONファイルでのチェックは、スタイルの部分を見て判定を出しますので、皆さんが見ているデザインガイドラインそのものを読み取って判定しているわけではありません。ですから、AIなどを使ってそれが読み取れるようになったら、さらに判定の精度は上がると思います。今後の課題ですね。
.envファイルの準備
続いて、FigmaのデザインファイルからJSONファイルを取得しましょう。そのために、.envファイルへ次の二つを準備します。
・figmaデザインファイルのURL
・figma token
まず最初にfigmaのデザインファイルのURLを取得します。
といっても、URLの一部分だけがあればOKです。例えば、以下のようなURLがあったとしたら、figma.com/design/ABCDEFG-HIJKLMN/XXXX・・・の部分を抜き取ります。
https://www.figma.com/design/<span class="marker">ABCDEFG-HIJKLMN</span>/XXXXXXXXXXXXX続いて、figma tokenを取得します。
こちらは簡単で、Figma Developer Settingsへアクセスしtokenを取得します。以下のURLよりアクセスし、「Personal Access Tokens」 → 「Generate new token」でtokenを取得してみてください。
それぞれ二つの取得ができましたら、以下のように.envファイルへ格納してください。
.envファイルの中身
FIGMA_TOKEN=<span class="marker">ABCDEFG-HIJKLMN-TOKEN</span>
FIGMA_FILE_ID=<span class="marker">ABCDEFG-HIJKLMN-URL</span>JSONファイルの取得
下記のPythonファイルでJSONファイルを取得します。
注意点としては、デザインガイドラインもデザインカンプも、同じファイルでJSONファイルを取得することができるのですが、書き出す際にファイル名の指定を変えていないと、上書きされてしまいます。なので、# 書き出し先ファイルの部分は、ファイル名を変更しておくように、注意してください。
import os
import requests
import json
from dotenv import load_dotenv
load_dotenv()
FIGMA_TOKEN = os.getenv("FIGMA_TOKEN")
FILE_ID = os.getenv("FIGMA_FILE_ID")
headers = {
"X-Figma-Token": FIGMA_TOKEN
}
url = f"https://api.figma.com/v1/files/{FILE_ID}"
response = requests.get(url, headers=headers)
if response.status_code == 200:
figma_data = response.json()
# 書き出し先ファイル
output_path = "figma_file_output.json" # ガイドラインとデザインカンプを出力する際にファイル名を変更
with open(output_path, "w", encoding="utf-8") as f:
json.dump(figma_data, f, ensure_ascii=False, indent=2)
print(f"✅ JSONファイルとして保存しました: {output_path}")
else:
print("❌ Error:", response.status_code, response.text)この書き出しができれば、準備は完了です！
デザインチェックをしてみる
それでは、書き出されたJSONファイルを使って、デザインの比較をしてみましょう！
# === ガイドラインスタイル一覧（色とテキスト） ===
defined_color_styles = {}
defined_text_styles = {}
for style in guideline_data.get("styles", []):
if "style_type" not in style:
continue # スキップ
if style["style_type"] == "FILL":
fill_styles[style["node_id"]] = style["name"]
elif style["style_type"] == "TEXT":
text_styles[style["node_id"]] = style["name"]
# === カンプで使用されているスタイルID（色・テキスト）を再帰的に抽出 ===
used_color_styles = set()
used_text_styles = set()
def collect_styles(node):
styles = node.get("styles", {})
if "fill" in styles:
used_color_styles.add(styles["fill"])
if "text" in styles:
used_text_styles.add(styles["text"])
for child in node.get("children", []):
collect_styles(child)
for page in camp_data.get("document", {}).get("children", []):
collect_styles(page)
# === 差分を抽出 ===
undefined_colors = used_color_styles - set(defined_color_styles.keys())
undefined_texts = used_text_styles - set(defined_text_styles.keys())
unused_colors = set(defined_color_styles.keys()) - used_color_styles
unused_texts = set(defined_text_styles.keys()) - used_text_stylesこの部分で、デザインガイドラインとデザインカンプでスタイルを抽出し、差分を出しています。
これを実行してみると、以下のような結果のmdファイルが書き出されました。
このように、定義されていないデザインのスタイルが使用されていたので、しっかりとエラーが出ました。逆に、今回は登録された全てのスタイルを使用していたので、使用されていないスタイルに関しては、全て使用されていると出てきました。
簡易的なチェッカーではありますが、無事に動作できました！
さいごに
いかがだったでしょうか？
これでデザインチェックの手間がグンと減ったのではないかと思います。
一方で、URL、tokenの取得といった手間や、スタイルからでしか判定できない悩ましさはあります。そこは、AIなどを活用してスタイルチェックができるようになると、さらに手間が減りそうです。今後の課題として、チャレンジしてみたいと思います！
今回作成したファイルはGitHubにもありますので、ぜひご覧ください。
ご覧いただきありがとうございました。