こんにちは。DevOpsの現場で「設計と実装の壁」に何度も頭をぶつけてきたエンジニアの端くれです。
多くの現場では、Figmaでデザインが完成した瞬間、エンジニアの手元には「静的な画像」や「複雑なURLリンク」だけが届き、仕様が変わるたびにSlackで「最新版どれですか？」と聞き返す…そんな無駄な消耗戦が繰り広げられていますよね。
今日は、GitLabの知られざる隠し玉「Design Management」を使って、デザインのバージョン管理とイシュー追跡を完全に同期させる、「開発の質を一段引き上げる」ワークフローを伝授します。これを導入すれば、あなたのチームの認識齟齬は劇的に減ります。
—
1. なぜ「GitLab Design Management」なのか？
通常、デザインファイルはFigmaなどの外部ツールに閉じられがちです。しかし、GitLabのDesign Managementを使えば、「イシューのコンテキストの中にデザインがある」状態を作れます。
- バージョン管理: デザインの修正履歴がイシューに蓄積される。
- フィードバックの局所化: 「このボタンの色が…」といった指摘を、画像上のピンポイントに対して行える。
- 開発者体験の向上: FigmaのURLを掘り起こす手間を省き、GitLabのUI上で最新の仕様を確認できる。
—
2. セットアップ：誰でもできる「デザイン統合」の第一歩
特別なプラグインは不要です。GitLabの標準機能を使います。
ステップ1：イシューへのデザインアップロード
プロジェクトの「Issues」を開き、適当なイシューを作成または選択してください。サイドバーの「Design」セクションに注目してください。
1. 「Upload design」ボタンをクリック。
2. Figmaからエクスポートした`.png`や`.jpg`をドラッグ＆ドロップ。
3. これだけで、GitLabがデザインのバージョン履歴を自動生成し始めます。
ステップ2：Figmaプロトタイプの埋め込み（最重要）
静的な画像だけでは動きが分かりません。Figmaのプロトタイプをイシュー内に埋め込みます。
1. Figmaで「Share」→「Copy link」を選択。
2. イシューのDescription（説明欄）に以下のMarkdownを貼り付けます。
これで、GitLabの画面を離れることなく、エンジニアは動的なプロトタイプを操作し、仕様を正確に把握できるようになります。
—
3. HelloWorld的運用：チームでの「爆速フィードバック」フロー
設計思想を共有するために、以下のサイクルを回してください。
1. デザイン投稿: デザイナーがFigmaから画像を書き出し、GitLabイシューに投稿。
2. ピン留めコメント: エンジニアが画像上の「ここ、実装コスト高いです」という箇所をクリックしてコメント。
3. 議論の履歴: 修正案が上がれば、同じイシューに新しい画像をアップロード。GitLabは自動的に「バージョン2」として積層管理してくれます。
これこそが「デザインのバージョン管理」です。過去のデザインを見返して「あの時の修正意図はなんだっけ？」と悩む時間はゼロになります。
—
4. 現場のプロが教える「真のハック」：GitLab-Figma連携の極意
さらに効率を極めたいなら、以下の運用を意識してみてください。
- 「Design」ラベルの活用: すべてのデザイン完了イシューには必ず`~Design`ラベルを貼り、ボード上で視覚的に進捗を管理しましょう。
- コミットメッセージとの紐付け: 開発者がコードをプッシュする際、イシュー番号をコミットメッセージに入れれば、GitLabは「デザイン」と「コード」を自動的にリンクさせます。トレーサビリティ（追跡可能性）が完璧になります。
- デザインの「完了定義」: 「GitLabのDesignセクションに最新版がある状態」をDoneの条件に設定すること。これがチームの規律を守る鍵です。
—
最後に：壁を壊すのはツールではなく「意識」
多くのエンジニアが「デザインはデザイナーの領域」と一線を引いてしまいます。しかし、優れたCI/CDとは、コードの統合だけでなく、チームの認識の統合のことです。
GitLabのDesign Managementは、そのための強力な接着剤になります。今日からイシューを一つ選んで、デザインをアップロードしてみてください。昨日までの「認識のズレ」が、嘘のようにクリアになるはずです。
もし設定で詰まったら、いつでも聞いてください。あなたの開発ライフが少しでも楽に、そしてクリエイティブになることを心から応援しています！