こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。
日々の開発の中で、こんな無力感を覚えたことはありませんか？

「Figma（やPenpot）でデザインの微調整が入るたびに、エンジニアがコード側のカラーコードやマージンを書き換える……これ、いつまで手作業でやればいいんだ？」
「デザイナーが意図した『ニュアンスのあるグレー』が、なぜか実装時には別の値になってしまっている」

デザインとコードの乖離は、プロダクトが成長するほどチームの足かせになります。
しかし、ご安心ください。オープンソースの本格的デザインツール「Penpot」と、モダンフロントエンドの「CSS変数（CSS Custom Properties）」を正しく組み合わせれば、この永年の悩みは綺麗に消え去ります。

今回は、Penpotのデザインシステムを、そのままコードベースへダイレクトに流し込む「真の同期ワークフロー」を、基礎から優しく丁寧に解説していきます。これをマスターすれば、毎日の作業が劇的に楽になりますよ！

—

1. なぜ「Penpot」なのか？ そしてCSS変数連携の破壊力

まず前提として、なぜ今回のテーマにPenpotを選ぶのか。
Figmaも素晴らしいツールですが、Penpotの最大の強みは「最初からWebの標準技術（SVGやCSS）をベースに設計されている点」にあります。Penpotの内部構造は、そのままWebのDOMやCSSと親和性が高いのです。

そこにCSS変数を組み合わせると、何が起きるか？

• デザイナーの変更が、ほぼリアルタイムでコードへ追従する
• デザイナーが「やっぱりプライマリカラーを少し明るくしよう」と変えた瞬間、トークン（変数）の値が更新され、プロダクション環境の見た目も変わる（※CI/CDパイプラインと組み合わせた場合）
• 「Design Token W3C Community Group」の規格に準拠したデータ構造を扱えるため、将来的な拡張性も抜群

「デザインとコードの間に翻訳者を置かない」。これが今回のゴールです。

—

2. 基礎セットアップ：Penpotで「デザインスキーム（トークン）」を定義する

まずはPenpot側の下準備から始めましょう。適当なプロジェクトを開いてください。

ステップ1：カラーとタイポグラフィの「名前」を抽象化する

ここで重要なのは、`#3B82F6` のような具体的な色コードを直接要素に塗るのではなく、「意味（セマンティクス）」でトークンを切ることです。

• ❌ 悪い例: `blue-500`
• ⭕️ 良い例: `color-primary` / `color-surface-background` / `color-text-main`

Penpotの「Colors」パネルと「Typography」パネルを使い、上記のようなセマンティックな名前でスタイルを登録していきます。これが、コード側のCSS変数名と1対1で対応する「共通言語」になります。

—

3. 動作確認：PenpotのデータをCSS変数として出力する（Hello World）

デザインができたら、それをコードの世界へ召喚しましょう。
PenpotのデータをCSS変数として出力し、簡単なHTML/CSSで動作確認（Hello World）を行います。

今回は、Penpotのエクスポート機能やAPI、またはデザインシステム管理プラグインを想定し、最終的に以下のようなCSS変数の塊（CSSファイル）が生成されると仮定します。

生成されたCSS変数ファイル (`tokens.css`)

/
Penpotから自動、もしくは手動で同期されたデザインシステムトークン
このファイルを書き換えるだけで、アプリ全体の色やフォントが連動します
/
:root {
/ Colors /
–color-primary: #6366f1; / ブランドのメインカラー /
–color-surface: #f8fafc; / 背景のベースカラー /
–color-text-main: #0f172a; / メインテキストのカラー /

/ Typography /
–font-family-base: ‘Inter’, sans-serif;
–font-size-lg: 1.25rem;
}

この `tokens.css` をプロジェクトの根底に読み込ませます。それでは、実際にこの変数を使って極上のUIを構築する「Hello World」コードを見てみましょう。

実装ファイル (`index.html`)

ブラウザでこのファイルを開いてみてください。そして、もし `tokens.css` の `–color-primary` の値を `#ec4899`（ピンク系）などに書き換えてみてください。
リロードするだけで、ボタンの色が一瞬で変わるはずです。これが、デザインとコードがシームレスに繋がった瞬間です！

—

4. 現場で役立つ！さらなる自動化のヒント

基礎が分かったところで、現場のエンジニアとしてもう一歩踏み込んだアドバイスを。「毎回手動で `tokens.css` を書き換えるの？」と思った方、鋭いですね。もちろん、ここを自動化してこそプロのワークフローです。

1. PenpotのAPI / 拡張機能の活用
Penpotはオープンソースであるため、APIを叩いてカラートークンをJSON形式で取得するスクリプトを自作できます。
2. Style Dictionaryなどのトランスパイラーの導入
デザインツールのトークンフォーマットを、CSS変数だけでなく、iOS（Swift）やAndroid（Kotlin）向けの変数へ一括変換するツール（Amazon Style Dictionaryなど）とPenpotを連携させると、マルチプラットフォーム開発が一気に加速します。

—

おわりに

いかがでしたでしょうか？
PenpotとCSS変数を組み合わせることで、「デザイン画を見ながら手動でカラーコードを打ち込む」という、エンジニアにとって最も退屈でミスしやすい作業を完全に過去のものにできます。

「デザインの変更が、そのままプロダクションへ直結する」。この爽快感を味わうと、もう元のバラバラなワークフローには戻れなくなりますよ。

ぜひ今日のプロジェクトから、あなたの開発環境にPenpotのCSS変数連携を取り入れてみてください。毎日のコーディングが、きっともっと楽しく、クリエイティブになりますよ！