デザイナーが作成した Figma のデザインファイルをエンジニアがコードに書き起こす際に、意図したデザインとのズレが生じることがあります。例えば、コンポーネント間のスペースが大きくなりすぎていたり、意図しない表示崩れなどが見受けられます。プロパティ設定ミスなどの単純な原因以外にも、Figma のレイアウト手法と実装方法で差分が生じることに疑問を持ちました。この疑問を解消するため、複数のエンジニアに Figma デザイン からコードへの変換プロセスを確認しました。
結論、大まかな方法は一緒でしたが、コード化する前の手順が違うということに気付きました。Figma の使い方を体系的に学ぶ機会がなかったので、エンジニア間で Figma への理解度に差がありました。その理解度の差がデザインをコードに変換する際、エンジニア間での解釈プロセスの差分によって実装のズレが生まれる一因となっていました。
本記事では、エンジニアがデザインからコードを変換した実体験をもとにそのプロセスを考察し、ズレの対応策を提案します。他の開発現場で少しでも参考になれば幸いです。
対象読者
- 専業のデザイナーおよびエンジニア: デザイナーとエンジニアが明確に分かれた環境で働いている方
- Figma 初心者: Figma を導入したばかりのエンジニアやデザイナー
- Dev Mode ユーザー: Figma の Dev Mode を活用して、効率的にコードを生成したい方
- デザインと実装の橋渡しを目指す方: デザインプロセスと開発プロセスを統合し、密なコラボレーションを実現したい方
デザインとコードのズレ原因と対応策
Figma 初心者だとなんとなく Figma をポチポチ触っていれば、感覚的に実装はできそうと思ってしまうのですが、それだとエンジニアごとで解釈方法も異なり、一貫性のある実装が困難になります。実際、私自身も Figma の基礎知識が不十分なまま実装を進めた経験から、この課題を実感しています。
この課題を解決するには、エンジニアが Figma への理解を深め、デザイナーの意図を正確に把握することが重要です。そこで、自身の経験と複数のエンジニアの Figma 利用方法をもとに、ズレの原因となるアンチパターンを考察します。また、基本的にその対応策は Figma Learn などを参考に紹介していきます。
いきなりポチポチしない
原因
Q. Figma ファイルの URL が共有されたら、すぐに何をしますか？
A. デザインの全体像を把握する
上記の回答はかなりざっくりですが、把握の手順とかをそれぞれ言語化してもらうと、意外とばらつきがありそうです。例えば、全体像の把握と一言で言っても、自分の中で見ていく順序が明確にあるかどうか人それぞれな気がします。言語化できず、なんとなく雰囲気で理解していると回答すると、どこかでズレが生じる原因になると考えています。そこで、デザインの全体像を把握するにあたって、自分自身がどのように理解しているのかを細分化してみることにしました。
対応策
デザインの全体像を理解していく流れを細分化したものは以下です。
- プロトタイプを再生する
- レイヤーの確認
- コンポーネントの確認
- 細かいスタイルの確認
この流れは大まかな流れですが、それぞれのステップでデザイナーとの対話をしていくことが大切だと思っています。各ステップの詳細は以降の見出しで触れていきます。
雰囲気でデザイン全体像を把握しない（プロトタイプを再生する）
原因
Figma ファイルを共有いただいたときに、まずはじめにキャンバス上にある要素をマウスやトラックパッドとかで移動し、対象画面や対象のコンポーネントの仕様を把握していくとします。
その流れを Figma 経験の浅いエンジニアの方にやってみてもらったとき、キャンバス上の要素の見る順番とかはあまり意識してなく、何度も同じデザインの画面やコンポーネントを確認するというケースがありました。このような複数回の確認が発生するのは、実装方針が固まっていないことが考えられ、見るたびに違う実装方針を考えてしまったりと、ズレが発生する一因かなと考えました。
キャンバス（作業エリア）
対応策
まず、はじめにやることとしておすすめなのは、プロトタイプを再生する機能を使うことです。プロトタイプの再生では、ホバー時やクリック時のアニメーションなどの具体的な操作方法を再現でき、かなり実装イメージを持つことができます。
雰囲気でマークアップしない（レイヤーの確認）
原因
Q. 下記のカードが実装対象のとき、どういったレイアウトで実装をしますか？（仮に静的な Web サイトのものを想定しています）
A. なんかよくわからないけど、とりあえず div タグ書いて、周りにパディングつけて、その中にプロフィールとコンテンツを配置してみよう。
プロフィールは、画像とテキストを横並びにして、プロフィールとコンテンツの間はマージンがあるから、コンテンツにマージントップをつけよう。
あっ、画像とテキストの間もマージンがあるから、テキストにマージントップをつけよう。
これでどうだろうか 🤔
<div class="card">
<div class="profile">
<img src="profile.png" alt="User" />
<span>sayn0</span>
</div>
<div class="content">
<img src="cat.jpg" alt="猫が飛ぶ" />
<p class="content-text">猫が飛んだ<br />#まもなく猫の日</p>
</div>
</div>
説明のため縦方向のレイアウトに関係する CSS を抜粋しています。
.card {
padding: 20px;
}
.content {
margin-top: 12px;
}
.content-text {
margin-top: 12px;
}
少し大げさな例ですが、エンジニア側の誤った解釈があると、Figma デザインの意図したレイアウトとのズレが発生します。
対応策
まずは、左サイドパネルにあるレイヤーを確認してみましょう。Card というフレーム配下に、Flame １があり、その配下に、Flame ２と neko という画像と、ねこが飛んだ。というテキストがあります。フレームは、HTML の要素としては、何になるのか、CSS はどういった構成になるのか脳内でイメージしながら、そのレイヤーを確認することで、デザインが意図しているレイアウト構成と一致するはずです。
一例ですが、実際に Figma のレイヤーから読み取ると以下の実装になるかと思います。
<div class="card">
<div>
<img src="profile.png" alt="User" />
<span>sayn0</span>
</div>
<img src="cat.jpg" alt="猫が飛ぶ" />
<p>猫が飛んだ<br />#まもなく猫の日</p>
</div>
.card {
padding: 20px;
}
.card > * + * {
margin-top: 12px;
}
デザインの意図だと、画像とテキストをコンテンツというフレームでは囲まず、Flame １の階層配下に 3 つの要素を設けて、それぞれの要素間に12pxのマージンをつけています。最初の例では、スペースの設定を個々の要素であてていましたが、それだと意図しないスタイルの衝突が発生するリスクがあり、良い実装とは言えません。今回は、フクロウセレクタ（* + *）でコードをまとめていますが、Flexbox や Grid Layout などでも実現可能です。レイアウトの考え方は Every Layout という書籍で詳しく解説されており、そのあたりを参考にしています。
大事なのは、デザイナーが意図したレイアウトを正しく読み取ることであり、もし、レイヤーを見て他に良いアイデアがあれば、対話をして改善していくことがベストだと思います。
コードスニペットは理解せず、コピペしない（コンポーネントの確認）
原因
Dev Mode では、デザイン要素を選択すると自動的にコードスニペットが生成されます。下記のように CSS が表示されたり、Figma プラグインを導入すれば React のコードとかも生成できます。便利な一方で、あまり理解せずにコードスニペットをコピペしてしまうと、意図しないスタイルやレイアウトの問題が発生するリスクがあります。
先程のカードコンポーネントですが、それには以下 CSS があたっています。
.card {
display: flex;
width: 330px;
height: 260px;
padding: 20px;
flex-direction: column;
align-items: flex-start;
}
デザインの本来の意図としては、カードのサイズは可変であるとします。しかし、コードスニペットをコピペしてしまうと、カードのサイズが縦横と固定されてしまい、レスポンシブデザインに対応できなくなる場合があります。このあたりは、ミスなのか、デザインの仕様なのかどうか確認が必要です。
対応策
対応策は当たり前ですが、理解せずにコードスニペットをコピペしないことです。デザイナーが作成するデザインファイルにも特徴があると思うので、そのあたりの共通認識を持ち、利用できそうであれば使っていくのが適切なアプローチだと思います。コードスニペットについての詳細は下記リンクからご覧ください。
対話しない（細かいスタイルの確認）
原因
エンジニアがデザインファイルを受け取った際、デザインの細部に疑問を持ってもデザイナーと対話せずに自己解釈で実装を進めることで、デザインの意図と異なるスタイルが適用されるリスクがあります。これにより、最終的なプロダクトがデザインと一致しない結果となります。
対応策
少しでも疑問に思ったら、すぐにデザイナーと対話することが大事だと思っています。そういった疑問を解消し、チーム内に共有していくことでチームの連携力も高まります。対話の方法やその粒度はチーム内でルールを決めておくことで迷わずに済み、円滑なコミュニケーションができると思います。例えば、下記のように Figma のコメント機能でコミュニケーションを取るとか、Slack の決められたチャンネルでやり取りするなどです。
ハンドオフというよりコラボレーション（余談）
いくつかアンチパターンを紹介し、その対応策をまとめてみました。こういったプロセスの言語化をしようと思ったきっかけは、昨年開催された Figma Japan2 周年記念イベントの参加でした。そこで、デザインとコードの間の関係性について考える機会を得ました。
Figma は、単なるデザイナー向けのツールではなく、チームの視覚的なコラボレーションを支援するプラットフォームとして進化しています。特に、エンジニアとデザイナーの関係性は密接であり、お互いの関心領域が重なることも多くなっていると感じました。
また、Figma 社 の CEO である Dylan Field 氏もまたイベントにて「コラボレーション」という言葉を大事にされていた印象です。また、Figma 社の谷氏がデザインのハンドオフについても下記のリンク内にて紹介されており、より考えていく必要がある創造的なコラボレーションについてイメージが湧いた気がします。
Figma 社 のミッションや今後の動きもチェックしながら、デザイナーとエンジニアがコラボレーションしながら環境を整えていくことがより重要であると痛感しています。
まとめ
Figma デザインからコードへ変換する際には、デザインの意図を正確に理解し、一貫性のある実装を行うことが重要です。そのためには、以下のポイントを押さえると良いと考えています。
- Figma の基礎を理解する: レイアウト機能やコンポーネントの使い方を学び、デザインファイルを正確に読み取る能力を身につける。
- デザインと開発の連携を強化する: 定期的なミーティングやレビューを通じて、デザイナーとエンジニアが密に連携する体制を整える。
- 効率的なコミュニケーションツールを活用する: Figma のコメント機能や Slack などを活用し、疑問点を迅速に解消する。
今後、Figma の新機能や連携ツールがさらに進化することで、デザインとコードのギャップは縮まるかもしれません。しかし、最も重要なのはツールの活用に加え、デザイナーとエンジニアが協力し合う文化を醸成することだと考えています。
本記事が、デザイナーとエンジニアの連携強化や、Figma を活用した効率的な開発プロセスの構築を考えるきっかけになれば幸いです。さらなる改善点や意見がありましたら、ぜひコメントいただけると嬉しいです。
Discussion