Figma Dev Modeを骨の髄まで使い倒せ：デザイン・エンジニアリングの境界を消し去る自動化と最適化の極意
筆者は長年にわたり、数多のプロダクト開発組織で「デザインとコードの乖離」という構造的負債と戦ってきた。
デザイナーが描いたピクセルパーフェクトな夢と、エンジニアが叩く容赦ないリアルのコードベース。この二つの間に横たわる深い溝を埋めるため、かつて我々はRedpenを叩き、無数のスペックシート（仕様書）を書き、Slackで「このパディング、24pxですか？それとも28pxですか？」という不毛なやり取りを繰り返してきた。
Figmaの「Dev Mode」は、この歴史的な断絶に対するファイナルアンサーになり得る。
しかし、大半の開発現場では、Dev Modeを「ちょっとリッチになったインスペクター」程度にしか使っていない。それはフェラーリで近所のコンビニに行き、トランクにレジ袋を突っ込んでいるようなものだ。
本稿では、Dev Modeの本質的な内部アーキテクチャから、VS Code拡張を活用した開発ループの極限までの短縮、さらにはFigma REST APIとCLIを駆使したデザイン差分の完全自動CI/CDパイプライン構築まで、エンジニアが知るべきすべての知見を解き放つ。
—
1. なぜ「デザインのインスペクト」だけでは不十分なのか？
従来のFigma（Designモード）は、あくまで「描画キャンバス」である。レイヤー構造はフラットかつカオスであり、デザイナーの思考の軌跡がそのまま残されている。オートレイアウトが崩れていたり、グループ化の意図がコードのDOMツリーと完全に逆転していることは日常茶飯事だ。
Dev Modeは、この「デザイナーの思考空間」を「エンジニアの構造空間」へと変換するトランスレイターとして機能する。
コード生成のカスタマイズ（Code Connect）の真髄
Dev Modeの真骨頂は、右ペインに表示されるCSSやTailwindのコードをコピーすることではない。「自分たちのデザインシステム（コンポーネント）」に紐づけたネイティブコードを出力させることにある。
標準のコードジェネレータは、汎用的なCSSやSwiftUIを出力するが、実際のプロダクトでは自社製デザインシステムの `Button` コンポーネントや `Box` プリミティブに置き換えられるべきだ。ここで登場するのが Figma Code Connect である。
Code Connectを使用すると、Figma上のコンポーネントと、リポジトリ内のコード（React, Vue, iOS, Android等）を直接マッピングできる。
// ui/components/Button/Button.tsx と Figmaの “Primary Button” を接続する設定例
import { figma } from “@figma/code-connect”
figma.connect(
“https://www.figma.com/design/YOUR_FILE_KEY/DesignSystem?node-id=123-456”,
{
props: {
variant: figma.enum(“Variant”, {
Primary: “primary”,
Secondary: “secondary”,
}),
label: figma.string(“Label”),
isDisabled: figma.boolean(“Disabled”),
},
example: ({ variant, label, isDisabled }) => (
),
}
)
この設定をリポジトリに含め、`figma connect publish` をCIパイプラインに組み込むことで、Dev Mode上でデザイナーが選択したコンポーネントのプロパティに応じた「生きた自社製コンポーネントのコード」がエンジニアの画面に直接描画されるようになる。もはや、デザイン仕様書を見ながら手動でプロパティを変換する必要はない。
—
2. VS Code拡張機能による「エディタからの脱却ゼロ」開発ループ
真に効率的なエンジニアは、ブラウザとIDEを行き来しない。Figma公式の 「Figma for VS Code」 拡張機能は、エディタの中にデザインのコンテキストを完全に持ち込むためのキーストーンである。
エディタ上で差分（Diff）を監視する
Dev Modeの「Ready for dev（開発準備完了）」ステータスと連携し、VS Code上で「前回ビルドした時からどのデザインが変更されたか」を直接追跡できる。
1. VS CodeのサイドバーからFigmaアカウントに認証。
2. 対象のファイル/セクションをバインド。
3. コードを書いている最中に、関連するコンポーネントのデザイン変更があれば通知を受け取る。
さらに、コード内のクラス名やコンポーネント名から、対応するFigma上のノードへ逆引きでジャンプ（Deep Link）することも可能だ。この双方向のトレーサビリティが、仕様漏れや「知らぬ間にデザインが変わっていた」というデグレの温床を根絶する。
—
3. 【実践】Figma API × CLIによるデザイン差分自動化パイプライン
ここからが本題だ。UI/UXエンジニアとして、GUIでポチポチ操作するだけのワークフローに満足しているわけにはいかない。Figma REST APIと軽量なCLIスクリプトを組み合わせ、「デザインの更新を検知し、自動でTypeScriptの型定義やTokenを生成し、Pull Requestを作る」というDevOpsの自動化レイヤーを構築しよう。
以下のNode.jsスクリプトは、Figmaファイルから最新のデザイン変数を抽出し、TailwindのconfigやCSS変数にトランスパイルする完全自動化スクリプトのコアロジックである。
/
- figma-token-sync.js
- Figma REST APIを叩いて最新のDesign Tokensを抽出し、ローカルのJSON/CSSに吐き出すスクリプト
/
const https = require(‘https’);
const fs = require(‘fs’);
const path = require(‘path’);
const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN;
const FILE_KEY = process.env.FIGMA_FILE_KEY;
if (!FIGMA_TOKEN || !FILE_KEY) {
console.error(‘Error: FIGMA_ACCESS_TOKEN and FIGMA_FILE_KEY must be set.’);
process.exit(1);
}
const options = {
hostname: ‘api.figma.com’,
path: `/v1/files/${FILE_KEY}/variables/local`,
method: ‘GET’,
headers: {
‘X-Figma-Token’: FIGMA_TOKEN,
},
};
const req = https.request(options, (res) => {
let data = ”;
res.on(‘data’, (chunk) => {
data += chunk;
});
res.on(‘end’, () => {
if (res.statusCode !== 200) {
console.error(`Failed to fetch variables: ${res.statusCode} ${data}`);
process.exit(1);
}
const parsedData = JSON.parse(data);
const variables = parseFigmaVariables(parsedData);
// 抽出したトークンをプロジェクトのCSS変数として出力
const outputPath = path.join(__dirname, ‘../src/styles/tokens.css’);
fs.writeFileSync(outputPath, variables);
console.log(`Successfully generated design tokens at: ${outputPath}`);
});
});
req.on(‘error’, (error) => {
console.error(‘Network error:’, error);
process.exit(1);
});
req.end();
function parseFigmaVariables(data) {
// Figmaの複雑なVariablesメタデータをフラットなCSS変数に変換するパーサー
let cssContent = ‘:root {\n’;
const variableCollections = data.meta.variableCollections;
const variableMap = data.meta.variables;
for (const [id, variable] of Object.entries(variableMap)) {
// 簡易的なマッピング処理（実際にはモードやエイリアスの解決が必要）
const name = variable.name.replace(/\//g, ‘-‘).toLowerCase();
const resolvedType = variable.resolvedType;
// 値の取得ロジック（簡略化のため最初の値を使用）
const firstValueKey = Object.keys(variable.valuesByMode)[0];
let value = variable.valuesByMode[firstValueKey];
if (resolvedType === ‘COLOR’) {
// RGBAオブジェクトからCSSカラーコードへの変換
value = `rgba(${Math.round(value.r 255)}, ${Math.round(value.g 255)}, ${Math.round(value.b 255)}, ${value.a})`;
}
cssContent += ` –${name}: ${value};\n`;
}
cssContent += ‘}\n’;
return cssContent;
}
これをGitHub ActionsなどのCI/CDパイプラインに組み込むことで、デザイン側でカラーパレットやスペーシングが変更された瞬間に、PRが自動生成される仕組みを構築できる。
.github/workflows/sync-tokens.yml の例
name: Sync Figma Design Tokens
on:
schedule:
- cron: ‘0 0 ‘ # 毎日深夜に実行
workflow_dispatch:
jobs:
sync:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: ’20’
- run: npm install
- name: Run Token Sync Script
env:
FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}
node: scripts/figma-token-sync.js
- name: Create Pull Request
uses: peter-evans/create-pull-request@v6
with:
commit-message: ‘chore(design): sync latest tokens from Figma’
title: ‘🔄 Auto-sync Design Tokens from Figma’
body: ‘Figmaで更新された最新のVariablesを自動反映しました。’
branch: ‘auto/figma-tokens’
—
4. 大規模プロジェクトにおけるFigmaとメモリ/パフォーマンスの最適化
最後に、インフラおよびクライアントサイドのパフォーマンスハックについても触れておこう。
巨大なモノリシックなFigmaファイルは、ブラウザのメモリを食いつぶし、Dev Modeのレスポンスを著しく低下させる。数千のコンポーネントが単一のファイルに存在する場合、APIのレスポンスタイムも悪化し、前述の自動化スクリプトがタイムアウトする原因になる。
アーキテクチャの分割とライブラリ化
1. Foundation（Primitives）の分離: カラー、タイポグラフィ、スペーシングなどのトークン群は、独立した「Design Tokens専用ファイル」として切り離す。
2. Component Libraryのコンポーネント化: 各UIコンポーネントはパブリッシュされたライブラリとして管理し、プロダクトチームはそれを「アタッチ（参照）」する形で利用する。
3. API叩き分けの最適化: スクリプトやCode Connectで取得する際は、肥大化した画面用ファイル（Pages）を指定するのではなく、構造化されたライブラリファイルをピンポイントでターゲットにする。これにより、APIペイロードのサイズを最小化し、CIのビルド時間を秒単位に抑えることが可能になる。
—
結びにかえて：エンジニアがデザインを「握る」時代へ
Dev Modeは単なる「デザイン閲覧ツール」ではない。それは、「デザインをコードのソース・オブ・トゥルース（信頼できる唯一の情報源）と同等の、機械可読なアセットへと昇華させるためのインターフェース」である。
ツールの仕様に翻弄されるのではなく、APIを叩き、拡張機能をハックし、パイプラインを自らの手で構築せよ。デザインとコードの境界線を完全にハックしたとき、あなたのプロダクト開発速度は、競合が追いつけない次元へと加速するはずだ。