フロントエンドエンジニアの皆さん、あるいはエンジニアと協業しているデザイナーの皆さん。日々の開発フロー（Handoff）で、こんなやりとりに疲弊していませんか？
- 👨💻 エンジニア: 「Figmaのデザインが更新されたみたいだけど、具体的にどこが変わったの…？（差分を探して画面をウロウロする）」
- 🎨 デザイナー: 「えっと、ボタンの余白を少し広げて、テキストの色を新しいTokenに変えて…（思い出しながらSlackやPRに手作業で変更点を書き出す）」
デザインとエンジニアリングの境界線には、常にこうした「変更点を探り合う無駄なコミュニケーションコスト」が発生しています。
この地獄を終わらせるため、Figmaの変更履歴（チェンジログ）を美しいMarkdown形式で一瞬で自動生成するAIプラグイン「Changelog Generator」を開発しました。
🔗 [Changelog Generator - Figma Community（無料：回数制限あり）]
https://www.figma.com/community/plugin/1597483442805970651/changelog-generator
🪄 どう動くのか？
デザインを変更してプラグインを起動するだけで、AIが差分を読み取り、GitHubのPull RequestやSlack、Notion、JiraなどにそのままコピペできるMarkdownを出力します。
🤔 なぜ「Figma標準のDev Mode」だけではダメなのか？
「FigmaにはDev Modeの『Compare changes（変更の比較）』機能があるから十分では？」と思う方もいるかもしれません。
たしかにDev Modeは「Paddingが8pxから12pxに変わった」という事実を視覚的に確認するには非常に優れています。
しかし、実際の開発現場では以下のペインが残ります。
-
結局テキスト化する手間がかかる
エンジニアが実装を進める際やPRを作成する際、Dev Modeの差分を見ながら、結局は誰かが手作業で「〇〇コンポーネントの余白調整」とテキストに書き起こしていませんか？ -
「Why（なぜ）」が分からない
Dev Modeが教えてくれるのは「何が（What）」変わったかだけです。「タップ領域を広げるための修正」といった、人間らしい文脈（コンテキスト）までは教えてくれません。
この**「FigmaのGUI上の視覚的な差分」と「開発プロセスのテキストベースのドキュメント」の間にある深い溝**を埋めるために作ったのが、このプラグインです。
✨ Changelog Generator の3つの特徴
このプラグインは、「エンジニアが一番欲しいフォーマット」で出力することに特化しています。
1. スタイルやVariables（トークン）の差分を自動検知
カラー、タイポグラフィ、Variablesなど、デザインシステムの根幹となる変更を正確にキャッチアップします。厳密にデザイントークンを運用しているチームや、DesignOps担当者にも最適です。
2. Figma AIによる「人間らしい」Markdown生成
単なる差分データ（JSONなど）を機械的に羅列するのではなく、Figma AIを間に挟むことで文脈を整理し、人間が読みやすい構造化されたリリースノートとして翻訳・出力します。
3. コピペ一発でHandoffが完了
生成されたテキストを「Copy」して、そのままGitHubやSlackに貼り付けるだけ。もう「どこが変わったか」を口頭や長文メッセージで説明する必要はありません。
🚀 今後のロードマップ
現在、本プラグインは主にスタイルやVariablesの差分抽出にフォーカスしていますが、海外のエンジニアコミュニティからも「UIコンポーネント自体の視覚的な変更（ボタンの配置が変わった等）もテキスト化してほしい！」という熱いフィードバックを頂いています。
今後のアップデートで、UI Componentsの差分抽出（Visual Diffs）にも対応していく予定です。
🤝 おわりに：ぜひチームで試してみてください
デザインとエンジニアリングのギャップを埋めることは、すべてのプロダクトチームの永遠の課題です。
このツールが、皆さんのチームの摩擦を減らし、本来の開発・デザイン業務に集中するための助けになれば嬉しいです。
（※このツールの開発背景や、AIを活用したHandoffの未来についての思想は、Mediumでも英語で記事にしています。ご興味があればぜひ！）
🔗 [Figma AI: Bridging the Design-to-Eng Gap with Automated Changelogs]
https://medium.com/@digitalate/figma-ai-bridging-the-design-to-eng-gap-with-automated-changelogs-e4b28349a8de
フロントエンドエンジニアの皆さんへ：
ぜひチームのデザイナーに**「PR書くの圧倒的に楽になるから、Figma変更したらこのプラグインでMarkdown出して！」**と提案してみてください。
デザイナーの皆さんへ：
今日の更新からこのプラグインを使ってSlackで報告してみてください。エンジニアから泣いて喜ばれるはずです。
👉 [Changelog Generator のインストールはこちらから（Figma Community）]
https://www.figma.com/community/plugin/1597483442805970651/changelog-generator
「ここをもっとこうして欲しい！」「うちのチームではこう使ってる！」などのフィードバックがあれば、ぜひこの記事のコメントやFigma Communityのレビューでお寄せください。今後の開発のモチベーションになります🔥