{"id":790,"date":"2025-09-28T17:48:13","date_gmt":"2025-09-28T08:48:13","guid":{"rendered":"https:\/\/cg-method.com\/figma\/?p=790"},"modified":"2025-09-28T18:04:13","modified_gmt":"2025-09-28T09:04:13","slug":"figma-style-export-csv","status":"publish","type":"post","link":"https:\/\/cg-method.com\/figma\/figma-style-export-csv\/","title":{"rendered":"Figma\u2502\u30b9\u30bf\u30a4\u30eb\u60c5\u5831\u4e00\u89a7\u3092\u51fa\u529b\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3"},"content":{"rendered":"\n

Figma\u3067\u7528\u3044\u3089\u308c\u308b\u30b9\u30bf\u30a4\u30eb\uff08\u30c6\u30ad\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb\uff65\u8272\u30b9\u30bf\u30a4\u30eb\uff09\u306fWeb\u30b5\u30a4\u30c8\u306e\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u59cb\u3081\u3001Unity\u306a\u3069\u69d8\u3005\u306a\u3068\u3053\u308d\u3067\u540c\u3058\u72b6\u614b\u306b\u306a\u308b\u3088\u3046\u306b\u53c2\u7167\u3057\u3066\u4f7f\u308f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u8ffd\u52a0\uff65\u524a\u9664\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u898f\u6a21\u306b\u3088\u3063\u3066\u3001\u76f8\u5f53\u6570\u306b\u5897\u3048\u308b\u306e\u3067\u3001\u3044\u3064\u3067\u3082\u4e00\u89a7\u304c\u51fa\u529b\u3067\u9727\u6cd5\u304c\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n

\u4eca\u56de\u306f\u30c7\u30b6\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u306b\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u60c5\u5831\u4e00\u89a7\u3092csv\u51fa\u529b\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u51fa\u529b\u3057\u3066\u3044\u308b\u60c5\u5831\u4f8b<\/p>\n\n\n

\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u304d\u307e\u3059 <\/i><\/span><\/div>\n
\u30b9\u30bf\u30a4\u30eb\u7a2e\u5225<\/th>\u30b9\u30bf\u30a4\u30ebID<\/th>\u540d\u524d<\/th>\u8aac\u660e<\/th>\u30ad\u30fc<\/th>\u8272\u7a2e\u5225<\/th>HEX<\/th>RGBA<\/th>\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc<\/th>\u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb<\/th>PostScript\u540d<\/th>\u6587\u5b57\u30b5\u30a4\u30ba<\/th>\u884c\u306e\u9ad8\u3055<\/th>\u5b57\u9593<\/th>\u6bb5\u843d\u9593\u9694<\/th>\u6bb5\u843d\u30a4\u30f3\u30c7\u30f3\u30c8<\/th>\u30c6\u30ad\u30b9\u30c8\u5909\u63db<\/th>\u88c5\u98fe<\/th>\u30a8\u30d5\u30a7\u30af\u30c8<\/th>\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9<\/th><\/tr><\/thead>
\u30ab\u30e9\u30fc<\/th>S:ceff4dcd93aa0cf7c489e30fba1d1882873cccf6,<\/td>beige<\/td><\/td>ceff4dcd93aa0cf7c489e30fba1d1882873cccf6<\/td>\u5358\u8272<\/td>#A59274<\/td>165, 146, 116, 1.000<\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
\u30c6\u30ad\u30b9\u30c8<\/th>S:7831a0b1d1ff42961bc89527a97872c5173981b6,<\/td>menu&button<\/td><\/td>7831a0b1d1ff42961bc89527a97872c5173981b6<\/td><\/td><\/td><\/td>YuGothic<\/td>Bold<\/td><\/td>17<\/td>30px<\/td>0%<\/td>0<\/td>0<\/td>ORIGINAL<\/td>NONE<\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
function toCSV(rows) {\n  var header = [\n    "\u30b9\u30bf\u30a4\u30eb\u7a2e\u5225",\n    "\u30b9\u30bf\u30a4\u30ebID",\n    "\u540d\u524d",\n    "\u8aac\u660e",\n    "\u30ad\u30fc",\n    "\u8272\u7a2e\u5225",\n    "HEX",\n    "RGBA",\n    "\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc",\n    "\u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb",\n    "PostScript\u540d",\n    "\u6587\u5b57\u30b5\u30a4\u30ba",\n    "\u884c\u306e\u9ad8\u3055",\n    "\u5b57\u9593",\n    "\u6bb5\u843d\u9593\u9694",\n    "\u6bb5\u843d\u30a4\u30f3\u30c7\u30f3\u30c8",\n    "\u30c6\u30ad\u30b9\u30c8\u5909\u63db",\n    "\u88c5\u98fe",\n    "\u30a8\u30d5\u30a7\u30af\u30c8",\n    "\u30ec\u30a4\u30a2\u30a6\u30c8\u30b0\u30ea\u30c3\u30c9",\n  ];<\/code><\/pre><\/div>\n\n\n\n
Figma\u306e\u30b9\u30bf\u30a4\u30eb\u60c5\u5831\u4e00\u89a7\u3092\u51fa\u529b\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3<\/h2>\n\n\n\n
\u3084\u308a\u65b9\u306f\u7c21\u5358\u3067\u3059\u3002<\/p>\n\n\n\n
\u81ea\u4f5c\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f5c\u6210\u3057\u3066\u30ed\u30fc\u30ab\u30eb\u306e\u30a2\u30d7\u30ea\u3067\u8aad\u307f\u8fbc\u3080\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u4ee5\u4e0b\u3001\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
manifest.json<\/h3>\n\n\n\n
{\n  "name": "\u30b9\u30bf\u30a4\u30ebCSV\u66f8\u304d\u51fa\u3057",\n  "id": "style-csv-exporter",\n  "api": "1.0.0",\n  "editorType": ["figma"],\n  "main": "code.js",\n  "ui": "ui.html"\n}\n<\/code><\/pre><\/div>\n\n\n\n
ui.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n  <head>\n    <meta charset="UTF-8" \/>\n    <style>\n      body {\n        font: 12px\/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,\n          "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;\n        padding: 12px;\n      }\n      .hint {\n        opacity: 0.8;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div>\u30b9\u30bf\u30a4\u30eb\u60c5\u5831\u3092CSV\u306b\u5909\u63db\u4e2d\u2026\u81ea\u52d5\u7684\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u304c\u59cb\u307e\u308a\u307e\u3059\u3002<\/div>\n    <div class="hint">\n      \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3092\u8a31\u53ef\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n    <\/div>\n\n    <script>\n      \/\/ \u53d7\u4fe1\u3057\u305fCSV\u6587\u5b57\u5217\u3092Blob\u306b\u3057\u3066\u4fdd\u5b58\n      window.onmessage = (event) => {\n        const msg = event.data?.pluginMessage;\n        if (!msg) return;\n\n        if (msg.type === "save-csv") {\n          const filename = msg.filename || "styles.csv";\n          const content = msg.content || "";\n          const blob = new Blob([content], { type: "text\/csv;charset=utf-8" });\n          const url = URL.createObjectURL(blob);\n\n          const a = document.createElement("a");\n          a.href = url;\n          a.download = filename;\n          document.body.appendChild(a);\n          a.click();\n          a.remove();\n\n          \/\/ URL\u958b\u653e & Figma\u5074\u3078\u5b8c\u4e86\u901a\u77e5\n          setTimeout(() => URL.revokeObjectURL(url), 1000);\n          parent.postMessage({ pluginMessage: { type: "done" } }, "*");\n        }\n      };\n    <\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\n
\u3042\u3068\u306fcode.js\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n
<\/div><\/div>","protected":false},"excerpt":{"rendered":"
Figma\u3067\u7528\u3044\u3089\u308c\u308b\u30b9\u30bf\u30a4\u30eb\uff08\u30c6\u30ad\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb\uff65\u8272\u30b9\u30bf\u30a4\u30eb\uff09\u306fWeb\u30b5\u30a4\u30c8\u306e\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u59cb\u3081\u3001Unity\u306a\u3069\u69d8\u3005\u306a\u3068\u3053\u308d\u3067\u540c\u3058\u72b6\u614b\u306b\u306a\u308b\u3088\u3046\u306b\u53c2\u7167\u3057\u3066\u4f7f\u308f\u308c\u307e\u3059\u3002 \u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u8ffd\u52a0\uff65\u524a\u9664\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u898f […]<\/p>\n","protected":false},"author":1,"featured_media":795,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[145],"tags":[144],"class_list":["post-790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-figma-tools","tag-144"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":3,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"predecessor-version":[{"id":800,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/790\/revisions\/800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media\/795"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}