Figmaのスタイルガイド × CSSGenで爆速SCSSコーディング

qnote Advent Calendar 2025 9日目の記事です。

• Figmaでデザインシステムを組んでいる
• コーディングも担当する
• SCSSで変数管理したい
• でも手動でコピペするのがつらい…

そんな方に向けて、FigmaのスタイルガイドからCSSGenを使ってSCSSを自動生成 → 爆速でコーディングするワークフローを紹介します。

CSSGenを使えばFigmaのスタイルガイドがそのままSCSSに化ける

CSSGenは、Figmaに登録された以下の情報を、まとめてCSS/SCSSとして抽出できます。

• カラースタイル
• テキストスタイル
• エフェクト（shadow 等）
• スペーシング

デザイン → コーディングの移行が人力ゼロに近づく最強プラグインです。

この記事で紹介する内容

1. CSSGenの導入
2. Figma側で準備しておくべきスタイルガイド構成
3. SCSSに出力する設定方法
4. 実際に生成されるコード例
5. プロジェクトに組み込むときのベストプラクティス
6. つまづきポイントと回避策

1. CSSGenの導入

Plugins → Browse plugins… → "CSSGen" で検索 → Install

2. Figmaで準備するスタイルガイド

CSSGenを活かすには、Figmaのスタイルを次のようにまとめておくと効率が最大化します。

イメージ

ポイント：スタイル名をSCSSの変数として扱いやすい命名にしておくこと。

3. CSSGenでSCSSとしてエクスポート

CSSGenを起動すると、色々と設定ができます：

• Output: SCSS
• Color mode: rgb(rgba) or HEX など
• Name format: kebab / camel / snake など
• Root font size: 16px など
• Use rem font size: remでfont-sizeを指定するか
• Add prefix: prefixをつけるか
• Add style description: 注釈を出力するか

↓

Export を押すとSCSSが一括で生成！

4. 実際に生成されるSCSS例

こんな感じでスタイル一覧を出力してくれます。
このまま変数ファイルとして使えるクオリティ。

5. SCSSプロジェクトへ組み込むベストプラクティス

おすすめのファイル構成

個人的にはFLOCSSと相性がいいと思っています。
参考にしたのはこちらの方の記事↓
[CSS設計] 私のためのFLOCSSまとめ

css/
  ├─ foundation/
    ├─ reset.scss
    ├─ bace.scss
    ├─ ..
  ├─ grobal/
    ├─ mixin/
      ├─ font.scss    // 👈今回使うのはここ ///////////////////
      ├─ elevation.scss
      ├─ ..
    ├─ variable/
      ├─ color.scss   // 👈今回使うのはここ ///////////////////
      ├─ radius.scss
      ├─ ..
  ├─ layout/
    ├─ header.scss
    ├─ footer.scss
    ├─ ..
  ├─ liblary/
    ├─ slide.css　// 外部ライブラリで必要なcss
    ├─ ..
  ├─object/
    ├─component/
      ├─ button.scss
      ├─ ..
    ├─ project/
      ├─ banner.scss
      ├─ faq.scss
      ├─ ..
    ├─ paeg/
      ├─ about.scss
      ├─ contact.scss
      ├─ ..

font.scss

// CSSGenからコピーした値を貼り付け

@mixin textStyle10Regular() {
    font-size: 10px;
    font-family: Noto Sans JP;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
}
@mixin textStyle12Regular() {
    font-size: 12px;
    font-family: Noto Sans JP;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
}
@mixin textStyle14Bold() {
    font-size: 14px;
    font-family: Noto Sans JP;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
}

.
.
.

color.scss

// CSSGenからコピーした値を貼り付け

$colorSubbtnBg: #f8f4e6;
$colorMain1: #e56b21;
$colorMain1Light: #ff9a5d;
$colorMain1Dark: #c14900;
$colorGray: #939393;
$colorWhite: #ffffff;

.
.
.

呼び出し方法（例：ボタンのスタイル）

button.scss

// 使用するglobalファイルを@useで読み込み

@use "../../global/variable/color" as *;
@use "../../global/mixin/font" as *;

.c-button {
    @include textStyle14Bold;      // フォントスタイルの読み込み
    background-color: $colorMain1; // カラーの読み込み
    color: $colorWhite;            // カラーの読み込み
    padding: 18px 72px;
    border-radius: 2px;
    border: solid 1px $colorGray;  // カラーの読み込み
    transition: 0.2s;
    @include mq() {
        width: 100%;
        font-size: 14px;
        padding: 14.5px 0;
    }
    &:hover {
        background-color: $colorMain1Light;   // カラーの読み込み
    }
}

6. つまづきポイントと対処法

① Figmaのスタイル名がそのまま変数名になる
　→ 命名規則に気をつける

② 不要なスタイルまで含まれてしまう
　→ Figma上で「開発用」ページを分けて、そこだけ抽出するのが吉

③ シャドウなどが複雑すぎる場合
　→ ひとまずCSSGen出力をベースに、人力で調整するほうが早い時もある

まとめ

CSSGenを使うと、

• デザイン → コーディングの移行コストが激減
• 変数・タイポグラフィが自動で揃う
• プロジェクト開始時の「初期セットアップ」が爆速に

特に「デザインもコーディングも担当するデザイナー」にとっては、最強のブーストツールです。

Figmaでデザインシステム運用している方はぜひ試してみてください。