Figma to React. Eine Analyse der Codequalität von KI-gestützten Design-to-Code-Tools.

High-Fidelity-Prototypen dienen im Design-Handoff als Vorlage für die programmatische Implementierung einer Anwendung – die manuelle Übersetzung in Code ist aber aufwendig und fehleranfällig. Design-to-Code-Tools wie Anima und Locofy versprechen, diesen Prozess zu erleichtern. Ihr tatsächlicher Mehrwert hängt jedoch davon ab, ob der generierte Code die erforderliche Qualität besitzt, um in der weiteren Entwicklung effizient genutzt werden zu können.

Meine Masterarbeit untersuchte deshalb den statisch einsehbaren Frontend-Code, den diese beiden Plugins aus Figma-Designs in React/TypeScript erzeugen, und bewertete ihn anhand in der Arbeit definierter Kriterien und Metriken.

Die Arbeit entwickelte sich aus dem Forschungsprojekt ERIKA, in dem ich an der Konzeption und Umsetzung einer digitalen Begleit-App für klimabewusstes Handeln im Alltag beteiligt war. Ausgehend von den dort entstandenen Figma-Designs entstand die Idee, den von Design-to-Code-Plugins generierten React-Code systematisch zu untersuchen.

Die Forschungsfragen bestanden aus einer Haupt- und vier Unterforschungsfragen. Diese lauteten wie folgt:

Inwieweit erfüllt der React-Code, der von den auf künstlicher Intelligenz basierenden Design-to-Code-Tools Anima und Locofy generiert wird, die in dieser Arbeit definierten Qualitätskriterien für Frontend-Code?

1. Welche Qualitätskriterien zeichnen hochwertigen Frontend-Code aus?
2. Welche Metriken zur (automatischen) Analyse von Frontend-Code können zur objektiven Bewertung dieser Qualitätskriterien beitragen, und welche eignen sich am besten für diese Analyse?
3. Welche Figma-Plugins zur Design-to-Code-Umwandlung in React mit TypeScript stehen aktuell zur Verfügung und eignen sich im Hinblick auf eine effiziente Einbindung in bestehende Entwicklungs-Workflows?
4. Welche Empfehlungen für die Figma-Designphase fördern Ergebnisse, die qualitativ hochwertigen Frontend-Code erzeugen und zugleich dem ursprünglichen Design visuell entsprechen?

Zur Bewertung des generierten Codes wurden auf Basis einer umfassenden Literaturrecherche und sechs leitfadengestützten Experten- und Expertinnen-Interviews sechs Qualitätskriterien abgeleitet:

1. Wartbarkeit
2. Verständlichkeit
3. Struktur
4. Wiederverwendbarkeit
5. Testbarkeit
6. Barrierefreiheit

Zur Messung dieser Kriterien wurden aus den gewonnenen Erkenntnissen 21 Metriken für Frontend-Code selbständig zusammengestellt. Ein iterativ verfeinerter Figma-Prototyp wurde mit beiden Plugins in React/TypeScript-Code transformiert und sowohl automatisch (ESLint, SonarQube, Madge, Stylelint) als auch manuell ausgewertet.

• Beide Plugins zeigen deutliche Qualitätsprobleme. Bei den in der Arbeit definierten allgemeinen Codequalitätsmetriken schneidet Anima schlechter ab, während bei Metriken der Barrierefreiheit vor allem Locofy größere Defizite aufweist.

• Häufige Schwächen zeigen sich bei beiden Tools in tief verschachtelten Komponenten, redundanten Styles und wenig sprechenden Bezeichnern. Im Bereich der Barrierefreiheit treten zudem Defizite bei Heading-Strukturen, semantischen Tags und ARIA-Attributen auf.

• Gemeinsame Stärken lassen sich in kurze Komponentendateien, dem gesetzten lang-Attribut und der Beibehaltung des Seitenzooms erkennen.

• Anima liefert insgesamt konsistentere Ergebnisse. Das Tool vergibt sparsamer Übergabeparametern, setzt Links korrekt um und handhabt den Fokuszustand bei Buttons technisch richtig. Die identifizierten Schwächen sind überwiegend kleinerer Natur.

• Locofy polarisiert stärker. Es überzeugt insbesondere bei der Typisierung und der Erstellung und korrekten Einbindung eigener Komponenten, weist jedoch gleichzeitig zahlreiche nicht erfüllte Metriken auf.

• Im Vergleich zu den definierten Qualitätskriterien zeigen beide Tools ähnliche Ergebnisse bei Wiederverwendbarkeit und Wartbarkeit. Während Anima bei Verständlichkeit und Barrierefreiheit besser abschneidet, zeigt Locofy Stärken bei Struktur und Testbarkeit.

• Im Gesamtfazit ist der generierte Code zwar funktional, jedoch nicht unmittelbar produktionsreif. Für den praktischen Einsatz ist zusätzliche Nacharbeit erforderlich, und welche Lösung vorzuziehen ist, hängt stark vom jeweiligen Projektkontext ab.

Aus dem iterativen Designprozess und den Beobachtungen während der Analyse konnten acht praxisnahe Empfehlungen für die Figma-Designphase abgeleitet werden. Diese sollen Designer:innen dabei unterstützen, Figma-Designs so anzulegen, dass die durch Design-to-Code-Plugins generierten Ergebnisse qualitativ hochwertig und nah am ursprünglichen Entwurf sind.

1. Komponenten statt Kopien
2. Bezeichner mit Bedeutung
3. Code-Struktur mitdenken
4. Frames statt Groups
5. Responsivität durch Auto-Layout
6. Überflüssiges vermeiden
7. Styles statt Einzelwerte
8. Grafiken richtig vorbereiten

Hinsichtlich der Limitationen meiner Masterarbeit basiert die Analyse auf einem kleinen, überschaubaren Prototyp ohne Business-Logik. Zudem wurden weder manuelle Optimierungen noch Prompting einbezogen, sodass ausschließlich der reine Output in React, TypeScript und CSS bewertet wurde. Zudem wurden die Ergebnisse nicht in der Praxis validiert.

Für zukünftige Forschungen wäre es interessant, diese Aspekte miteinzubeziehen, sowie die in dieser Arbeit erstellten Metriken für Frontend-Code zu validieren.