Figmaからコーディングするときに意識していること

最近、Figmaで作られたデザインをもとにコーディングする機会が増えてきました。

最初の頃は、Figmaに書かれている数値をそのまま見て、

「この余白は何px」

「この文字サイズは何px」

「この色は何番」

という感じで、見た目をそのまま再現することばかり意識していました。

もちろん、それも大事です。

ただ、実際にコーディングしていく中で感じたのは、Figmaをただの設計図として見るだけでは不十分だということです。

Figmaからコーディングするときに大事なのは、見た目を写すことではなく、デザインの意図を読み取って、Web上で崩れにくい形に落とし込むことだと思っています。

数値をそのまま信じすぎない

Figmaを見ると、余白やサイズがすべて数値で表示されます。

たとえば、上の余白が64px、カード同士の間隔が24px、文字サイズが18pxというように、細かく確認できます。

ただ、コーディングするときにその数値を全部そのまま使えばいいかというと、そうではないと思っています。

なぜなら、Figma上ではきれいに見えていても、実際のWebサイトでは画面幅が変わったり、文章量が変わったり、画像サイズが変わったりするからです。

特にスマホ表示では、Figma上の余白をそのまま使うと広すぎたり、逆に詰まりすぎたりすることがあります。

なので、Figmaの数値はあくまで基準として見ています。

完全に同じpxにすることよりも、実際の画面で見たときに自然かどうかを重視しています。

余白のルールを見る

Figmaからコーディングするときに、特に意識しているのが余白です。

デザイン全体を見たときに、

「セクションごとの上下余白はどれくらいか」

「カードの内側余白は統一されているか」

「見出しと本文の間隔はどれくらいか」

といった部分を確認します。

余白は、ただ空いていればいいわけではありません。

余白がバラバラだと、サイト全体がなんとなく雑に見えます。

逆に、余白のルールがそろっていると、それだけでかなり整って見えます。

なので、コーディング前にFigmaを見ながら、デザイン全体の余白のルールをざっくり把握するようにしています。

たとえば、セクション間は80px、見出し下は32px、カード内は24pxなど、共通して使えそうな数値を見つけておくと、CSSも整理しやすくなります。

同じデザインは共通化できないか考える

Figmaでデザインを見ていると、一見違うように見えても、実は構造が同じパーツがあります。

たとえば、

「カード」

「ボタン」

「見出し」

「タグ」

「CTA」

「ブログ一覧」

などです。

これらを毎回別々にコーディングしてしまうと、あとから修正するときに大変になります。

ボタンの色を変えたいだけなのに、複数箇所を修正しないといけない。

カードの余白を調整したいだけなのに、似たようなCSSが何箇所にもある。

こうなると、管理しにくいコードになります。

なので、Figmaを見るときは、見た目だけではなく「これは共通パーツとして扱えるか」を考えるようにしています。

同じ役割のものは、できるだけ共通のクラスやコンポーネントとして作る。

そうすることで、見た目の統一感も出ますし、後からの修正も楽になります。

PCとスマホでどう変わるかを先に考える

FigmaではPC版とスマホ版が用意されていることがあります。

このとき、ただPC版を作ってからスマホ版に直すのではなく、最初からレスポンシブを意識して構造を考えるようにしています。

たとえば、PCでは横並び、スマホでは縦並びになるセクションがあります。

この場合、HTMLの順番をどうするかが重要です。

見た目だけで無理やりCSSを当てると、スマホ表示で順番が不自然になったり、後から調整しにくくなったりします。

なので、コーディング前に

「この要素はスマホでどう並ぶのか」

「画像とテキストの順番は変わるのか」

「横並びを解除したときに自然に見えるか」

を確認します。

レスポンシブ対応は、後から無理やり直すよりも、最初のHTML構造を考える段階で意識した方が圧倒的に楽です。

画像として作るべきか、CSSで作るべきかを判断する

Figmaには、装飾や背景、アイコン、あしらいなどが入っていることがあります。

その中には、画像として書き出した方がいいものもあれば、CSSで再現した方がいいものもあります。

たとえば、写真や複雑なイラストは画像として書き出します。

一方で、単純な背景色、線、角丸、影、丸い装飾などはCSSで作った方が管理しやすいです。

何でも画像にしてしまうと、あとから色やサイズを変えたいときに手間がかかります。

逆に、複雑な装飾を無理にCSSだけで再現しようとすると、コードが複雑になります。

なので、Figmaからコーディングするときは、

「これは画像で持つべきか」

「これはCSSで作れるか」

「あとから修正しやすいのはどちらか」

を考えるようにしています。

見た目を再現するだけではなく、運用しやすい形にすることも大事だと思っています。

テキスト量が変わっても崩れないかを見る

Figma上では、文章量がきれいに整えられています。

でも、実際のサイトでは文章が増えたり、改行位置が変わったりすることがあります。

特に、カード型のデザインでは注意が必要です。

Figmaではすべてのカードの高さがそろっていても、実際に投稿タイトルや本文が入ると、高さがバラバラになることがあります。

なので、コーディングするときは、テキスト量が多少変わっても崩れないように意識しています。

具体的には、余白を固定しすぎない、要素の高さを無理に決めすぎない、必要に応じてflexやgridを使うなどです。

デザイン通りに見せることも大事ですが、実際の運用で崩れないことの方がもっと大事です。

デザインの意図を読み取る

Figmaからコーディングするときに一番大事なのは、デザインの意図を読み取ることだと思っています。

たとえば、見出しが大きくなっているなら、そこを一番見せたい意図がある。

CTAボタンが目立つ色になっているなら、そこをクリックしてほしい意図がある。

余白が大きく取られているなら、情報を詰め込みすぎず、読みやすく見せたい意図がある。

そういう意図を無視して、ただ数値だけを追ってしまうと、表面的には似ていても、どこか違和感のあるサイトになります。

コーディングは、Figmaの見た目を機械的に写す作業ではありません。

デザインの目的を理解して、ブラウザ上で自然に見える形に変換する作業だと思っています。

完全一致よりも、実際に見たときの自然さを大事にする

Figmaとブラウザでは、見え方が少し変わることがあります。

フォントの表示、行間、余白、画像の見え方など、完全に一致させるのが難しい部分もあります。

もちろん、できるだけデザインに近づける努力は必要です。

ただ、細かい数pxの違いにこだわりすぎて、全体の見やすさが悪くなってしまっては意味がありません。

最終的には、実際の画面で見たときに自然かどうかが大事です。

PCで見たとき、スマホで見たとき、文字が読みやすいか。

CTAは目立っているか。

情報の流れは分かりやすいか。

余白に違和感がないか。

そういった視点で確認するようにしています。

まとめ

Figmaからコーディングするときは、ただデザインをそのまま再現するだけではなく、Webサイトとして実際に使いやすい形に落とし込むことが大事だと感じています。

特に意識しているのは、以下のような点です。

・数値をそのまま信じすぎない

・余白のルールを見る

・共通パーツを見つける

・レスポンシブを先に考える

・画像とCSSの使い分けを判断する

・テキスト量が変わっても崩れないようにする

・デザインの意図を読み取る

・完全一致よりも自然さを大事にする

Figmaはコーディングのための便利な設計図ですが、それをそのまま写すだけでは不十分です。

大事なのは、デザインの意図を理解して、実際のWebサイトとして破綻しない形に変換すること。

最近は、Figmaを見るときも「どう作るか」だけではなく、「なぜこの形になっているのか」まで考えるようになってきました。

まだ完璧ではありませんが、こういう視点を持つだけで、コーディングの質もかなり変わってくると感じています。