{"id":4513,"date":"2022-05-23T13:03:00","date_gmt":"2022-05-23T11:03:00","guid":{"rendered":"https:\/\/www.esterdigital.de\/blog\/mobile-first-vs-responsive-webdesign-wahlen-sie-ihren-kampfer-copy"},"modified":"2023-09-21T16:21:54","modified_gmt":"2023-09-21T14:21:54","slug":"design-tokens-als-leistungsstarke-design-system-tools","status":"publish","type":"post","link":"https:\/\/www.esterdigital.de\/blog\/design-tokens-als-leistungsstarke-design-system-tools","title":{"rendered":"Design Tokens als leistungsstarke Design-System-Tools"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4513\" class=\"elementor elementor-4513\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60ffea5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60ffea5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1c7c69\" data-id=\"b1c7c69\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-888fccb elementor-widget elementor-widget-text-editor\" data-id=\"888fccb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.4 - 23-01-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-paragraph rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" spellcheck=\"false\" aria-multiline=\"true\" aria-label=\"Absatz-Block\" data-block=\"34421c7e-2063-402a-8390-f262b42cc5db\" data-type=\"core\/paragraph\" data-title=\"Absatz\" data-empty=\"false\" data-lt-tmp-id=\"lt-311620\" data-gramm=\"false\"><!-- wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- wp:paragraph --><\/h2>\n<p>Auf dem heutigen wettbewerbsintensiven Markt versuchen die Unternehmen, so viele digitale Kan\u00e4le wie m\u00f6glich zu nutzen, um ihre Produkte zu bewerben. Und das scheint eine vern\u00fcnftige Strategie zu sein. Aber das funktioniert nicht immer so. Je mehr Webplattformen ein Unternehmen nutzt, desto mehr Schwierigkeiten und Verwirrung gibt es f\u00fcr seine Kunden. Zum Gl\u00fcck f\u00fcr beide Seiten wurde diese Frage mit dem Aufkommen des Design-Systems weniger problematisch.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Aber was ist mit der anderen, internen Seite des Prozesses, n\u00e4mlich <a href=\"\/leistungen\/corporate-web-design\">Design<\/a> und <a href=\"\/leistungen\/webentwicklung\">Entwicklung<\/a>? Reicht das <a href=\"https:\/\/www.esterdigital.de\/blog\/design-system-ein-unverzichtbares-design-tool\">Design-System<\/a> aus, um alle beteiligten Kan\u00e4le voll auszusch\u00f6pfen? Nein. Der Einsatz eines Design-Systems ist nur die halbe Miete, denn es hat seine T\u00fccken, die sich besonders bei der Frontend-Entwicklung bemerkbar machen k\u00f6nnen. Wie kann man dieser Diskrepanz entgehen? Die Antwort lautet: Design Tokens.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Was sind Design Tokens?<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Wahrscheinlich haben Sie schon von den Non-Fungible Tokens (NFT) geh\u00f6rt, die den digitalen Raum schnell erobern. Wir wollen Sie nicht mit den Details langweilen und sagen einfach, dass die Tokenisierung hinter allem steckt. Damit war das Konzept des Design Tokens geboren.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Was sind also Design Tokens? Im Wesentlichen handelt es sich bei Design Tokens um Basiswerte f\u00fcr Abst\u00e4nde, Abrundungen, Farben, Animationen usw., die f\u00fcr das Erstellen und Pflegen eines Design-Systems ben\u00f6tigt werden. Sie werden anstelle von hartkodierten Werten verwendet und k\u00f6nnen in jedes beliebige Format konvertiert werden &#8211; sei es eine Website, eine Webanwendung oder eine iOS-App. Wie funktioniert das?<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Jedes Token erh\u00e4lt einen Namen, der sich auf eine bestimmte Designentscheidung und den gewissen Wert bezieht. Angenommen, die Grundfarbe Ihrer Marke ist Ultimate Gray #939597 (Die Pantone Farbe des Jahres 2021). Das Design Token lautet dann primary.color = #939597, wobei &#8222;primary.color&#8220; f\u00fcr den Namen und &#8222;#939597&#8220; f\u00fcr den Wert steht. Und wenn man sich das digitale Produkt genauer ansieht, kann man das folgende Muster erkennen: Funktion &#8211; Schnittstelle &#8211; Komponente &#8211; Design Token. Das Wichtigste dabei ist, dass es sich bei den Design Tokens um dynamische und nicht um statische Werte handelt. Wenn Sie also Ihre Farbe in Very Peri #6667AB \u00e4ndern m\u00f6chten, da sich die Trends ge\u00e4ndert haben, und sie in verschiedenen Umgebungen einsetzen m\u00f6chten, k\u00f6nnen Sie das tun, indem Sie einfach den Wert in #6667AB \u00e4ndern. Daher l\u00e4sst sie sich \u00fcberall, wo sie verwendet wird, leicht umwandeln, und zwar nach dem umgekehrten Schema: Designl\u00f6sung &#8211; Design Token &#8211; Komponente &#8211; Schnittstelle &#8211; Funktion (auf allen Plattformen und Frameworks). Sieht beeindruckend aus, warum sollte man aber von hartkodierten Werten zu Design Tokens wechseln?<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Design Tokens vs. Regul\u00e4re Variablen<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Um diese Frage zu beantworten, muss man zun\u00e4chst den Unterschied zwischen den regul\u00e4ren Variablen und einem Design Token feststellen. Die Farbeigenschaft in den regul\u00e4ren Variablen wird wie $gray = #939597 aussehen (bei Verwendung in einem CSS-Pr\u00e4prozessor wie SaaS). Dieser Ansatz hilft Ihnen zwar, Ihre Designparameter zu strukturieren, sagt aber im Gegensatz zum Design Token nichts \u00fcber die Verwendung der Farbe aus (primary.colour = #939597, d. h. Grau wird als Prim\u00e4rfarbe f\u00fcr Ihre Anwendungen verwendet). Das bedeutet, dass Variablen des Design-Systems die L\u00fccke zwischen der Benennung und der Verwendung von Designeigenschaften nicht schlie\u00dfen, w\u00e4hrend Design Tokens das tun.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Dar\u00fcber hinaus sind Design Tokens plattformunabh\u00e4ngig, was bedeutet, dass sie viel flexibler sind, wenn es um die Skalierbarkeit des Designs geht. Anstatt den Wert in einer CSS-Datei zu speichern und ihn in jede Anwendung oder Website (die normalerweise in einer separaten Datei wie JSON aufbewahrt wird) zu kopieren, k\u00f6nnen Design Tokens in jede Codebasis eingelesen werden. Auf diese Weise k\u00f6nnen sie gleichzeitig auf Ihrer Website, in Ihrer Android- oder iOS-App verwenden werden.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p><strong><em>Ester Digital bietet Dienstleistungen wie\u00a0<a href=\"\/leistungen\/ui-ux-design\">UI\/UX Design<\/a>,\u00a0<a href=\"\/leistungen\/logodesign\">Logo-Entwicklung<\/a>,\u00a0<a href=\"\/leistungen\/corporate-web-design\">Corporate Design<\/a>, <a href=\"https:\/\/www.esterdigital.de\/leistungen\/webentwicklung\">Webentwicklung<\/a> &amp; <a href=\"https:\/\/www.esterdigital.de\/blog\/full-stack-developer-was-ist-das\">Full Stack Development<\/a>, <a href=\"\/leistungen\/website-relaunch-redesign\">Website Relaunch<\/a>\u00a0und mehr an.\u00a0<a href=\"\/kontakte\">Sie k\u00f6nnen uns hier kontaktieren!<\/a><\/em><\/strong><\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Wie Design Tokens den Designprozess beeinflussen<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Die Aktualisierung eines einzelnen Wertes erfordert nicht viel Zeit. Aber bei wirklich umfangreichen Projekten mit Dutzenden von Designkomponenten ist es sehr zeitaufw\u00e4ndig, Werte manuell anzupassen oder zu \u00e4ndern. Und was ist, wenn Sie versehentlich einige von ihnen \u00fcbersehen? Schlie\u00dflich machen wir alle Fehler. Aus diesem Grund haben Design Tokens eine Reihe von Vorteilen gegen\u00fcber hartkodierten Werten. Und wenn Sie immer noch Zweifel haben, schauen Sie sich an, wie Design Tokens den Designprozess verbessern k\u00f6nnen:<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sie erh\u00f6hen die Flexibilit\u00e4t und automatisieren den Designprozess<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>In der Regel enth\u00e4lt jedes Design-System eine Reihe von wiederverwendbaren Elementen, die als flexibel angesehen werden k\u00f6nnen. Schlie\u00dflich k\u00f6nnen sie ver\u00e4ndert und an unterschiedliche Bedingungen angepasst werden. Mit den Design Tokens wird diese Flexibilit\u00e4t jedoch auf eine neue Ebene gehoben. Was bedeutet das? Zum Beispiel m\u00fcssen Sie die Sichtbarkeit auf allen Seiten Ihrer Website verbessern und den Kontrast erh\u00f6hen, ohne das Farbschema komplett zu \u00e4ndern. Wenn es um Design Tokens geht, m\u00fcssen Sie nur deren Werte \u00e4ndern. Und die vorgenommenen \u00c4nderungen werden auf eine ganze Reihe von Webseiten und sogar Assets (Website, App usw.) ausgeweitet. Mit anderen Worten: Die Aktualisierung von Werten an einer Stelle wird automatisch auf alle Muster \u00fcbertragen. Diese Flexibilit\u00e4t erleichtert die Automatisierung, was einmal mehr die Vorz\u00fcge von Design Tokens unterstreicht.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sie beschleunigen die Daten\u00fcbertragung<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Da es weniger Aufwand und Zeit kostet, zahlreiche Elemente zu \u00e4ndern, k\u00f6nnen Sie mit Design Tokens schneller von der Entwurfs- zur Entwicklungsphase \u00fcbergehen. Und das kann ein entscheidender Faktor sein, da viele Projekte Dringlichkeit erfordern.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sie vereinfachen den Entwicklungsprozess<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Nehmen wir an, eine Schriftgr\u00f6\u00dfe muss aktualisiert werden. Dazu sollten die Designer eine Anpassung im Design-Tool vornehmen und diese dann an die Entwickler weitergeben. Die Entwickler wiederum m\u00fcssen den Wert im Code \u00e4ndern. Mit in das System integrierten Tokens k\u00f6nnen sie bereits aktualisierte Dateien abrufen und im Projekt verwenden. So erhalten die Entwickler Updates, ohne den Code \u00e4ndern zu m\u00fcssen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sie sorgen f\u00fcr Konsistenz<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Design Tokens funktionieren so, dass man den Wert an einer Stelle aktualisiert und die neue \u00c4nderung automatisch auf alle Projekte auf jeder Plattform angewendet wird. Dadurch wird nicht nur das Risiko versehentlicher Fehler bei manuellen \u00c4nderungen minimiert, sondern auch die volle Kontrolle \u00fcber die Werte gew\u00e4hrleistet. Auf diese Weise helfen Design Tokens, die Werte Ihres Design-Systems projekt\u00fcbergreifend zu synchronisieren. Und Sie k\u00f6nnen sie je nach den Anforderungen der jeweiligen Plattform formatieren.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sie bieten eine einzige Quelle der Wahrheit<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Design Tokens erm\u00f6glichen es Design- und Entwicklungsteams, eine einzige Quelle der Wahrheit zu haben. Es handelt sich um eine Art Aufbewahrungsort f\u00fcr alle Stilparameter und \u00c4nderungen, auf den die Verantwortlichen bei Bedarf zur\u00fcckgreifen k\u00f6nnen. Dadurch wird die Kommunikation zwischen den beiden Teams erheblich verbessert, was zu einem reibungsloseren Arbeitsablauf f\u00fchrt.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Wie man die Design Tokens verwaltet<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Sobald Sie die Vor- und Nachteile von Design Tokens kennen, ist es an der Zeit zu erforschen, wie Sie diese Tokens einsetzen k\u00f6nnen, damit sie wirklich zu Ihrem Vorteil wirken.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Entscheiden Sie, ob Design Token das Richtige f\u00fcr Sie sind<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Obwohl Design Tokens viele Vorteile haben und f\u00fcr Design- und Entwicklungsprozesse notwendig zu sein scheinen, ist es wichtig zu entscheiden, ob man sie wirklich braucht. In einigen F\u00e4llen kann ihre Verwendung eher zu Unverh\u00e4ltnism\u00e4\u00dfigkeit als zu Koh\u00e4renz f\u00fchren. Wann sollten Sie also Design Tokens verwenden?<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>&#8211; <span style=\"font-weight: 400;\">wenn Sie Ihr Website- oder <a href=\"https:\/\/www.esterdigital.de\/blog\/app-design-tipps\">App Design<\/a> schnell und effizient mit einem Designsystem aktualisieren m\u00f6chten<\/span>;<br \/>&#8211; wenn Ihr System mehr als ein Produkt oder eine Webplattform und -anwendung umfasst;<br \/>&#8211; wenn Sie \u200bzuk\u00fcnftige Aktualisierungen rationalisieren m\u00f6chten.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Tokens k\u00f6nnen weniger hilfreich sein:<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>\u00a0&#8211; wenn Sie kein Design-System haben;<br \/>&#8211; wenn Ihr Design- und Entwicklungsteam hartkodierte Werte verwendet, und das wird sich auch in n\u00e4chster Zeit nicht \u00e4ndern.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Wenn Sie alle diese Fragen im Voraus bedenken, k\u00f6nnen Sie die Probleme vermeiden, die sich aus einer spontanen Entscheidung ergeben w\u00fcrden.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 F\u00fchren Sie eine Schnittstelleninventur durch<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Wenn Sie sich f\u00fcr die Verwendung von Design Tokens entscheiden, m\u00fcssen Sie Ihr Produkt zun\u00e4chst in einzelne Komponenten (Farbe, Typografie usw.) aufteilen und sie kategorisieren. Auf diese Weise k\u00f6nnen Sie jedes Atom Ihres Designs sehen, der dann leicht optimiert werden kann.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Definieren Sie die Kriterien f\u00fcr die Erstellung von Design Tokens<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Nur durch die Festlegung klarer Kriterien f\u00fcr die Tokenisierung von Stilparametern l\u00e4sst sich Konsistenz erreichen. Wenn ein Parameter zum Beispiel nur an einer Stelle verwendet wird, ist es sinnlos, ein Token zu erstellen. Schlie\u00dflich besteht der Zweck der Tokenisierung darin, mehrere Parameter von einer einzigen Stelle aus kontrollieren zu k\u00f6nnen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Legen Sie die Namenskonventionen fest<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Wirksame Token-Namen helfen dem Team, den visuellen Stil des Projekts besser zu verstehen. Daher ist es wichtig, klare Namenskonventionen festzulegen und zu wissen, wie man sie im Kontext richtig anwendet.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Mit dem Kategorie\/Typ\/Element (CTI)-Ansatz (Namenskonventionen) k\u00f6nnen Sie die Verwendung von Design Tokens vereinfachen und Designentscheidungen klarer und pr\u00e4ziser umsetzen. Um diese Methode zu verwenden, sollten Sie jedoch wissen, dass sie zwei Arten von Tokens verwendet: globale Tokens, die alle Verwendungsf\u00e4lle eines bestimmten Stilparameters abdecken, und Alias-Tokens, die spezifischere Verwendungsf\u00e4lle von Parametern abdecken.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Beispiel: primary.color = #939597 ist ein globales Token, das alle F\u00e4lle abdeckt, wenn dieser Parameter verwendet wird. \u00c4ndern Sie den Wert in #6667AB und er gilt f\u00fcr alle Stellen, an denen diese Prim\u00e4rfarbe erscheint, einschlie\u00dflich Symbole, Schaltfl\u00e4chen oder Text\u00fcberschriften. Wenn Sie bestimmte Elemente \u00e4ndern m\u00f6chten, m\u00fcssen Sie ein Alias-Token aktivieren, das folgenderma\u00dfen aussehen w\u00fcrde: background.icon.primary.color = #6667AB, wobei primary.color die Kategorie, background der Typ und icon ein Element ist. Die Unterscheidung zwischen globalen und Alias-Tokens tr\u00e4gt zu einer reaktionsschnellen Bereitstellung bei.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Halten Sie das JSON-Format ein<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>JSON kann ein effektives Mittel zur Codierung von Werten sein, das die Anpassung von Designparametern f\u00fcr eine Vielzahl von Pr\u00e4prozessoren, einschlie\u00dflich SaaS, erleichtert. Das Format wird haupts\u00e4chlich f\u00fcr den Datenaustausch zwischen einer Webanwendung und einem Server verwendet, so dass ein Token in einer JSON-Datei eine sinnvolle L\u00f6sung f\u00fcr diejenigen ist, die eine schnelle und dennoch qualifizierte Daten\u00fcbertragung ben\u00f6tigen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 W\u00e4hlen Sie einen Verantwortlichen aus<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Was ist, wenn sich das Team nicht auf Namenskonventionen einigen kann oder einfach nicht wei\u00df, was f\u00fcr sein Design-System insgesamt angemessen ist? Hier ist es sehr wichtig, <a href=\"\/blog\/15-schritte-um-die-beste-webdesign-agentur-zu-finden\">die richtige Agentur zu finden<\/a> oder eine verantwortliche Person in Ihrem Unternehmen zu benennen, die alle Vorschl\u00e4ge bewertet und entscheidet, ob sie angemessen sind sowie die Tokens in allen Phasen des Prozesses verwaltet.\u00a0 Nat\u00fcrlich k\u00f6nnen Teams gemeinsam Entscheidungen treffen, aber letztendlich brauchen wir alle die Perspektive eines Au\u00dfenstehenden, um rationale Entscheidungen zu treffen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>\u25aa\u00a0 Sorgen Sie f\u00fcr die Zug\u00e4nglichkeit<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Zweifellos sollte das Design allen Nutzern zur Verf\u00fcgung stehen. Das gilt auch f\u00fcr die dazugeh\u00f6rigen Design Tokens. Deshalb m\u00fcssen Sie sie auf die Zug\u00e4nglichkeit testen sowie Ihr Design-System regelm\u00e4\u00dfig \u00fcberpr\u00fcfen. Auf diese Weise werden sowohl das System als auch die Design Tokens den neuesten Standards entsprechen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Beispiele f\u00fcr Token-Systeme<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Die Schaffung eines tokenisierten Design-Systems ist keine leichte Aufgabe. Es gibt jedoch einige Beispiele, die Sie und Ihre Teams ermutigen, sich f\u00fcr die Tokenisierung zu entscheiden.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>Salesforce-Lightning-Design-System<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Salesforce war eines der ersten Unternehmen, das Design Tokens in seinem Lightning-Design-System verwendet hat. Hier werden die Tokens als visuelle Design-Atome betrachtet. Mit anderen Worten, es handelt sich um Entit\u00e4ten, die visuelle Design-Attribute speichern. Salesforce verwendet Tokens anstelle von hartkodierten Werten, um Skalierbarkeit und Konsistenz des Design-Systems zu gew\u00e4hrleisten.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>Spectrum<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Eines der besten Beispiele f\u00fcr ein Design-System ist das Spectrum-System von Adobe. Es bietet notwendige Komponenten und Tools, mit denen Teams effektiver und koh\u00e4renter an einem Projekt arbeiten k\u00f6nnen. Bei Adobe werden die Design Tokens in Form von visuellen Daten pr\u00e4sentiert, die ein ganzheitliches Produkterlebnis bieten.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading {\"level\":4} --><\/h2>\n<h4>US-Webdesign-System<\/h4>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Schlie\u00dflich hat auch die Regierung von Vereinigten Staaten die Leistungsf\u00e4higkeit der Tokenisierung erkannt. Sie verwendet Design Tokens in ihrem US-Webdesign-System, um die Effizienz des Designs zu maximieren. Auf diese Weise erm\u00f6glichen Design Tokens der Regierung von Vereinigten Staaten, eine Prozesskonsistenz f\u00fcr alle von ihr verwalteten Plattformen zu erreichen.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:heading --><\/h2>\n<h2>Zum Schluss<\/h2>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:heading --><!-- wp:paragraph --><\/h2>\n<p>Obwohl es Design Tokens erst seit ein paar Jahren gibt, haben sie bereits einen wichtigen Platz in Design-Systemen eingenommen, seit Technologief\u00fchrer sie aktiv nutzen. <span data-sheets-value=\"{\" data-sheets-userformat=\"{\" data-sheets-textstyleruns=\"{\">Design Tokens sind leistungsstarke Werkzeuge, die nicht nur den Design- und Entwicklungsprozess erleichtern, sondern auch die Kommunikation im Team auf eine ganz andere Ebene heben und es Ihnen erm\u00f6glichen, ein einpr\u00e4gsames Produkt zu schaffen, das den aktuellen <a href=\"\/blog\/webdesign-trends\">Webdesign Trends<\/a> entspricht.<\/span> Dar\u00fcber hinaus sorgen Design Tokens f\u00fcr die Skalierbarkeit und Flexibilit\u00e4t Ihres Design-Systems und erm\u00f6glichen es Ihnen, \u00c4nderungen vorzunehmen, ohne den bisherigen Fortschritt zu zerst\u00f6ren.<\/p>\n<h2 class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><!-- wp:paragraph --><\/h2>\n<p>Wenn Sie immer noch Zweifel an den Vorteilen von Design Tokens haben oder nicht wissen, wo Sie anfangen sollen, kontaktieren Sie das Team unserer <a href=\"\/\">Webdesign-Agentur<\/a>. Wir k\u00f6nnen Ihnen die ben\u00f6tigten Informationen geben und Ihnen bei der L\u00f6sung von Problemen helfen.<\/p>\n<h2 id=\"block-f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" class=\"block-editor-rich-text__editable block-editor-block-list__block wp-block wp-block-heading rich-text\" tabindex=\"0\" role=\"document\" contenteditable=\"true\" aria-multiline=\"true\" aria-label=\"Block: \u00dcberschrift\" data-block=\"f1a5e8c3-2c27-4963-8974-b01d0e4951c0\" data-type=\"core\/heading\" data-title=\"\u00dcberschrift\"><!-- \/wp:paragraph --><\/h2>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- \/wp:paragraph --><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":2437,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,29],"tags":[],"_links":{"self":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4513"}],"collection":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/comments?post=4513"}],"version-history":[{"count":20,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4513\/revisions"}],"predecessor-version":[{"id":5721,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/posts\/4513\/revisions\/5721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/media\/2437"}],"wp:attachment":[{"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/media?parent=4513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/categories?post=4513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esterdigital.de\/blog\/wp-json\/wp\/v2\/tags?post=4513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}