Figma → コーディングで意識するデザインの再現ポイント

こんにちは！Chika Web Studio の Chika です。

みなさんは、Figmaは実務で使っていますか？
私は主にPhotoshopでWebデザインしてきました。印刷物への展開があるロゴなどはIllustratorでデザインします。
または、ワイヤーフレームなどはAdobe XDを使用していましたが、他の人がFigmaでデザインしたものをコーディングすることも増えてきました。

Figmaで作られたデザインをコーディングに落とし込むとき、ただ「見た目をそれっぽく」作るだけでは不十分です。
デザイナーの意図や細かな余白、色、タイポグラフィまでしっかり再現することで、完成度の高いWebサイトになります。
ここでは、Figmaからコーディングする際に意識したい再現ポイントをまとめます。

余白（マージン・パディング）を正確に再現する

デザインとコーディングのズレで一番目立つのが余白です。
Figmaでは要素を選択すると右パネルで幅・高さ・位置・余白が確認できます。

フォントと文字サイズを正確に設定する

フォントが変わるとデザイン全体の印象が大きく変わります。
Figmaの右パネル「Text」からフォント名・フォントサイズ・行間（line-height）・文字間隔（letter-spacing）を確認しましょう。

例えば…

Figma → Font: Noto Sans JP, Size: 16px, Line height: 150%, Letter spacing: 0.02em

font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;

font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;

カラーコードは必ず正確に取得する

微妙な色味の違いはユーザーの目にもわかります。
FigmaではカラーパネルからHEXやRGBA形式で取得できます。

角丸・シャドウ・境界線の再現

細かい装飾はデザインの雰囲気を決定づけます。
Figmaでは「Effects」パネルで影の色やぼかし具合、「Corner radius」で角丸の値を確認できます。

例（ボタンの影）

Figma →Drop shadow: x:0, y:2, blur:4, color: rgba(0,0,0,0.25)

box-shadow: 0 2px 4px rgba(0,0,0,0.25);

box-shadow: 0 2px 4px rgba(0,0,0,0.25);

レスポンシブデザインの意図を読み取る

FigmaのデザインがPC用しかなくても、デザイナーは余白やグリッドでレスポンシブを想定している場合があります。
コンポーネントやオートレイアウトの設定を確認し、縮めたときの挙動を想像しましょう。

アイコンや画像は正しい形式で書き出す

画像がぼやける原因は、サイズや形式の不一致にあります。
Figmaから書き出すときは用途に合わせて形式を選びましょう。

• PNG：透過が必要な場合
• JPG：写真や背景画像
• SVG：アイコンやロゴ（拡大しても劣化しない）

微調整はブラウザでの見え方を優先する

完璧にピクセル単位で合わせても、ブラウザによって差が出る場合があります。
最終的には、デザインとブラウザの両方を見比べながら微調整するのがベストです。

まとめ

Figmaからコーディングする際は、「パッと見似ている」だけではなく、
余白・フォント・色・装飾・レスポンシブといった細部まで再現することが重要です。
小さな積み重ねが、プロの仕上がりにつながります。