Figmaで用いられるスタイル（テキストスタイル･色スタイル）はWebサイトのコーディングを始め、Unityなど様々なところで同じ状態になるように参照して使われます。
デザイナーが追加･削除するスタイルはプロジェクトの規模によって、相当数に増えるので、いつでも一覧が出力で霧法が便利です。
今回はデザインファイルに登録されているスタイルの情報一覧をcsv出力するプラグインを作成してみました。
出力している情報例
スクロールできます
| スタイル種別 | スタイルID | 名前 | 説明 | キー | 色種別 | HEX | RGBA | フォントファミリー | フォントスタイル | PostScript名 | 文字サイズ | 行の高さ | 字間 | 段落間隔 | 段落インデント | テキスト変換 | 装飾 | エフェクト | レイアウトグリッド |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| カラー | S:ceff4dcd93aa0cf7c489e30fba1d1882873cccf6, | beige | ceff4dcd93aa0cf7c489e30fba1d1882873cccf6 | 単色 | #A59274 | 165, 146, 116, 1.000 | |||||||||||||
| テキスト | S:7831a0b1d1ff42961bc89527a97872c5173981b6, | menu&button | 7831a0b1d1ff42961bc89527a97872c5173981b6 | YuGothic | Bold | 17 | 30px | 0% | 0 | 0 | ORIGINAL | NONE |
function toCSV(rows) {
var header = [
"スタイル種別",
"スタイルID",
"名前",
"説明",
"キー",
"色種別",
"HEX",
"RGBA",
"フォントファミリー",
"フォントスタイル",
"PostScript名",
"文字サイズ",
"行の高さ",
"字間",
"段落間隔",
"段落インデント",
"テキスト変換",
"装飾",
"エフェクト",
"レイアウトグリッド",
];目次
Figmaのスタイル情報一覧を出力するプラグイン
やり方は簡単です。
自作のプラグインを作成してローカルのアプリで読み込むだけです。
以下、実際のコードになります。
manifest.json
{
"name": "スタイルCSV書き出し",
"id": "style-csv-exporter",
"api": "1.0.0",
"editorType": ["figma"],
"main": "code.js",
"ui": "ui.html"
}
ui.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<style>
body {
font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
padding: 12px;
}
.hint {
opacity: 0.8;
}
</style>
</head>
<body>
<div>スタイル情報をCSVに変換中…自動的にダウンロードが始まります。</div>
<div class="hint">
ダウンロードできない場合は、ポップアップを許可してください。
</div>
<script>
// 受信したCSV文字列をBlobにして保存
window.onmessage = (event) => {
const msg = event.data?.pluginMessage;
if (!msg) return;
if (msg.type === "save-csv") {
const filename = msg.filename || "styles.csv";
const content = msg.content || "";
const blob = new Blob([content], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
// URL開放 & Figma側へ完了通知
setTimeout(() => URL.revokeObjectURL(url), 1000);
parent.postMessage({ pluginMessage: { type: "done" } }, "*");
}
};
</script>
</body>
</html>
あとはcode.jsだけです。