Figmaのチーム運用でエンジニアとの齟齬をなくす｜現場で使える実践テクニック

こんにちは！
今日は「Figmaのチーム運用でエンジニアとの齟齬をなくす方法」について解説します。

デザイナーとエンジニアの「なぜか伝わらない」問題

僕も最初の頃、めっちゃ悩まされました。
Figmaで「完璧だ」と思ったデザインをエンジニアに渡しても、実装されてくるとズレが生じるんです。
「このマージンはどのくらい？」「このカラーコードは？」みたいな質問が毎回来る。
その繰り返しで、プロジェクトが遅延することもありました。

現場でよく見るのは、デザイナーとエンジニアがそもそも「Figmaの見方」を統一していないケースなんです。
デザイナーは美しさを重視してレイアウトしてるのに、エンジニアはコンポーネント構造を見てる。
同じファイルを開いてるのに、まったく別のものが見えてるんですよ。
ほんまに、これが原因で何度やり取りが増えたことか。

命名規則とファイル構造を統一する大切さ

解決策として、僕たちが採用したのは「命名規則の統一」です。
これが、ほんまに大事なんです。

具体的には、以下のルールを決めました。

• ページ名：[機能名]_[ページ種別]（例：User_Profile、Auth_Login）
• コンポーネント名：[部品名]/[状態]（例：Button/Primary、Input/Error）
• レイヤー名：CSS命名規則に合わせた小文字ハイフン区切り（例：main-header、user-card）

最初は「そこまで細かくする必要ある？」って思ったんですが、これをやるだけで、エンジニアからの質問がめっちゃ減りました。
なぜなら、レイヤー名を見れば、そのままCSSのクラス名やID名になるからです。
エンジニアはmain-headerというレイヤーを見たら、.main-headerという要素だとすぐに理解できる。
ハンドオフの効率が格段に上がるんですよ。

さらに、ファイル構造も重要です。
僕たちは、機能ごと、ページごとにFrameを分けるようにしました。
「ユーザー管理機能」「決済機能」みたいに大きく分けて、その中に各ページのデザインを入れる。
すると、エンジニアが該当機能のコードを書くときに、Figmaの該当Frameをサッと探せるんです。
これだけで、ミスコミュニケーションがすごく減ります。

デリバリー時のチェックリストを作成する

もう一つ、僕が現場で実装してよかった施策があります。
それが「デリバリー時のチェックリスト」です。

エンジニアにデザインを共有する前に、僕たちがチェックすべき項目をリスト化しました。

• すべてのコンポーネントがMain componentとして登録されているか
• Instanceの更新が最新になっているか
• テキストスタイルとカラースタイルが統一されているか
• すべてのレイヤー名が命名規則に従っているか
• 不要なレイヤーやFrameが削除されているか
• 余白やサイズの値がすべて入力されているか

これをチェックリスト化して、デリバリー前に必ず確認するようにしました。
最初は「めんどくさいな」って思ったんですが、これをやるだけで、エンジニアからの質問が本当に減ったんです。
そして、修正依頼も激減しました。
時間で考えると、チェック作業に30分かかるけど、その後のやり取りがなくなるから、結果的に何時間も節約になってるんですよ。

さらに、Figmaの共有リンクを渡すときは、エディタ権限ではなく「ビュー権限」にするようにしました。
エンジニアが誤って編集してしまう、みたいなことを防ぐためです。
本当に細かいことなんですが、こういう細部が大事なんです。

まとめ

Figmaのチーム運用って、ツールの機能を使いこなすこともちろん大事ですが、「人とのコミュニケーション」を仕組み化することがほんまに重要なんです。
命名規則を統一して、ファイル構造を整理して、デリバリー時のチェックリストを作る。
これらは地味な作業ですが、プロジェクト全体の生産性をめっちゃ上げることができます。

エンジニアからの質問が減れば、デザイナーの時間も増えるし、エンジニアも実装に集中できる。
みんなハッピーになれるんです。
ぜひ、あなたのチームでも試してみてくださいね。