元デザイナーのエンジニアが後悔した、Figma データを「完成見本」で終わらせないための 4つの視点

はじめに

初めまして。
株式会社メンバーズの許です。

私はこれまでデザイナーとしての業務を経験し、現在はエンジニアとして開発に携わっています。
両方の立場を経験する中で、Figma のデザインデータは単なる完成見本ではなく、エンジニアが実装時に判断するための「材料」でもあると感じるようになりました。
実装では、余白や伸縮、状態差分などのルールが読み取れることが大切です。この情報が曖味だと、確認コストの増大や手戻りを招く原因になります。
今振り返ると、当時の私はデザインの意図をどう実装につなげるかという視点が不十分で、実装側が必要とする情報を整理しきれていないことがありました。

たとえば：

• 見た目を整えていても、レイアウトのルールまで Figma 上で整理できていないことがあった

• 状態差分や書き出しルールの共有が足りず、実装時に追加確認が発生してしまった

• 自分の中では前提になっていることをデータに書ききれず、実装側に補ってもらう形になっていた

この記事では、私の反省と、エンジニアとして「こうなっていると実装しやすい」と感じた視点の両方をもとに、Figma デザインを実装しやすくするための工夫をまとめます。
デザイナーとエンジニアの協業を、少しでもスムーズにするヒントになれば嬉しいです。

1.レイアウトは「見た目」ではなく「ルール」を渡す

エンジニアが Figmaを見るときに知りたいのは、完成画面そのものよりも、どんなルールでその画面が構成されているかです。
見た目だけが整っていても、余白や整列の基準が読み取れないと、実装時の迷い（判断コスト）が増えやすくなります。

意識したいポイント：

• Auto Layout を可能な限り活用する
  例：button, tag, card, form row など、コンポーネント単位で適用します

• 伸縮を前提に組む
  → Auto Layout + Hug contents で、内容が変わっても自然なサイズになるように設定します

実装時のメリット：

• 「見た目」ではなく「ルール」として構造を把握できる

• padding, gap, align-items など、コードにそのまま落とし込める

• 実装前の確認コストを減らしやすい

2.全体の「揃えの基準」を可視化する

多くのエンジニアは Auto Layout の設定を詳細に確認しながら実装を進めますが、ページ全体を俯瞰したときの「揃えの基準」が可視化されていると、より迷いなく構造を理解できます。

意識したいポイント：

• 必要に応じて Grid や Guide を使い、全体の基準を見えるようにする

• ページ全体で左右マージンなどを揃えるのが基本ですが、デザインの都合で例外的な数値を当てる場合は、Figma 上に一言メモを添えておくと親切です

実装時のメリット：

• どこに揃えるべきかを瞬時に判断できる

• レスポンシブ対応の方針を立てやすい

• 画面全体を共通ルールで実装しやすい

3.画像は「見えている範囲」と「実データの範囲」を揃える

Figma 上では問題なく見えていても、画像に不要な透明余白が含まれていると、実装後にズレやクリック領域の違和感につながることがあります。
画像素材は、見た目だけでなく、実際にどう扱われるかまで意識して整えておくことが大切です。

意識したいポイント：

• 画像の Frame は見た目の境界に合わせてカットし、余計な透明余白を残さない

• 不透明度の設定に頼りすぎず、書き出し後の扱いやすさも意識する
  →Figma 上で不透明度を調整した状態で書き出すと、実装環境によって色味が変わってしまうことがあるので、できるだけ不透明度100%状態で作りましょう

実装時のメリット：

• 配置やクリック領域のズレを防ぎやすい

• 素材をそのまま使いやすくなる

4.書き出しルールは「そのまま使える」を目指す

素材の命名や形式がバラバラだと、エンジニア側で整理の手間が発生します。書き出しルールが揃っているだけで、受け渡しのストレスはかなり軽減されます。

意識したいポイント：

• 命名を統一する（例：icon-search.svg）。

• 形式や倍率のの基本方針を揃える

• 複雑な装飾などは、あらかじめ「1つの素材」として書き出せるよう設定しておく

実装時のメリット：

• 名前を見ただけで素材の役割を判断でき、作業がスムーズになる

• 書き出しに関する確認や、戻しを減らせる

まとめ

以前参加した BEMA トークで、「UI/UX デザイナーとエンジニアの協業」について考える機会がありました。

そこで印象に残っているのは、デザインと実装は単なる分業ではなく、「協業」だという考え方です。
自分の担当範囲だけを整えて終わりにするのではなく、次の工程の人が受け取りやすく、作業を進めやすい形で渡すことが、スムーズな開発につながるのだと感じました。

今回まとめた Figma デザインの Tips も、実装時の判断コストを減らし、職種をまたいだ協業をスムーズにするための工夫です。
この記事が、日々デザインデータと向き合う皆さんのヒントになれば嬉しいです。

さらに学びたい方へ：私が参考にした学習リソース

最後に、私がデザインの構造化や Figma の基本を学ぶ上で活用した公式リソースをご紹介します。

公式チュートリアル：初心者向けFigmaデザイン

YouTube：BONO-カイクン