Figmaの作業履歴を残す方法：デザイン変更を記録しCodex MCPで活用する

ひとことで言うと： FigmaファイルをSnapsideに接続すると、最近のバージョンと今後の更新を比較し、デザイン変更を読みやすいタイムラインとして残せます。CodexはSnapside MCP経由でその履歴を読み、変更内容を根拠付きで実装計画やコーディングに活用できます。

SnapsideのFigma連携が正式に利用できるようになりました。

Figmaは「現在の完成形」を見るには優れています。一方で、そこに至るまでの変化は見えにくくなりがちです。フレーム幅を広げた、Auto Layoutの間隔を変えた、エラー色を調整した、文言を移動した。数日後には最終画面は見えても、その途中で何が変わったのかをチーム全員が説明できるとは限りません。

SnapsideはFigmaのバージョン別JSONスナップショットを比較し、その変化をデザイナーと開発者が読めるプロダクト履歴に変換します。

Figmaの作業履歴とは？

Figmaの作業履歴は、単なるサムネイル一覧ではありません。ある時点のファイル構造と値を次の状態と比較し、デザイン上の差分を記録したものです。

ファイルを接続すると、Snapsideは比較の基準となるスナップショットを保存し、アクセス可能な過去30日分のバージョンを時系列で比較します。名前を付けたバージョンだけでなく、Figmaがversion IDとJSON状態を提供する名前のないバージョンも対象になります。

Figma公式のバージョン履歴APIではアクセス可能なファイルのバージョン一覧を取得でき、ファイルAPIでは特定バージョンのドキュメント構造をJSONで取得できます。Snapsideはこの2つを組み合わせ、「バージョンが存在した」だけでなく「何が変わったのか」を残します。

Snapsideが記録するデザイン変更

現在はページと最上位レイヤーを中心に、次の変更を比較します。

• ページ・レイヤーの追加と削除
• レイヤー名と並び順
• X/Y位置、幅、高さ
• Auto Layoutの間隔と上下左右のパディング
• 表示・非表示
• 塗りと線
• テキストとフォント関連の値

最初の状態はデザインスナップショットとして記録されます。比較元ができた後の差分はデザイン変更になります。初回取得を、その時点で行われた編集のように見せないための区別です。

架空のデータを使いReactで作成したイメージです。実際のタイムラインには、明示的に接続したファイルの変更が表示されます。