グラフィックデザイン · COURSE
Figma Variables の一括書き換え
ブランド刷新で 1,000 件のトークンを 1 時間で再マップ。
audience
デザインシステム担当
duration
50分
lessons
5 章
reviewed
2026.05
先に読むとよい
達成目安
全 5 レッスンを読み、コース完了マークを付ける
未完了
クイズ 3 問に挑戦し、正答率 80% 以上
未挑戦
コース構成
このコースで学ぶこと
- 01
Variables が増えるとリブランド地獄になる
色・タイポ・スペースが Variables 化されていると便利だが、リブランド時に手で書き換えるのは現実的でない。命名と一括変換が要。
- primary/500 → brand/accent のようなリネームが頻発
- 値（カラーコード）の一括差し替え
- ライブラリ間の参照切れチェック
- 02
現状の Variables を JSON でエクスポート
Figma の公式 REST API、または Variables プラグインで JSON を吐く。Claude が読みやすい形にしておくのがコツ。
json{ "color/primary/500": "#3B82F6", "color/primary/600": "#2563EB", "space/4": "16px", "space/6": "24px" }手を動かす
0 / 3
- 03
リネーム / 値変更プロンプト
JSON を渡して『以下のルールで書き換え後 JSON を返して』と頼む。差分も同時に出してもらうとレビューが楽。
text次の Figma Variables を、以下のルールで書き換えた JSON と diff を出力して： - color/primary/* → color/brand/* - #3B82F6 → #FF5A1F - space/* の値は 4px 刻みのまま、命名のみ size/* に変更出力イメージClaude の返答（書き換え diff・要約）- "color/primary/500": "#3B82F6", + "color/brand/500": "#FF5A1F", - "color/primary/600": "#2563EB", + "color/brand/600": "#FF5A1F", - "space/4": "16px", + "size/4": "16px", …（変更 1,000 件 / 値変更 412・リネームのみ 588）
- 04
差分レビューと安全な反映
Claude の出力をそのまま Figma に流し込むのは危険。差分を 1 件ずつ確認し、ライブラリ参照の切れを検知する。
手を動かす
0 / 3
- 05
Skill 化と運用
リブランドだけでなく、季節キャンペーン用に Variables を一時的に切り替える運用にも応用できる。
- 通常 / 春 / 夏 / 冬 の 4 セットを JSON で保持
- Claude が切り替え用 diff を生成
- デザインシステムの README に運用フローを記載
理解度チェック
Q1.Figma Variables を AI で一括書き換えするときの安全運用は？
Q2.Figma Variables 一括書き換え Skill の主目的はどれか？
Q3.Variables 書き換え Skill の入力として最も自然なのは？