はじめに
CYBIRD Advent Calendar 2025の10日目担当、
サイバードのUIデザイナー @kkoba です。
6日目は @chikako_ikedaさんの「Androidのライブ壁紙を作ってみた〜アセットはnano bananaに任せ…られるのか？〜」でした。
AIについてはプロンプトのコツもあるかと思うのですが、一定の同条件がある前提の差分というのは難しいんだなと学びになりました！
私からは新規開発にあたってfigmaのtipsをご紹介いたします。
機能紹介についてはたくさん記事があるかと思いますので
figma特有の機能を活かしたフローについて解説いたします。
1：UIパーツをまとめて管理する運用（Commonパーツページの作成）
新規開発を複数人で進める場合、UIのバラつきやパーツの重複はよく起きる問題です。またブレなく遂行するには都度整えながら共有も必要になるのでちりつもで工数もとられます…
そこで今回のプロジェクトでは、共通パーツ（ボタン、モーダルなど）を1ページにまとめて管理する方法を取り入れました。
パーツを1ページに集約するメリット
-
パーツを俯瞰しやすくなる
┗一覧で見られるため、パーツの確認や使用箇所など全貌の確認に役立ちます。 -
類似パーツの重複を避けられる
┗作る前に既存パーツがないかをチェックでき、同じデザインの別バージョンが生まれにくくなります。 -
デザインのブレがなくなる
┗統一コンポーネントを使い回すため、画面ごとで意図しない差異が発生しづらくなります。
point
ページ集約と合わせて重要なのが、コンポーネントとインスタンスの正しい理解と運用です。
- コンポーネント
└デザインを再利用する共通性をもったUI要素でUIパーツの「親」
ボタン、アイコンなど共通して使われるものを定義する - インスタンス
└デザインを再利用するコンポーネントのコピーでUIパーツの「子」
■ この仕組みを使うメリット
修正が発生しても コンポーネント1つ変更するだけで全画面に反映
UIの一貫性が保たれ、開発後の変更にも強い構造になります。
便利ですね～
上記を元に
・UIパーツ専用のページ：コンポーネントをまとる
・各機能UIページ：インスタンスで構成
という運用にしました。
検索ツールを使った影響範囲の可視化
コンポーネントを適切に運用すると、Figmaの検索（Cmd/Ctrl + F）が非常に強力になります。
■ パーツ検索でできること
特定パーツの名称やコンポーネント名で検索すると…
どの画面でそのパーツが使われているかがわかる
修正時の影響範囲を事前に把握できる。
■ 利点
修正時の「どこに影響するかわからない…」が解消し、実装後の事故を防ぐことができ、
コンポーネント運用の品質が上がる。
特に複数人で開発する場合、影響範囲が可視化されるだけで後工程の混乱が大幅に減ります。
2：各画面のステータスを明記する運用
コメントや修正依頼が飛び交う新規開発では、
「今この画面はどれくらい進んでいるのか？」
が見えづらくなることがあります。
そこで、画面ごとにステータスを明記する仕組みを導入しました。
■ 設定したステータス例
- UI_作業中
- UI_修正中
- 企画_確認中
- デザイン_確認中
- UI_FIX
など…
■ ステータス管理の利点
チーム全員が“今どの画面を触っていいのか”が一目でわかる
エンジニアは「FIXされた画面」だけを見るので手戻りが減る
レビュー対象が視覚化されることで、指摘漏れが減る
特にFixステータスを明記することで、受け渡しのタイミングが明確になるのが大きなメリットでした。
またデザインチーム内確認と企画側内確認が同時で行う場面もあるためどこまでが確認済かも一目でわかるのが良かったです
3：コメント機能の活用とFB履歴の管理
FB（フィードバック）のやりとりを一元化したく、全てFigmaのコメント機能内で行う運用にしました。
■FBの流れ
- 各機能ごとFBの依頼を行う
└この際にデザイナー側から仕様の質問や提案などを投げかける場合もある - figma内でFBコメントをつけてもらう（確認期間を設ける）
- 全てFBコメントつけられたら、slckで一報いただく
- FBコメント確認し、デザイン修正
以上を繰り返し - デザインFIX後、FBコメントは「完了」ステータスにして消す
- FBコメントを別途履歴へ転記
FB履歴を別途残すメリット
Figmaコメントは完了にすると消えてしまうため、
複数人で確認している場合は
FBの履歴を残し、なぜこのデザインに至ったかを残し次の確認者への伝言代わりにしていた
利点
なぜそのUIに落ち着いたのかの判断過程が残る
過去の議論を追えるので同じ質問が減り、仕様変更時の根拠にもなる
実際、この履歴があることで
他セクションにも背景が伝わりやすく共有がとてもスムーズになり、デザイン変更の理由が明確に伝わるようになりました。
ひと手間にはなりますが、新規開発あるあるの大きな出戻りなども防ぐことができたのではないでしょうか
4：まとめ
今回の新規開発では、
- UIパーツの共通管理
- 画面ステータスの可視化
- コメント＋FB履歴の仕組み化
これらを行ったことで、複数人でのUIデザインでも 迷いが少ない・修正に強い・受け渡しがスムーズ という状態を作ることができました。
明日のCYBIRD Advent Calendar 2025 11日目は、@cy-seiyan さんの「Flashをモバイル端末で再生させる為に使用していたツールや体験記」です。こちらも宜しければ是非！