デザインデータを正しく読む！FigmaからCSSを設計する思考

〜「見た目を写す」から「構造を理解する」コーディングへ〜

はじめに：Figmaを“見るだけ”で終わっていませんか？

Web制作の現場では、FigmaやXDのデザインデータをもとにHTML/CSSを実装するのが一般的です。
しかし、こんな経験はありませんか？

「見た目通りに書いたのに、なんか崩れる…」
「余白の値が合ってるのに、全体のリズムが違う…」
「Figma通りに作ってるのに、デザイナーから“違う”と言われる…」

実はそれ、“Figmaを正しく読めていない”ことが原因かもしれません。

デザインツールの数値をそのまま写すだけでは、正しいCSS設計にはならないのです。
本記事では、Figmaを「デザイン図面」としてどう読み解き、
そこから“再現性と拡張性のあるCSS”を設計する思考法を解説します。

Figmaの「見た目の数値」をそのまま信用しない

まず大前提として、Figmaの数値＝そのままCSS値ではないという点を理解しましょう。

例：ボタンのFigmaデータ

• 高さ：48px
• 文字：16px
• 上下余白：12px
• 角丸：8px

一見シンプルに見えますが、このままCSSに書くと意外とズレます。

.button {
  height: 48px;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
}

実際に表示すると、行間・フォントレンダリング・ブラウザ差によって
Figmaの“見た目”とはわずかに異なって見えることがあります。

原因はここにある

• Figmaはベクター（設計図）ベース
• CSSはレンダリング（実際の描画）ベース
  つまり、「ピクセル」ではなく「環境」によって変化する世界です。

CSS設計に活かすための“Figma読解3原則”

デザインをコード化する際には、単に数値を見るのではなく、“デザインの意図”を読み解く視点が必要です。

① グリッドを見る：「リズム」を掴む

まず注目すべきは、グリッドシステム（間隔・揃え）。
Figmaのレイアウトグリッドやガイド線から「デザイン全体のリズム」を把握します。

• 余白の基本単位：8px or 10px刻みか？
• カード・ボタン間の規則性：均等か、階層ごとに差があるか？
• コンテナ幅：何px単位で揃っているか？

:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
}

このように、スペーストークンを変数化しておくと、FigmaのリズムをCSSで再現しやすくなります。

② 階層構造を見る：「何を囲い、何を独立させるか」

デザインデータには、視覚的な階層＝HTML構造のヒントが隠れています。

例：カードデザインのFigma構造

Card
├─ Image
├─ Title
├─ Text
└─ Button

この構造をそのままCSSで表現するのが理想です。

<article class="card">
  <img src="..." alt="">
  <h3>タイトル</h3>
  <p>本文テキスト</p>
  <a href="#" class="button">もっと見る</a>
</article>

ここで大切なのは、
“見た目の配置”ではなく、“意味のまとまり”でグループ化する”こと。

NG：<div>で全部包むだけ
OK：意味を持つ要素（article / section / figure）で構造を表す

③ 一貫性を見る：「意図の再現」

Figmaには、色・フォント・影・角丸などのデザイントークンが散りばめられています。

これらを個別に再現するのではなく、
「どの値が共通・変化・例外なのか」を読み解くことで、CSS設計がシンプルになります。

例

• 角丸（border-radius）：全体で8pxがベース
• シャドウ：カード・モーダル・ドロップダウンで同系統の影を使っている
• カラー：#2196F3 がメインカラーで、ボタン・リンク・アクセントに共通

つまりFigmaは、設計ルールを言語化できるデータソースなのです。

FigmaからCSS設計へ ― 実践フロー

ここでは、Figmaを元に効率よくCSSを設計する流れを紹介します。

ステップ1：UIトークンを抽出する

Figmaの「Inspect」タブで以下を確認

• カラーコード（HEX / RGBA）
• フォントサイズ・行間・字間
• 余白・角丸・影

これを変数管理ファイルにまとめておくと、デザイン変更時も影響範囲を最小限にできます。

:root {
  --color-primary: #2196f3;
  --font-base: "Noto Sans JP", sans-serif;
  --radius-base: 8px;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
}

ステップ2：レイアウトをブロック単位で設計

Figmaのフレーム構造を分析し、再利用可能なUIブロックに分解します。

例

• Header
• Hero
• CardList
• Footer

それぞれをセクション単位のコンポーネントとして設計。

.header { ... }
.hero { ... }
.card-list { ... }
.footer { ... }

この段階で「CSS設計の骨格」を明確にしておくと、
後の変更やレスポンシブ対応がスムーズになります。

⚙️ ステップ3：レイヤー構造を意識して階層化する

Figmaでは、要素が上下関係で配置されています。
この構造を理解すると、z-indexの競合や重なりの不具合を防げます。

例

• 背景（z-index: 0）
• コンテンツ（z-index: 10）
• モーダル（z-index: 100）

.modal {
  position: fixed;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}

Figmaのレイヤー順は、CSSの描画順に対応していることを意識しましょう。

ステップ4：パーツ間の“関係性”をコードに反映

たとえば、Figmaで「ボタンとテキストの距離」が24pxなら、
それは単なる余白ではなく、「グループのリズム」かもしれません。

その場合、以下のように親要素の余白として定義します。

.section {
  margin-bottom: var(--space-lg);
}
.section + .section {
  margin-top: var(--space-lg);
}

“間隔”を要素単位ではなく文脈単位で考えるのが、プロのCSS設計です。

FigmaとCSSの「認識ギャップ」を埋める

Figmaとブラウザの違いを理解すると、実装がよりスムーズになります。

比較項目	Figma	CSS
単位	px固定	相対（em / rem / %）推奨
余白の影響	ビジュアル上のスペース	レイアウト全体に影響
フォント描画	ベクター基準	OS・ブラウザ依存
行間	数値固定	実際のフォントメトリクスに依存

つまり、「同じ16px」でも実際の見た目は異なる。
そのため、Figmaの見た目を盲信せず“印象一致”を目指すのがベストです。

再現性を高めるためのチーム連携

デザイン再現は、コーダーだけの仕事ではありません。
デザイナーとの共通認識づくりが成功の鍵です。

コミュニケーションのポイント

1. 余白の単位ルールを共有（例：8pxグリッド）
2. 共通コンポーネントを定義（例：カード・ボタン・見出し）
3. 曖昧な部分は意図を確認する（例：「ここの角丸は意味がある？」）

「デザインを写す」から「デザインを理解する」へ。
この意識共有が、再現精度を何倍にも高めます。

FigmaからCSS設計を導く“考え方”まとめ

1. 見た目よりも構造を読む
   　→ フレーム階層・グリッド・コンポーネント構造に注目。
2. デザイントークンをCSS変数に落とす
   　→ 色・余白・影・フォントなど、ルールで再現。
3. UIを文脈で考える
   　→ 隣接関係・リズム・余白の意味を意識。
4. ブラウザ描画を前提に検証する
   　→ 「再現」ではなく「体験を再構築する」意識を。

まとめ：Figmaを読む力が、CSSの質を変える

“デザインを再現する”とは、ピクセルを写すことではなく、意図を理解して再構築すること。
Figmaはただの設計図ではなく、デザイナーの思考が詰まった言語です。

ピクセルを写す人は「作業者」
意図を再現する人は「クリエイター」

CSS設計の質は、Figmaの“読み方”で決まります。
見た目の一致ではなく、体験の一致を目指しましょう。

お気に入り