{"id":6314,"date":"2025-07-05T13:10:03","date_gmt":"2025-07-05T11:10:03","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=6314"},"modified":"2025-07-09T11:31:48","modified_gmt":"2025-07-09T09:31:48","slug":"tokens-studio-figma","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/","title":{"rendered":"Tokens Studio f\u00fcr Figma"},"content":{"rendered":"<p data-start=\"271\" data-end=\"612\">In Figma gibt es seit einiger Zeit ein Plugin namens <strong data-start=\"324\" data-end=\"341\">Tokens Studio<\/strong>, mit dem sich Variablen aus Figma in sogenannte Design Tokens umwandeln und beispielsweise per Git exportieren lassen. Design Tokens vereinfachen die Pflege und Konsistenz von Designsystemen erheblich und schaffen eine gemeinsame Sprache zwischen Design und Entwicklung.<\/p>\n<p data-start=\"614\" data-end=\"683\">Die Verwendung von Design Tokens bringt zahlreiche Vorteile mit sich:<\/p>\n<ul data-start=\"685\" data-end=\"1279\">\n<li data-start=\"685\" data-end=\"800\">\n<p data-start=\"687\" data-end=\"800\"><strong data-start=\"687\" data-end=\"711\">Zentrale Verwaltung:<\/strong> Design-Parameter werden zentral gepflegt und k\u00f6nnen system\u00fcbergreifend verwendet werden.<\/p>\n<\/li>\n<li data-start=\"801\" data-end=\"922\">\n<p data-start=\"803\" data-end=\"922\"><strong data-start=\"803\" data-end=\"826\">Einfachere Wartung:<\/strong> \u00c4nderungen m\u00fcssen nur an einer Stelle vorgenommen werden, was die Pflege erheblich erleichtert.<\/p>\n<\/li>\n<li data-start=\"923\" data-end=\"1026\">\n<p data-start=\"925\" data-end=\"1026\"><strong data-start=\"925\" data-end=\"951\">Bessere Kommunikation:<\/strong> Design und Entwicklung arbeiten mit den gleichen Begriffen und Grundlagen.<\/p>\n<\/li>\n<li data-start=\"1027\" data-end=\"1163\">\n<p data-start=\"1029\" data-end=\"1163\"><strong data-start=\"1029\" data-end=\"1048\">Skalierbarkeit:<\/strong> Design-Parameter lassen sich flexibel f\u00fcr verschiedene Endger\u00e4te und Plattformen einsetzen (z.\u202fB. Websites, Apps).<\/p>\n<\/li>\n<li data-start=\"1164\" data-end=\"1279\">\n<p data-start=\"1166\" data-end=\"1279\"><strong data-start=\"1166\" data-end=\"1194\">Automatisierte \u00dcbergabe:<\/strong> Design-Parameter k\u00f6nnen teilweise automatisiert an die Entwicklung \u00fcbergeben werden.<\/p>\n<\/li>\n<\/ul>\n<div id=\"attachment_6339\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6339\" class=\"wp-image-6339 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/tokens_schema-1.png\" alt=\"Schema des Arbeitsablaufes\" width=\"1170\" height=\"403\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/tokens_schema-1.png 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/tokens_schema-1-300x103.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/tokens_schema-1-1024x353.png 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/tokens_schema-1-768x265.png 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6339\" class=\"wp-caption-text\">Schema des Arbeitsablaufes<\/p><\/div>\n<h2 data-start=\"1911\" data-end=\"1968\">1. Variablen in Figma einrichten<\/h2>\n<p data-start=\"1911\" data-end=\"1968\">Zun\u00e4chst m\u00fcssen die Variablen in Figma erstellt werden.<\/p>\n<p data-start=\"1970\" data-end=\"2218\">Variablen sind zentrale Bausteine, in denen alle Design-Parameter wie Schriftarten, Farben, Abst\u00e4nde usw. definiert werden. Designer sollten sich intensiv mit dem Thema auseinandersetzen, da die Nutzung von Variablen grunds\u00e4tzlich empfohlen wird.<\/p>\n<p data-start=\"2220\" data-end=\"2438\">In Figma lassen sich Variablen <strong data-start=\"2251\" data-end=\"2260\">lokal<\/strong> oder <strong data-start=\"2266\" data-end=\"2276\">global<\/strong> anlegen. Es empfiehlt sich, globale Variablen zu verwenden, da f\u00fcr jeden Entwurf eigene Variablen anzulegen sehr aufwendig und im Agenturalltag unpraktisch w\u00e4re.<\/p>\n<div id=\"attachment_6331\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6331\" class=\"wp-image-6331 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/1_figma_variablen-1.jpg\" alt=\"Variablen in Figma definieren und den Komponenten zuweisen\" width=\"1170\" height=\"591\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/1_figma_variablen-1.jpg 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/1_figma_variablen-1-300x152.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/1_figma_variablen-1-1024x517.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/1_figma_variablen-1-768x388.jpg 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6331\" class=\"wp-caption-text\">Variablen in Figma definieren und den Komponenten zuweisen<\/p><\/div>\n<h2 data-start=\"2220\" data-end=\"2438\">2. Plugin in Figma installieren<\/h2>\n<p data-start=\"2483\" data-end=\"2716\">Im n\u00e4chsten Schritt installierst du das Plugin <strong data-start=\"2530\" data-end=\"2547\">Tokens Studio<\/strong> in Figma. Dazu rufst du \u00fcber den Action-Button die Plugin-\u00dcbersicht auf. Die Handhabung ist recht einfach, deshalb gehe ich hier nicht n\u00e4her auf die Installation ein.<\/p>\n<p data-start=\"2718\" data-end=\"2803\">Nach der Installation kannst du einen leeren Token oder einen Beispiel-Token anlegen.<\/p>\n<div id=\"attachment_6332\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6332\" class=\"wp-image-6332 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/2_figma_tokens_studio_installieren-1.jpg\" alt=\"Tokens Studio in Figma installieren\" width=\"1170\" height=\"591\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/2_figma_tokens_studio_installieren-1.jpg 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/2_figma_tokens_studio_installieren-1-300x152.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/2_figma_tokens_studio_installieren-1-1024x517.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/2_figma_tokens_studio_installieren-1-768x388.jpg 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6332\" class=\"wp-caption-text\">Tokens Studio in Figma installieren<\/p><\/div>\n<h2 data-start=\"2718\" data-end=\"2803\">3. Web Tokens exportieren<\/h2>\n<p data-start=\"2842\" data-end=\"3073\">Um die Web Tokens sp\u00e4ter exportieren zu k\u00f6nnen, ben\u00f6tigst du einen GitHub- oder GitLab-Account. Alternativ lassen sich die Tokens auch als JSON-Datei lokal speichern. Diese Option wirst du jedoch in der Praxis eher selten nutzen.<\/p>\n<p data-start=\"3075\" data-end=\"3327\">Die Entwickler des Plugins empfehlen grunds\u00e4tzlich GitHub oder GitLab. Nach Eintragen der Zugangsdaten im Plugin kannst du die Tokens direkt ins jeweilige Repository exportieren oder daraus importieren. Screenshots dazu findest du ebenfalls im Artikel.<\/p>\n<div id=\"attachment_6324\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6324\" class=\"wp-image-6324 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_2.jpg\" alt=\"Github Repo in Tokens Studio hinterlegen (Schritt 1)\" width=\"1170\" height=\"737\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_2.jpg 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_2-300x189.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_2-1024x645.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_2-768x484.jpg 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6324\" class=\"wp-caption-text\">Github Repo in Tokens Studio hinterlegen (Schritt 1)<\/p><\/div>\n<div id=\"attachment_6323\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6323\" class=\"wp-image-6323 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_1.jpg\" alt=\"Github Repo in Tokens Studio hinterlegen (Schritt 2)\" width=\"1170\" height=\"737\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_1.jpg 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_1-300x189.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_1-1024x645.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/3_figma_tokens_github_einstellungen_1-768x484.jpg 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6323\" class=\"wp-caption-text\">Github Repo in Tokens Studio hinterlegen (Schritt 2)<\/p><\/div>\n<div id=\"attachment_6325\" style=\"width: 1180px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6325\" class=\"wp-image-6325 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/5_figma_tokens_studio_variablen_import.jpg\" alt=\"Variablen in Tokens Studio importieren und pushen\" width=\"1170\" height=\"737\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/5_figma_tokens_studio_variablen_import.jpg 1170w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/5_figma_tokens_studio_variablen_import-300x189.jpg 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/5_figma_tokens_studio_variablen_import-1024x645.jpg 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/5_figma_tokens_studio_variablen_import-768x484.jpg 768w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><p id=\"caption-attachment-6325\" class=\"wp-caption-text\">Variablen in Tokens Studio importieren und pushen<\/p><\/div>\n<h2 data-start=\"3075\" data-end=\"3327\">4. Design Tokens in SCSS umwandeln<\/h2>\n<p data-start=\"3375\" data-end=\"3509\">Was passiert nun mit den Design Tokens im Git-Repository? Diese m\u00fcssen nat\u00fcrlich noch in CSS- oder JavaScript-Code \u00fcberf\u00fchrt werden.<\/p>\n<p data-start=\"3511\" data-end=\"3754\">In diesem Beispiel verwende ich die Tokens, um SCSS-Variablen aus Bootstrap zu \u00fcberschreiben. Das CSS-Framework nutzt ebenfalls Variablen, mit denen sich das Layout anpassen l\u00e4sst. Wichtig ist, dass die <strong data-start=\"3714\" data-end=\"3751\">Namenskonventionen \u00fcbereinstimmen<\/strong>.<\/p>\n<p data-start=\"3756\" data-end=\"3869\">Zum Beispiel muss die Figma-Variable f\u00fcr den Hintergrund genau so hei\u00dfen wie die Bootstrap-Variable <code data-start=\"3856\" data-end=\"3866\">$body-bg<\/code>.<\/p>\n<p data-start=\"3871\" data-end=\"4054\">Um die Tokens in eine SCSS-Datei umzuwandeln, ben\u00f6tigst du das npm-Paket <code data-start=\"3944\" data-end=\"3974\">@tokens-studio\/sd-transforms<\/code>. Voraussetzung ist, dass npm auf deiner Entwicklungsumgebung installiert ist.<\/p>\n<p data-start=\"4056\" data-end=\"4069\">Installation:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">npm install @tokens-studio\/sd-transforms<\/pre>\n<p>Danach kannst du die Tokens in SCSS, Less oder CSS umwandeln. Ich verwende dazu Node.js und f\u00fchre folgende JavaScript-Datei aus.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">node build-output.js<\/pre>\n<p>Die build-output.js baut sich folgenderma\u00dfen auf.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">import { register } from '@tokens-studio\/sd-transforms';\r\nimport StyleDictionary from 'style-dictionary';\r\n\r\nregister(StyleDictionary, {\r\n    excludeParentKeys: true,\r\n});\r\n\r\nconst sd = new StyleDictionary({\r\n    source: ['token.json'],\r\n    preprocessors: ['tokens-studio'],\r\n    platforms: {\r\n        css: {\r\n            transformGroup: 'tokens-studio',\r\n            transforms: ['name\/kebab'],\r\n            buildPath: 'Resources\/Public\/scss\/',\r\n            files: [\r\n                {\r\n                    destination: 'variables-figma.scss',\r\n                    format: 'scss\/variables',\r\n                },\r\n            ],\r\n        },\r\n    },\r\n});\r\n\r\nawait sd.cleanAllPlatforms();\r\nawait sd.buildAllPlatforms();\r\n<\/pre>\n<p>In meinem Beispiel generiere ich eine zus\u00e4tzliche SCSS-Datei und binde sie anschlie\u00dfend in das CSS-Framework ein. Dabei ist die Reihenfolge der Variablen wichtig. Die bootstrap.scss habe ich hierzu durch diese Zeilen erg\u00e4nzt.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@import \"variables-figma\";\r\n.btn-primary {\r\n  color: $btn-color !important;\r\n}\r\n@import \"variables\";\r\n<\/pre>\n<p>\u00dcber den <strong data-start=\"380\" data-end=\"396\">File Watcher<\/strong> in PHPStorm kannst du aus den SCSS-Dateien eine CSS-Datei erzeugen.<br data-start=\"481\" data-end=\"484\" \/>Du brauchst <strong>npm auf dem Live-System nicht installieren<\/strong>, da die Kompilierung bereits auf deiner lokalen Entwicklungsumgebung erfolgt.<br data-start=\"625\" data-end=\"628\" \/>Die fertige CSS-Datei wird dann einfach mit dem n\u00e4chsten Deployment auf das Live-System hochgeladen.<\/p>\n<h3 data-start=\"735\" data-end=\"770\"><strong data-start=\"739\" data-end=\"770\">Alternative: Build-Pipeline<\/strong><\/h3>\n<p data-start=\"772\" data-end=\"1028\">Eine weitere Automatisierung ist \u00fcber eine <strong data-start=\"815\" data-end=\"833\">Build-Pipeline <\/strong>nat\u00fcrlich m\u00f6glich (z.\u202fB. mit GitHub Actions oder GitLab CI) und w\u00e4re sogar zu empfehlen.<br data-start=\"884\" data-end=\"887\" \/>In diesem Fall erfolgt die Umwandlung der SCSS-Dateien in CSS-Dateien direkt <strong data-start=\"964\" data-end=\"981\">im Repository<\/strong>, also serverseitig \u2014 ohne lokale Kompilierung.<\/p>\n<h3 data-start=\"5432\" data-end=\"5472\">Voraussetzungen f\u00fcr die Testumgebung<\/h3>\n<ul data-start=\"5474\" data-end=\"5553\">\n<li data-start=\"5474\" data-end=\"5515\">\n<p data-start=\"5476\" data-end=\"5515\">Entwicklungsumgebung (z.\u202fB. ddev, MAMP)<\/p>\n<\/li>\n<li data-start=\"5474\" data-end=\"5515\">\n<p data-start=\"5476\" data-end=\"5515\">PHP 8.2<\/p>\n<\/li>\n<li data-start=\"5526\" data-end=\"5536\">\n<p data-start=\"5528\" data-end=\"5536\">Composer<\/p>\n<\/li>\n<li data-start=\"5537\" data-end=\"5547\">\n<p data-start=\"5539\" data-end=\"5547\">TYPO3 13<\/p>\n<\/li>\n<li data-start=\"5548\" data-end=\"5553\">\n<p data-start=\"5550\" data-end=\"5553\">npm<\/p>\n<\/li>\n<li data-start=\"5548\" data-end=\"5553\">PHPStorm<\/li>\n<\/ul>\n<h2 data-start=\"1178\" data-end=\"1212\"><strong data-start=\"1182\" data-end=\"1212\">Aktuelle Hinweise &amp; Trends<\/strong><\/h2>\n<h3 data-start=\"1214\" data-end=\"1246\"><strong data-start=\"1219\" data-end=\"1246\">Figma Modes &amp; Variablen<\/strong><\/h3>\n<p data-start=\"1248\" data-end=\"1461\">Mit den <strong data-start=\"1256\" data-end=\"1265\">Modes<\/strong> in Figma k\u00f6nnen Variablen noch flexibler f\u00fcr verschiedene Designzust\u00e4nde (z.\u202fB. Light\/Dark Mode) definiert werden.<br data-start=\"1380\" data-end=\"1383\" \/>Das erleichtert die Verwaltung von Farbschemata und Style-Varianten erheblich.<\/p>\n<h3 data-start=\"1463\" data-end=\"1486\"><strong data-start=\"1468\" data-end=\"1486\">Figma Dev Mode<\/strong><\/h3>\n<p data-start=\"1488\" data-end=\"1672\">Der <strong data-start=\"1492\" data-end=\"1504\">Dev Mode<\/strong> in Figma wurde entwickelt, um die Zusammenarbeit mit Entwicklern zu verbessern.<br data-start=\"1584\" data-end=\"1587\" \/>Design Tokens und Variablen lassen sich hier noch einfacher einsehen und exportieren.<\/p>\n<h3 data-start=\"1674\" data-end=\"1715\"><strong data-start=\"1679\" data-end=\"1715\">Automatisierte CI\/CD-Integration<\/strong><\/h3>\n<p data-start=\"1717\" data-end=\"1958\">Immer mehr Teams integrieren den Export der Tokens direkt in <strong data-start=\"1778\" data-end=\"1812\">automatisierte Build-Pipelines<\/strong>.<br data-start=\"1813\" data-end=\"1816\" \/>Mit GitHub Actions oder GitLab CI k\u00f6nnen \u00c4nderungen an den Tokens automatisch ins Repository \u00fcbernommen und sofort im Frontend wirksam werden.<\/p>\n<h2 data-start=\"5560\" data-end=\"5569\">Fazit<\/h2>\n<p data-start=\"5571\" data-end=\"5936\">Mit <strong data-start=\"1984\" data-end=\"2011\">Tokens Studio f\u00fcr Figma<\/strong> lassen sich Designentscheidungen systematisch dokumentieren und nahtlos in den Entwicklungsprozess \u00fcbertragen.<br data-start=\"2122\" data-end=\"2125\" \/>Durch die Kombination mit Bootstrap und TYPO3 entsteht ein konsistentes, wartbares und flexibles System.<br data-start=\"2229\" data-end=\"2232\" \/>Das hier vorgestellte Vorgehen ist leicht erweiterbar und st\u00e4rkt die Zusammenarbeit zwischen Design und Entwicklung sp\u00fcrbar.<\/p>\n<h3 data-start=\"2363\" data-end=\"2379\"><strong data-start=\"2367\" data-end=\"2379\">Vorteile<\/strong><\/h3>\n<ul data-start=\"2381\" data-end=\"2641\">\n<li data-start=\"2381\" data-end=\"2423\">\n<p data-start=\"2383\" data-end=\"2423\">Designvorgaben werden zentral verwaltet.<\/p>\n<\/li>\n<li data-start=\"2424\" data-end=\"2463\">\n<p data-start=\"2426\" data-end=\"2463\">Tokens k\u00f6nnen wiederverwendet werden.<\/p>\n<\/li>\n<li data-start=\"2464\" data-end=\"2526\">\n<p data-start=\"2466\" data-end=\"2526\">Vereinfachte Zusammenarbeit zwischen Design und Entwicklung.<\/p>\n<\/li>\n<li data-start=\"2527\" data-end=\"2586\">\n<p data-start=\"2529\" data-end=\"2586\">Plattformunabh\u00e4ngige Arbeit dank Figma und Tokens Studio.<\/p>\n<\/li>\n<li data-start=\"2587\" data-end=\"2641\">\n<p data-start=\"2589\" data-end=\"2641\">\u00c4nderungen k\u00f6nnen automatisiert aktualisiert werden.<\/p>\n<\/li>\n<\/ul>\n<h3><strong data-start=\"2652\" data-end=\"2665\">Nachteile<\/strong><\/h3>\n<ul data-start=\"2667\" data-end=\"2788\">\n<li data-start=\"2667\" data-end=\"2692\">\n<p data-start=\"2669\" data-end=\"2692\">Relativ hohe Lernkurve.<\/p>\n<\/li>\n<li data-start=\"2693\" data-end=\"2732\">\n<p data-start=\"2695\" data-end=\"2732\">Der Workflow in Figma wird komplexer.<\/p>\n<\/li>\n<li data-start=\"2733\" data-end=\"2788\">\n<p data-start=\"2735\" data-end=\"2788\">Durch zus\u00e4tzliche Tools steigt die Gesamtkomplexit\u00e4t.<\/p>\n<\/li>\n<\/ul>\n<p>Hast du bereits Erfahrungen mit Design Tokens in Figma? Teile uns deine Erfahrungen gerne in den Kommentaren mit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Figma gibt es seit einiger Zeit ein Plugin namens Tokens Studio, mit dem sich Variablen aus Figma in sogenannte Design Tokens umwandeln und beispielsweise per Git exportieren lassen. Design [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":6342,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137,138],"tags":[46,258,66],"class_list":["post-6314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-tools","tag-erweiterung","tag-figma","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tokens Studio f\u00fcr Figma - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tokens Studio f\u00fcr Figma - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-05T11:10:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-09T09:31:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"835\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Leonhard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Leonhard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/\"},\"author\":{\"name\":\"Leonhard\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/46faf1999297ad77a16b0aae3511c0f2\"},\"headline\":\"Tokens Studio f\u00fcr Figma\",\"datePublished\":\"2025-07-05T11:10:03+00:00\",\"dateModified\":\"2025-07-09T09:31:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/\"},\"wordCount\":911,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg\",\"keywords\":[\"Erweiterung\",\"Figma\",\"Webdesign\"],\"articleSection\":[\"Frontend\",\"Tools\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/\",\"name\":\"Tokens Studio f\u00fcr Figma - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg\",\"datePublished\":\"2025-07-05T11:10:03+00:00\",\"dateModified\":\"2025-07-09T09:31:48+00:00\",\"description\":\"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg\",\"width\":1170,\"height\":835,\"caption\":\"Nothing will stop us now. Shot of two athletes passing a baton during a relay race\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/tokens-studio-figma\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tokens Studio f\u00fcr Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/46faf1999297ad77a16b0aae3511c0f2\",\"name\":\"Leonhard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g\",\"caption\":\"Leonhard\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/leonhard\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tokens Studio f\u00fcr Figma - clickstorm Blog","description":"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/","og_locale":"de_DE","og_type":"article","og_title":"Tokens Studio f\u00fcr Figma - clickstorm Blog","og_description":"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.","og_url":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2025-07-05T11:10:03+00:00","article_modified_time":"2025-07-09T09:31:48+00:00","og_image":[{"width":1170,"height":835,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg","type":"image\/jpeg"}],"author":"Leonhard","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Leonhard","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/"},"author":{"name":"Leonhard","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/46faf1999297ad77a16b0aae3511c0f2"},"headline":"Tokens Studio f\u00fcr Figma","datePublished":"2025-07-05T11:10:03+00:00","dateModified":"2025-07-09T09:31:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/"},"wordCount":911,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg","keywords":["Erweiterung","Figma","Webdesign"],"articleSection":["Frontend","Tools"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/","url":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/","name":"Tokens Studio f\u00fcr Figma - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg","datePublished":"2025-07-05T11:10:03+00:00","dateModified":"2025-07-09T09:31:48+00:00","description":"Mit Tokens Studio f\u00fcr Figma Design Tokens erstellen, verwalten und in CSS \u00fcberf\u00fchren \u2013 f\u00fcr eine bessere Zusammenarbeit mit der Entwicklung.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2025\/07\/nothing-will-stop-us-now-shot-of-two-athletes-pas-2025-04-05-20-57-42-utc.jpg","width":1170,"height":835,"caption":"Nothing will stop us now. Shot of two athletes passing a baton during a relay race"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/tokens-studio-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Tokens Studio f\u00fcr Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/46faf1999297ad77a16b0aae3511c0f2","name":"Leonhard","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/95ebfd8c80441c4c7204a4b12163564adef29c62ebd405021bddc1bd785acb0a?s=96&d=mm&r=g","caption":"Leonhard"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/leonhard\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/6314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=6314"}],"version-history":[{"count":20,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/6314\/revisions"}],"predecessor-version":[{"id":6353,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/6314\/revisions\/6353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/6342"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=6314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=6314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=6314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}