FigmaとGitLabを融合せよ：デザイン・開発の「サイロ」を破壊する究極のワークフロー
「デザインの修正が開発に伝わっていない」「最新のプロトタイプがどれかわからない」。そんな言葉がチームで飛び交っている時点で、君たちの開発サイクルは既に腐敗し始めている。
DevOpsの真髄はコードの自動化だけではない。「情報の源泉（Single Source of Truth）」をいかにしてデザインからデプロイまで一気通貫で維持するかにある。今日は、GitLabの「Design Management」を核に、FigmaとGitLabを化学反応させ、開発速度を極限まで高めるための「プロの作法」を伝授しよう。
—
1. デザインを「コードと同じレイヤー」で管理する
GitLabのDesign Managementは、単なる画像置き場ではない。イシュー単位でデザインの「バージョン履歴」を保持できる強力な武器だ。
運用の鉄則：GitLabを「デザインのインデックス」にする
FigmaのリンクをSlackに貼るな。それは流れて消える運命にある。すべてのデザイン決定事項は、GitLabのイシュー内に集約させる。
- Designタブの活用: FigmaからエクスポートしたアセットをDesignタブにアップロードし、バージョン管理する。
- スレッドでの議論: デザインの特定の箇所をピン留めしてコメントする。この「コンテキスト付きの議論」こそが、後々の仕様迷子を防ぐ唯一の手段だ。
—
2. FigmaプロトタイプをGitLabに「埋め込む」
Figmaの埋め込み機能は、単なる見栄えのためではない。「エンジニアがFigmaを開く回数を減らす」ための最適化だ。
実践：Markdownによる埋め込み
イシューのDescriptionに、以下の形式でプロトタイプを埋め込め。
🎨 デザイン仕様
https://www.figma.com/proto/YOUR_PROJECT_ID?node-id=0%3A1&scaling=scale-down
> [!TIP]
> エンジニア向けチェックリスト:
> – [ ] コンポーネントは既存のUIライブラリで代替可能か？
> – [ ] 遷移時のアニメーションはCSSで再現可能か？
これだけで、エンジニアはエディタから離れることなく、GitLab上で仕様を確定できる。
—
3. 開発スピードを加速させる「神・小技」
必須のキーボードショートカット（GitLab編）
- `g` + `i`: どこからでもイシュー一覧へ飛ぶ。
- `r`: コメント欄で即座に返信モードへ。
- `y`: ページを「永久リンク（コミットハッシュ付き）」に切り替える。レビュー時に特定のコード箇所を指す際、これを使わないのは素人だ。
絶対入れるべきプラグイン：GitLab Workflow (VS Code)
VS Codeの拡張機能「GitLab Workflow」は必須だ。
- マージリクエストの直接操作: ブラウザを開かずにレビューコメントを確認・投稿できる。
- パイプライン監視: 自分の書いたコードがCIで落ちているか、エディタ上でリアルタイムに把握できる。
—
4. チーム設定の「標準化」：GitLab CI/CD構成例
デザインアセットやドキュメントの更新が、自動的に通知され、かつ最新状態であることを保証するための `.gitlab-ci.yml` のベストプラクティスを紹介する。
.gitlab-ci.yml
デザインアセットの変更を検知して通知するジョブ
stages:
- notify
notify_design_change:
stage: notify
image: curlimages/curl:latest
script:
- |
# 変更があればSlackへ通知を飛ばす（Webhooks）
curl -X POST -H ‘Content-type: application/json’ \
–data ‘{“text”:”🚀 デザインが更新されました。確認をお願いします: $CI_PROJECT_URL/issues”}’ \
$SLACK_WEBHOOK_URL
rules:
# デザインディレクトリに変更があった時のみ実行
- changes:
- design_assets/
—
5. チームの文化を変える「ルール」
優秀なテックリードとして、以下のルールをチームに強制（推奨）してほしい。
1. 「Figmaのリンクのみ」は禁止: GitLabのイシューを通していないデザイン変更は、存在しないものとして扱う。
2. デザイン変更はコミットと連動させる: デザインのバージョンアップ時、対応するGitLabイシューへのリンクを必ず記載する。
3. モックアップの正当性確認: 実装に入る前に、必ずDesignタブの最新画像とFigmaの差分をチェックする。
—
最後に：ツールは「共通言語」である
GitLabのDesign Managementを活用することは、デザイナーとエンジニアの間に「共通の時空」を作ることと同義だ。
「言った言わない」の不毛な議論を排し、デザインとコードの整合性をシステム的に担保する。これができれば、君たちのチームのベロシティは確実に一段階上のステージへ引き上がる。
さあ、今日からイシューをデザインの戦場に変えよう。コードを書き始める前に、最高のデザイン・デリバリーを整えるんだ。それが、真のDevOpsエンジニアの仕事だ。