SB C&Sの最新技術情報 発信サイト

C&S ENGINEER VOICE

SB C&S

GitLabとFigmaを連携して、デザインと開発を効率化する方法1

その他
2024.03.29

みなさん、こんにちは。テクニカルマーケティングセンターの河上です。

昨今、ソフトウェア開発においてUI/UXの重要性が注目されています。 今回はGitLabとFigmaを連携してデザインと開発を効率化する方法についてご紹介いたします。

GitLab

GitLab_design1.png

GitLabは、Gitによるソースコードのバージョン管理、コラボレーション、CI/CD、セキュリティといったさまざまな機能を有するDevSecOpsプラットフォームです。開発チームはGitLabを使ってチームメンバー間でコードを共有、管理、レビュー、デプロイができるだけではなく、イシュー(課題)やかんばんスタイルでアジャイルかつ効率的にプロジェクト管理もできるツールです。

主な特徴

・Gitによるソースコードのバージョン管理
・プロジェクト管理(かんばん・イシュー(issue)・マイルストーン・wikiなど)
・CI/CD
・セキュリティ(SAST/DASTSCAなど)

...など、ソフトウェア開発で活用できる豊富な機能が提供されています。

Figmaについて

GitLab_design2.png

Figmaは、UIデザイン・グラフィックデザインやプロトタイピング作成などに広く使用されているコラボレーションデザインツールです。
リアルタイムで共同作業やチーム間でデザインの共有やコメント機能を活用することで効率的に作業をすることができます。またFigmaは豊富なプラグインが提供されており、プラグインを活用することでさらに機能を拡張・充実させることができます。デザインの効率化とチームワークの向上が図れるため、デザイナーなだけではなく開発者に支持されているデザインツールです。

主な特徴

・UIデザイン・プロトタイプングなどのデザインを作成
・デザインコラボレーション(共同編集・コメント機能など)
・ベクターグラフィック・コンポーネント
・他デザインツール(AdobeXDやSketch)で作成したデータのインポート
・・豊富なプラグイン

...など、デザイン作成やデザインシステムで活用できる様々な機能が提供されています。

デザインと開発における課題

プロジェクトを進めていく上で、デザインと開発の課題がいくつかあります。

◆コミュニケーションの課題
よくあるソフトウェア開発では、デザインチームと開発チームが分かれていることが多いです。そのためデザイナーと開発者の間でコミュニケーション不足があると、デザイナーが作成したUIやプロトタイプにおけるデザイン意図がうまく伝わらず、開発結果がデザインと異なってしまうことがあります。デザイン意図を開発者に正確に伝えることが重要になります。

◆変更の課題
ユーザーの要望に応じてデザインツール上でデザインを変更することは簡単ですが、変更されたデザインを開発側がすぐ対応できるかというと難しい場合があり、開発スケジュールに影響がでるケースが多々あります。プロジェクトのスケジュールを調整し、両者の作業を適切に統合する必要があります。

◆ツール間の連携の課題
またツール間の連携にも課題があることがあります。それぞれ異なるツールを使用することでデータのやり取り・管理が煩雑になり、効率的に作業が進められないことが多々あります。

課題をどう克服するか

プロジェクトを成功に導くためには、こういった課題をできる限り取り除いていく必要があります。両ツールにはコラボレーション機能があり、それらを活用することでデザイナー間・開発者間のコラボレーションをスムーズにすることができます。しかし、プロジェクトを円滑に進めるためにデザインと開発を切り分けて作業をするのではなく一緒に進めていく必要があります。効率的に作業をおこなえることがプロジェクトの成功要因の一つにもなります。

こういった課題に対して、デザインチームが使用するツール「Figma」と開発者が使用する「GitLab」を連携する方法があります。両ツールを連携することでコミュニケーションの課題やツール間連携といった課題を解決することができます。

さいごに

今回は、GitLabおよびFigmaの概要およびデザインと開発における課題についてご紹介しました。次回は、GitLabFigmaを連携するための手順についてご紹介いたします。

GitLab製品情報はこちらから

著者紹介

SB C&S株式会社
テクニカルマーケティングセンター
河上 珠枝