{"id":51226,"date":"2024-04-08T14:28:32","date_gmt":"2024-04-08T12:28:32","guid":{"rendered":"https:\/\/www.inovex.de\/?p=51226"},"modified":"2024-04-10T16:04:28","modified_gmt":"2024-04-10T14:04:28","slug":"design-to-code-mit-plugins-automatisch-zum-frontend-code","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/","title":{"rendered":"Mit Design-to-Code Plugins automatisch zum Frontend Code"},"content":{"rendered":"<p>In der dynamischen Welt der Generative AI er\u00f6ffnen sich faszinierende Wege, um Entwicklern den Arbeitsalltag zu erleichtern. Neben bekannten Innovationen wie GitHub Copilot und ChatGPT entstehen nun auch Design-to-Code Tools wie Anima, Locofy, Builder.io und TeleportHQ. Diese Werkzeuge zielen darauf ab, den Entwicklungsprozess zu optimieren, indem sie Designs aus Figma oder Adobe XD nahtlos und flexibel in programmierbaren Frontend Code umwandeln. Aber wie leistungsf\u00e4hig sind sie in der Praxis? Erf\u00fcllen sie die aktuellen Qualit\u00e4tsstandards und \u00fcberzeugen sie die Fachwelt? Wir haben uns diese Tools genauer angesehen und getestet, um diese Fragen zu beantworten.<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Motivation\" >Motivation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Was-sind-Design-to-Code-Tools\" >Was sind Design-to-Code Tools?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Wie-funktionieren-Design-to-Code-Tools\" >Wie funktionieren Design-to-Code Tools?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Wir-pruefen-Design-to-Code-Tools\" >Wir pr\u00fcfen Design-to-Code Tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Was-sagen-die-Expert-innen\" >Was sagen die Expert:innen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Motivation\"><\/span>Motivation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im Zentrum vieler g\u00e4ngiger Softwareentwicklungsprozesse stehen Design und Entwicklung. Vom klassischen Wasserfall-Modell \u00fcber das V-Modell bis hin zu agilen Projekten \u2013 \u00fcberall ist die effiziente Verbindung von Design und Code entscheidend. Genau hier setzen Design to Code Tools an, um diese Schnittstelle weiter zu optimieren.\u00a0 Diese Tools k\u00f6nnten den Zeitbedarf in der Entwicklungsphase signifikant reduzieren. In einer \u00c4ra, in der Fachkr\u00e4ftemangel, steigende Konkurrenz und strikte Softwareregulationen den Alltag pr\u00e4gen, k\u00f6nnten solche Tools eine wesentliche Entlastung f\u00fcr Entwickler:innen bedeuten. Allerdings h\u00e4ngt ihr Erfolg davon ab, ob sie qualitativ hochwertige Ergebnisse liefern, die Entwickler:innen effektiv unterst\u00fctzen k\u00f6nnen.<\/p>\n<p>Aus diesem Grund haben wir zwei der vielversprechenden Tools ausgew\u00e4hlt und einer gr\u00fcndlichen Pr\u00fcfung unterzogen. Hierzu haben wir eine Expert:innenumfrage durchgef\u00fchrt, um die Leistungsf\u00e4higkeit und Qualit\u00e4t dieser Tools zu bewerten und festzustellen, inwiefern sie den Entwicklungsprozess tats\u00e4chlich optimieren k\u00f6nnen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Was-sind-Design-to-Code-Tools\"><\/span>Was sind Design-to-Code Tools?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Design-to-Code Tools sind spezialisierte Anwendungen, die automatisch aus bestehenden Designs und User Input Code generieren, um das Design praktisch umzusetzen.<\/p>\n<p>Diese Tools gibt es in verschiedenen Formen: Viele sind als Plugins f\u00fcr g\u00e4ngige Designanwendungen verf\u00fcgbar, integriert direkt in die Designinterfaces. Andere hingegen sind eigenst\u00e4ndige Anwendungen, die unabh\u00e4ngig von herk\u00f6mmlichen Designsoftwares funktionieren. Beispiele f\u00fcr solche Tools sind Anima, AutoHTML, Builder.io, Clapy, Figma to Code, Fireblade, Framer, Handoff, Locofy, Sketch2Code und TeleportHQ.<\/p>\n<p>Als Teil der Generative-AI-Tools-Kategorie interpretieren und verarbeiten Design-to-Code Tools einen Input \u2013 in diesem Fall ein Design \u2013 und erzeugen darauf basierend einen Output, n\u00e4mlich Code. Je nach Tool und dessen Anwendung k\u00f6nnen Nutzer:innen den Generierungsprozess mehr oder weniger stark beeinflussen. Bei einigen Tools ist es beispielsweise m\u00f6glich, vorzugeben, ob der Code f\u00fcr ein spezifisches Frontend-Framework wie Angular, React oder Vue generiert werden soll. Auch Styling-Vorgaben wie zum Beispiel SCSS, CSS Modules oder Inline Styles k\u00f6nnen bei einigen Tools \u00fcber die Voreinstellungen angepasst werden.<\/p>\n<p>Der Vorbereitungsprozess der Designs kann ebenfalls abh\u00e4ngig vom jeweiligen Tool variieren. Die Anpassungen erfolgen \u00fcber Eingabemasken, die in der Designsoftware \u00fcber das Plugin angezeigt werden. Hier k\u00f6nnen Nutzer:innen zum Beispiel definieren, wie das responsive Verhalten der Anwendung umgesetzt werden soll oder durch welches HTML-Element Designkomponenten realisiert werden sollen. Je nach Design-to-Code Tool gibt es unterschiedliche Nutzungsm\u00f6glichkeiten und teils gro\u00dfe Unterschiede im Workflow. W\u00e4hrend einige Tools auf einen automatisierten Prozess setzen, legen andere mehr Wert auf eine verst\u00e4rkte Einbindung der Nutzer:innen.<\/p>\n<p>Nach der Codegenerierung bieten diese Tools unterschiedliche Optionen f\u00fcr die weitere Verwendung des Codes. Nutzer:innen k\u00f6nnen den generierten Code entweder exportieren, um ihn in anderen Projekten zu verwenden, ihn direkt deployen, um eine schnelle Live-Version zu erstellen, oder sie k\u00f6nnen neue Einstellungen vornehmen und den Code erneut generieren lassen. Diese Flexibilit\u00e4t erm\u00f6glicht es den Nutzer:innen, den generierten Code an ihre spezifischen Anforderungen und Projekte anzupassen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie-funktionieren-Design-to-Code-Tools\"><\/span>Wie funktionieren Design-to-Code Tools?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>Initialisierung des Designs<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Der Prozess beginnt in einer Designanwendung mit einem erstellten Design,<\/span><br role=\"presentation\" \/><span dir=\"ltr\" role=\"presentation\">das in Code umgewandelt werden soll.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><strong>Aktivierung des Plugins<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Das entsprechende Design-to-Code Plugin wird innerhalb der Designanwen<\/span><span dir=\"ltr\" role=\"presentation\">dung aktiviert.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Beim Starten des Plugins erscheint eine Eingabemaske, deren Funktions<\/span><span dir=\"ltr\" role=\"presentation\">umfang je nach verwendetem Tool variiert.<\/span><\/li>\n<li>\n<div><span dir=\"ltr\" role=\"presentation\">W\u00e4hrend bei einigen Tools \u00fcber die Eingabemaske lediglich die Codege<\/span><span dir=\"ltr\" role=\"presentation\">nerierung initiiert werden kann, erm\u00f6glichen andere Tools weiterf\u00fchrende<\/span><br role=\"presentation\" \/><span dir=\"ltr\" role=\"presentation\">Voreinstellungen durch die Nutzenden.<\/span><\/div>\n<\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Bei erweiterten Eingabemasken k\u00f6nnen Nutzer:innen spezifische Designelemente <\/span><span dir=\"ltr\" role=\"presentation\">ausw\u00e4hlen und ihnen bestimmte Eigenschaften zuweisen, die dann bei der<\/span><br role=\"presentation\" \/><span dir=\"ltr\" role=\"presentation\">Codegenerierung ber\u00fccksichtigt werden. Diese \u00e4hneln sich bei vielen Tools <\/span><span dir=\"ltr\" role=\"presentation\">in Bezug auf Inhalte und Funktionen.<\/span>\n<figure id=\"attachment_51227\" aria-describedby=\"caption-attachment-51227\" style=\"width: 988px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-51227 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools.png\" alt=\"Design to Code Tool Eingabemasken f\u00fcr Voreinstellungen \" width=\"988\" height=\"484\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools.png 988w, https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools-300x147.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools-768x376.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools-400x196.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Eingabemasken_von_DTC_Tools-360x176.png 360w\" sizes=\"auto, (max-width: 988px) 100vw, 988px\" \/><figcaption id=\"caption-attachment-51227\" class=\"wp-caption-text\">Vergleich von Eingabemasken f\u00fcr Voreinstellungen von Anima, Buil- der.io, Locofy und TeleportHQ in Figma<\/figcaption><\/figure>\n<p>&nbsp;<\/li>\n<\/ul>\n<\/li>\n<li><strong>Codegenerierung<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Die Eingabeinformationen des Designs sowie die nutzerspezifischen Anga<\/span><span dir=\"ltr\" role=\"presentation\">ben werden an das Generative-AI-Modell weitergeleitet.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Das Generative-AI-Modell verarbeitet die erhaltenen Daten und Informatio<\/span><span dir=\"ltr\" role=\"presentation\">nen.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Basierend auf den Eingabeinformationen und den Trainingsdaten des Mo<\/span><span dir=\"ltr\" role=\"presentation\">dells generiert das AI-Modell den entsprechenden Code, der das Design in<\/span><br role=\"presentation\" \/><span dir=\"ltr\" role=\"presentation\">Code umsetzt.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><strong>Anwendungsplattform<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Die Codegenerierung f\u00fchrt zur \u00d6ffnung eines neuen Browserfensters der je<\/span><span dir=\"ltr\" role=\"presentation\">weiligen Design-to-Code-Plattform.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">In diesem Fenster wird der generierte Code in einem vorab festgelegten oder <\/span><span dir=\"ltr\" role=\"presentation\">standardisierten Format angezeigt, begleitet von einer Vorschau des resul<\/span><span dir=\"ltr\" role=\"presentation\">tierenden Frontends.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Abh\u00e4ngig von der jeweiligen Plattform sind zus\u00e4tzliche Funktionen wie zum <\/span><span dir=\"ltr\" role=\"presentation\">Beispiel die Simulation eines responsiven Designs oder die Darstellung der<\/span><br role=\"presentation\" \/><span dir=\"ltr\" role=\"presentation\">Projektstruktur verf\u00fcgbar. Auch hier lassen sich bei einigen Tools Gemein<\/span><span dir=\"ltr\" role=\"presentation\"><span dir=\"ltr\" role=\"presentation\">samkeiten im Aufbau erkennen.<\/span><\/span>\n<figure id=\"attachment_51229\" aria-describedby=\"caption-attachment-51229\" style=\"width: 1214px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-51229 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes.png\" alt=\"Beispiele f\u00fcr Anwendungsfenster von Anima, Builder.io, TeleportHQ undLocofy\" width=\"1214\" height=\"645\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes.png 2920w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-300x159.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-1024x544.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-768x408.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-1536x816.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-2048x1089.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-1920x1020.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-400x213.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/dtcapplicationframes-360x191.png 360w\" sizes=\"auto, (max-width: 1214px) 100vw, 1214px\" \/><figcaption id=\"caption-attachment-51229\" class=\"wp-caption-text\">Beispiele f\u00fcr Anwendungsfenster von Anima, Builder.io, TeleportHQ und Locofy<\/figcaption><\/figure>\n<p>&nbsp;<\/li>\n<\/ul>\n<\/li>\n<li><strong>Code-Export<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Der letzte Prozessteil umfasst den Export des generierten Codes, wobei die <\/span><span dir=\"ltr\" role=\"presentation\">Tools unterschiedliche Exportoptionen anbieten.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Die Tools bieten verschiedene Exportoptionen, wie das Herunterladen als <\/span><span dir=\"ltr\" role=\"presentation\">Zip-Datei, Hinzuf\u00fcgen zu Projekten durch Pull-Befehle oder direktes Publi<\/span><span dir=\"ltr\" role=\"presentation\">shing\/Deployment auf Webhosting-\/Deployment-Plattformen.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">W\u00e4hrend einige Anwendungen nur den Export des gesamten Projekts zulas<\/span><span dir=\"ltr\" role=\"presentation\">sen, erm\u00f6glichen andere den Export einzelner Komponenten.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><strong>Feinabstimmung und Anpassung<\/strong>\n<ul>\n<li><span dir=\"ltr\" role=\"presentation\">Einige Tools bieten die M\u00f6glichkeit, weitere oder erneute Konfigurationen <\/span><span dir=\"ltr\" role=\"presentation\">vorzunehmen.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Die Art und der Umfang dieser Nachjustierung variiert zwischen den Tools.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\"> Konfigurationen k\u00f6nnen, je nach Tool, durch die Eingabemaske aus Schritt 2 <\/span><span dir=\"ltr\" role=\"presentation\">oder im Anwendungsfenster aus Schritt 3 get\u00e4tigt werden.<\/span><\/li>\n<li><span dir=\"ltr\" role=\"presentation\">Die Codegenerierung wird neu durchgef\u00fchrt, sobald eine neue Konfiguration <\/span><span dir=\"ltr\" role=\"presentation\">get\u00e4tigt wurde.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Der Workflow l\u00e4sst sich in folgendem Ablaufdiagramm darstellen:<\/p>\n<div class=\"page\" role=\"region\" data-page-number=\"35\" aria-label=\"Page 35\" data-listening-for-double-click=\"true\" data-loaded=\"true\"><\/div>\n<div class=\"page\" role=\"region\" data-page-number=\"36\" aria-label=\"Page 36\" data-listening-for-double-click=\"true\" data-loaded=\"true\">\n<div class=\"canvasWrapper\">\n<figure id=\"attachment_51231\" aria-describedby=\"caption-attachment-51231\" style=\"width: 801px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-51231 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered.png\" alt=\"Workflow of Design to Code Tools mapped onto the general Workflow of Generative AI Tools.\" width=\"801\" height=\"139\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered.png 801w, https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered-300x52.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered-768x133.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered-400x69.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/genaiworkflownumbered-360x62.png 360w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><figcaption id=\"caption-attachment-51231\" class=\"wp-caption-text\">Workflow von Design-to-Code Tools im Generative-AI-Prozess<\/figcaption><\/figure>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Wir-pruefen-Design-to-Code-Tools\"><\/span>Wir pr\u00fcfen Design-to-Code Tools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In unserer Studie haben wir die Leistungsf\u00e4higkeit von Design-to-Code Tools mittels einer quantitativen Expert:innenbefragung untersucht. Wir erstellten ein spezifisches Testdesign, das von den ausgew\u00e4hlten Tools Anima und Locofy in Code umgewandelt wurde. Interessant dabei: Die Proband:innen wussten nicht, dass der ihnen pr\u00e4sentierte Code automatisch generiert war. Dieser Ansatz erm\u00f6glichte eine unvoreingenommene Bewertung.<\/p>\n<p>Um eine umfassende und objektive Einsch\u00e4tzung zu erzielen, legten wir verschiedene Kriterien fest:<\/p>\n<ul>\n<li><strong>Optische \u00c4hnlichkeit<\/strong>: Pr\u00fcfung, ob vorgegebene Design in Code umsetzt, indem wir Aspekte wie Struktur, Anordnung und Responsiveness bewerteten.<\/li>\n<li><strong>Barrierefreiheit<\/strong>: Unter Verwendung des \u201e<a href=\"https:\/\/bik-fuer-alle.de\/easy-checks.html\">BIK-Easy Check<\/a>\u201c Tests untersuchten wir die Einhaltung grundlegender Barrierefreiheitsstandards.<\/li>\n<li><strong>Projektstruktur<\/strong>:\u00a0 Fokus auf dem Aufbau der generierten Anwendung, der Komponentenstruktur und den HTML-\/CSS-Architekturen.<\/li>\n<li><strong>Code Review<\/strong>: Anhand der Google Code Review Standards bewerteten wir verschiedene Aspekte wie Codedesign, Funktionalit\u00e4t und Implementierung.<\/li>\n<li><strong>Softwarequalit\u00e4t (ISO NORM 25010)<\/strong>: Wir testen Kriterien der international anerkannten Norm ISO 25010 f\u00fcr Softwarequalit\u00e4t.<\/li>\n<li><strong>Meinungsbild<\/strong>: Erfassung der Expertenmeinung zu Design-to-Code Tools.<\/li>\n<\/ul>\n<p>Die Zielgruppe bestand aus erfahrenen Webentwickler:innen und Nutzer:innen von Frontend-Frameworks. Wir teilten sie nach dem Between-Subject-Verfahren in zwei Gruppen auf, wobei jede Gruppe nur eines der beiden Tools bewertete. Insgesamt rekrutierten wir 16 Proband:innen aus dem Arbeitsumfeld der inovex GmbH und Studierenden der Hochschule der Medien.<\/p>\n<p><span style=\"color: #061b5a; font-size: 36px; font-weight: bold;\">Anwendungsergebnisse: Anima &amp; Locofy<\/span><\/p>\n<\/div>\n<p>F\u00fcr die Testdaten haben wir ein Testdesign erstellt und dieses dann f\u00fcr die jeweilige Anwendung optimiert. Anschlie\u00dfend wurden die Designs durch die Tools als Code generiert und schlussendlich als Zip-Datei exportiert.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51247 size-full\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608.png\" alt=\"Vorbereitung, Anpassung, Generierung und Export des Testdesigns als Code\" width=\"1095\" height=\"566\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608.png 1095w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608-300x155.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608-1024x529.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608-768x397.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608-400x207.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2024-01-26-112608-360x186.png 360w\" sizes=\"auto, (max-width: 1095px) 100vw, 1095px\" \/><\/p>\n<h3>Anima<\/h3>\n<p>Im Rahmen unseres Tests haben wir Anima genutzt, um zu sehen, wie gut Design automatisch in Code umgewandelt wird. Wir haben Designs f\u00fcr verschiedene Bildschirmgr\u00f6\u00dfen erstellt und spezielle Elemente wie Textfelder und Buttons markiert, um deren korrekte \u00dcbernahme in den Code zu gew\u00e4hrleisten.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51251 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput.png\" alt=\"Gegen\u00fcberstellung von Input und Output von Anima\" width=\"1401\" height=\"706\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput.png 4222w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-300x151.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-1024x516.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-768x387.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-1536x774.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-2048x1032.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-1920x967.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-400x202.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/animainputoutput-360x181.png 360w\" sizes=\"auto, (max-width: 1401px) 100vw, 1401px\" \/><\/p>\n<p>Die Codegenerierung mit Anima war schnell und effizient. Das finale Projekt bestand aus 166 Dateien und insgesamt 5.375 Zeilen Code, haupts\u00e4chlich in Typescript und CSS. Besonders hervorzuheben ist die einfache lokale Ausf\u00fchrung des Projekts und die automatische Generierung von Komponenten ohne Nutzereingriff.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51249 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/codelocanima.png\" alt=\"Kuchendiagramm: Codeanalyse des durch Anima generierten Codes\" width=\"383\" height=\"451\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/codelocanima.png 664w, https:\/\/www.inovex.de\/wp-content\/uploads\/codelocanima-255x300.png 255w, https:\/\/www.inovex.de\/wp-content\/uploads\/codelocanima-400x471.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/codelocanima-360x424.png 360w\" sizes=\"auto, (max-width: 383px) 100vw, 383px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Locofy<\/h3>\n<p>Locofy unterscheidet sich durch seinen interaktiven Ansatz: Die Nutzer:innen steuern aktiv den Prozess der Codegenerierung. Nach vorbereitenden Schritten, wie der Optimierung des Designs und der Festlegung von Styling und Layout, wird der Code generiert. Dabei werden Elemente automatisch als Komponenten erkannt, jedoch ist Nutzereingriff f\u00fcr die endg\u00fcltige Umsetzung erforderlich. Locofy bietet auch die Integration von Komponentenbibliotheken wie Material UI und erm\u00f6glicht die Implementierung einer Seitennavigation. Trotz der l\u00e4ngeren initialen Generierungszeit ist Locofy besonders interessant f\u00fcr Anwender:innen, die mehr Kontrolle \u00fcber den Generierungsprozess w\u00fcnschen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51253 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput.png\" alt=\"Gegen\u00fcberstellung von Input und Output f\u00fcr Locofy\" width=\"1394\" height=\"627\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput.png 4094w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-300x135.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-1024x461.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-768x346.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-1536x691.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-2048x921.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-1920x864.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-400x180.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/locofyinputoutput-360x162.png 360w\" sizes=\"auto, (max-width: 1394px) 100vw, 1394px\" \/><\/p>\n<p>Die Codeanalyse zeigt, dass das finale Projekt aus 62 Dateien besteht, mit insgesamt 3.965 Zeilen Code. Der gr\u00f6\u00dfte Anteil des Codes aus TypeScript und CSS Der restliche Code verteilt sich auf verschiedene andere Dateitypen.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51255 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/codeloclocofy.png\" alt=\"Kuchendiagramm: Codeanalyse f\u00fcr Locofy\" width=\"529\" height=\"619\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/codeloclocofy.png 668w, https:\/\/www.inovex.de\/wp-content\/uploads\/codeloclocofy-256x300.png 256w, https:\/\/www.inovex.de\/wp-content\/uploads\/codeloclocofy-400x468.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/codeloclocofy-360x421.png 360w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Was-sagen-die-Expert-innen\"><\/span>Was sagen die Expert:innen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Unsere Expert:innenbefragung lieferte tiefe Einblicke in die Leistungsf\u00e4higkeit der Design-to-Code Tools Anima und Locofy. Jedes Bewertungskriterium offenbarte spezifische St\u00e4rken und Schw\u00e4chen der Tools.<\/p>\n<h3>Optische \u00c4hnlichkeit<\/h3>\n<p>Die Expert:innen bewerteten die \u00c4hnlichkeit des generierten Codes mit dem Originaldesign. Besonders auff\u00e4llig war, wie gut die Tools Struktur, Inhaltsanordnung, Texteigenschaften und Farbtreue umsetzten. Trotz guter Ergebnisse in diesen Bereichen wurden bei der Darstellung von Interaktionselementen und Responsiveness M\u00e4ngel festgestellt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51234 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartopti.png\" alt=\"Netzdiagramm: Bewertung der optischen \u00c4hnlichkeit zwischen Design und Code \" width=\"574\" height=\"542\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartopti.png 680w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartopti-300x283.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartopti-400x378.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartopti-360x340.png 360w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/p>\n<h3>Digitale Barrierefreiheit<\/h3>\n<p>Bei der Pr\u00fcfung der digitalen Barrierefreiheit mithilfe des BIK-Easy Checks schnitt Locofy etwas besser ab als Anima. Allerdings erreichte keines der Tools eine Bewertung, die auf eine vollst\u00e4ndige Barrierefreiheitskonformit\u00e4t hinweist. Dieser Bereich ist besonders kritisch, da Barrierefreiheit zunehmend gesetzlich vorgeschrieben wird.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51236 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartbarriere.png\" alt=\"Netzdiagramm: Bewertung der digitalen Barrierefreiheit der generierten Anwendungen\" width=\"651\" height=\"584\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartbarriere.png 746w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartbarriere-300x269.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartbarriere-400x359.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartbarriere-360x323.png 360w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/p>\n<h3>Projektstruktur<\/h3>\n<p>Die Struktur der generierten Projekte wurde ebenfalls untersucht. Hier lag der Fokus auf der Organisation der Dateien und Komponenten sowie der HTML- und CSS-Struktur. W\u00e4hrend Locofy in der Projektstruktur leicht die Nase vorn hatte, zeigten beide Tools Verbesserungspotenzial im Hinblick auf eine klare und effiziente Strukturierung.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51239 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartprojektqualitaet.png\" alt=\"Netzdiagramm: Auswertung der Pr\u00fcfkriterien f\u00fcr Projektqualit\u00e4t\" width=\"608\" height=\"557\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartprojektqualitaet.png 703w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartprojektqualitaet-300x275.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartprojektqualitaet-400x366.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartprojektqualitaet-360x330.png 360w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/p>\n<h3>Code Review nach Google-Standards<\/h3>\n<p>Die Expert:innenbewertungen gem\u00e4\u00df den Google Code Review Standards fielen eher mittelm\u00e4\u00dfig aus. Besonders bem\u00e4ngelt wurden Aspekte wie Codedesign, Funktionalit\u00e4t und Code-Dokumentation. Dies deutet darauf hin, dass der generierte Code nicht den hohen Anforderungen an professionelle Codequalit\u00e4t gen\u00fcgt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51241 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartcodereview.png\" alt=\"Netzdiagramm: Bewertung nach den Google Codereview Standards\" width=\"627\" height=\"587\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartcodereview.png 690w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartcodereview-300x281.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartcodereview-400x374.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartcodereview-360x337.png 360w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><\/p>\n<h3>Softwarequalit\u00e4t gem\u00e4\u00df ISO Norm 25010:<\/h3>\n<p>Die Bewertung anhand der ISO Norm 25010 zeigte, dass beide Tools in einigen Subkategorien wie Funktionalit\u00e4t und Zuverl\u00e4ssigkeit gut abschnitten. Allerdings gab es auch hier Defizite, vor allem in den Bereichen Wartbarkeit und Kompatibilit\u00e4t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51243 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm.png\" alt=\"Netzdiagramm: Bewertung nach Kriterien der ISO Norm 25010 f\u00fcr Softwarequalit\u00e4t\" width=\"698\" height=\"628\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm.png 809w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm-300x270.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm-768x691.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm-400x360.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartisonorm-360x324.png 360w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/p>\n<h3>Meinungsbild der Proband:innen<\/h3>\n<p>Die abschlie\u00dfende Gesamtbewertung und das Meinungsbild der Proband:innen fielen gemischt aus. W\u00e4hrend die Tools f\u00fcr bestimmte Anwendungsf\u00e4lle als hilfreich angesehen wurden, gab es Bedenken hinsichtlich ihrer Eignung f\u00fcr anspruchsvollere Entwicklungsaufgaben.<\/p>\n<h3>Zusammenfassung<\/h3>\n<p>Die Expert:innenbewertung der Design-to-Code Tools ergab gemischte Ergebnisse. W\u00e4hrend optische \u00c4hnlichkeit und einige Softwarequalit\u00e4tskriterien der ISO-Norm 25010 positiv bewertet wurden, zeigten sich M\u00e4ngel in der digitalen Barrierefreiheit und der Codequalit\u00e4t gem\u00e4\u00df Google-Standards. Locofy wurde insgesamt etwas besser als Anima bewertet, doch beide Tools wiesen Defizite auf. Die Probanden stuften die generierten Codes und Tools als moderat hilfreich ein, mit Vorbehalten bei der Eignung f\u00fcr komplexere Projekte. Insgesamt zeigt die Studie, dass Design-to-Code Tools Verbesserungspotenzial haben und derzeit eher f\u00fcr einfachere Anwendungen geeignet sind.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51245 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartinsgesamt.png\" alt=\"Zusammenfassung aller Pr\u00fcfkriterien\" width=\"646\" height=\"622\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/chartinsgesamt.png 726w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartinsgesamt-300x289.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartinsgesamt-400x385.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/chartinsgesamt-360x347.png 360w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Analyse der Design-to-Code Tools offenbart, dass sie noch nicht ideal funktionieren. Zwar werden Designs optisch ansprechend in Code umgesetzt, doch in qualitativen Aspekten wie Barrierefreiheit, Code-Qualit\u00e4t und Projektstruktur sind sie noch nicht zufriedenstellend. Experten sind von den derzeitigen F\u00e4higkeiten der Tools noch nicht \u00fcberzeugt. Aktuell eignen sich diese Tools haupts\u00e4chlich f\u00fcr schnelle Tests, einfache Anwendungen, Prototypen oder die Entwicklung einzelner Komponenten. F\u00fcr Projekte mit hohen Qualit\u00e4tsanspr\u00fcchen und komplexen Strukturen sind sie jedoch noch nicht geeignet. Nichtsdestotrotz zeigen die Anwendungen Potenzial, das durch zuk\u00fcnftige Fortschritte in der automatisierten Codegenerierung noch weiter ausgesch\u00f6pft werden k\u00f6nnte.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In der dynamischen Welt der Generative AI er\u00f6ffnen sich faszinierende Wege, um Entwicklern den Arbeitsalltag zu erleichtern. Neben bekannten Innovationen wie GitHub Copilot und ChatGPT entstehen nun auch Design-to-Code Tools wie Anima, Locofy, Builder.io und TeleportHQ. Diese Werkzeuge zielen darauf ab, den Entwicklungsprozess zu optimieren, indem sie Designs aus Figma oder Adobe XD nahtlos und [&hellip;]<\/p>\n","protected":false},"author":400,"featured_media":52879,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[509,128,511,130],"service":[76,444,445],"coauthors":[{"id":400,"display_name":"Johannes Ni\u00dfl","user_nicename":"jnissl"}],"class_list":["post-51226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-ai-2","tag-angular","tag-artificial-intelligence-2","tag-css","service-artificial-intelligence","service-frontend","service-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.\" \/>\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.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-08T12:28:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-10T14:04:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Johannes Ni\u00dfl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code-1024x601.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johannes Ni\u00dfl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Johannes Ni\u00dfl\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\"},\"author\":{\"name\":\"Johannes Ni\u00dfl\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9f485760964cf42c27f7b4c52ef62973\"},\"headline\":\"Mit Design-to-Code Plugins automatisch zum Frontend Code\",\"datePublished\":\"2024-04-08T12:28:32+00:00\",\"dateModified\":\"2024-04-10T14:04:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\"},\"wordCount\":1965,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png\",\"keywords\":[\"Ai\",\"Angular\",\"Artificial Intelligence\",\"CSS\"],\"articleSection\":[\"Applications\",\"inovex Lab\",\"Product Discovery\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\",\"name\":\"Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png\",\"datePublished\":\"2024-04-08T12:28:32+00:00\",\"dateModified\":\"2024-04-10T14:04:28+00:00\",\"description\":\"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png\",\"width\":1500,\"height\":880,\"caption\":\"Grafik: drei Menschen arbeiten vor einem riesigen Bildschirm.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mit Design-to-Code Plugins automatisch zum Frontend Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inovex.de\/de\/#website\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inovex.de\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inovexde\",\"https:\/\/x.com\/inovexgmbh\",\"https:\/\/www.instagram.com\/inovexlife\/\",\"https:\/\/www.linkedin.com\/company\/inovex\",\"https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9f485760964cf42c27f7b4c52ef62973\",\"name\":\"Johannes Ni\u00dfl\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/48dd743736889d032e63753c2f10371c\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2c2ce997eda8d7943b38d007d74faa39fdc412dbf0940da58a5f66f400dd6205?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2c2ce997eda8d7943b38d007d74faa39fdc412dbf0940da58a5f66f400dd6205?s=96&d=retro&r=g\",\"caption\":\"Johannes Ni\u00dfl\"},\"url\":\"https:\/\/www.inovex.de\/de\/blog\/author\/jnissl\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH","description":"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.","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.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/","og_locale":"de_DE","og_type":"article","og_title":"Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH","og_description":"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.","og_url":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2024-04-08T12:28:32+00:00","article_modified_time":"2024-04-10T14:04:28+00:00","og_image":[{"width":1500,"height":880,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png","type":"image\/png"}],"author":"Johannes Ni\u00dfl","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code-1024x601.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Johannes Ni\u00dfl","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten","Written by":"Johannes Ni\u00dfl"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/"},"author":{"name":"Johannes Ni\u00dfl","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9f485760964cf42c27f7b4c52ef62973"},"headline":"Mit Design-to-Code Plugins automatisch zum Frontend Code","datePublished":"2024-04-08T12:28:32+00:00","dateModified":"2024-04-10T14:04:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/"},"wordCount":1965,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png","keywords":["Ai","Angular","Artificial Intelligence","CSS"],"articleSection":["Applications","inovex Lab","Product Discovery"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/","url":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/","name":"Mit Design-to-Code Plugins automatisch zum Frontend Code - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png","datePublished":"2024-04-08T12:28:32+00:00","dateModified":"2024-04-10T14:04:28+00:00","description":"Automatisierung durch Generative AI Plugins. Erfahren Sie mehr \u00fcber die Effizienz und Grenzen Design to Code Tools.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Blogheader-designto-code.png","width":1500,"height":880,"caption":"Grafik: drei Menschen arbeiten vor einem riesigen Bildschirm."},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/design-to-code-mit-plugins-automatisch-zum-frontend-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Mit Design-to-Code Plugins automatisch zum Frontend Code"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9f485760964cf42c27f7b4c52ef62973","name":"Johannes Ni\u00dfl","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/48dd743736889d032e63753c2f10371c","url":"https:\/\/secure.gravatar.com\/avatar\/2c2ce997eda8d7943b38d007d74faa39fdc412dbf0940da58a5f66f400dd6205?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2c2ce997eda8d7943b38d007d74faa39fdc412dbf0940da58a5f66f400dd6205?s=96&d=retro&r=g","caption":"Johannes Ni\u00dfl"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/jnissl\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/51226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/400"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=51226"}],"version-history":[{"count":6,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/51226\/revisions"}],"predecessor-version":[{"id":52739,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/51226\/revisions\/52739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/52879"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=51226"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=51226"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=51226"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=51226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}