プロダクト開発におけるコンポーネント実装で、デザインステータスを明示してもらえて助かった話

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回の記事では、プロダクト開発においてコンポーネントを効率よく実装する際に、デザインの工夫で助けられた話を書こうと思います！

助けられたこと

プロダクトの機能開発では、デザインと実装が並行して進むことがままありますし、デザインが未確定の状態でコンポーネントに先行着手することもよくあります。

そういった進め方をする際には、通常であればエンジニアとデザイナー間で、デザインのどこが確定してどこが確定していないかを都度確認する必要があります。

しかし、ある案件でそういった進め方になった際、弊社UIデザイナーの今西に前もってFigma上にデザインのステータスが分かるように明示してもらえたことがありました。

デザインの進行状況が明確だとどこを先行して着手できるか、どこはまだ着手できないかをFigmaを確認するだけで把握することが出来、手戻りが少なく効率的に進めることが可能になります。

実際の案件でも進められるところを進めつつ、Figmaを確認することで着手可能の判断をすることができたのでとても助かりました！

どんなテンプレートを使ってる？

デザインステータスの表示にはどんなテンプレートを使用しているのか、デザイナーの今西に訊いてみました。

こちらの Design Handoff System というテンプレートを使用しているようです。

https://www.figma.com/community/file/996704427124567617

ステータス表示はもちろん、アノテーションコメントやエラーケース・エッジケースの明示に使えるヘッダーなども用意されており、有用なテンプレートだと感じました。

使用方法もファイルを自分の Figma 上に複製するだけなので簡単です！

まとめ

プロダクト開発においてコンポーネントを効率よく実装する際にデザイナーに助けられた話を書きました。

効率よく円滑に作業を進める上でデザインステータスが明示されているとコンポーネント実装がやりやすく、また必要のないやりとりが減るため双方にメリットがある工夫だと感じます。

まだ認識できていない工夫もありそうなので、よりよい協業のために今後更にデザインについて深掘りしてみたいなと思っています。