Figma ist ein leistungsstarkes Tool zum Entwerfen und Prototyping von Schnittstellen, kann aber auch mit Plugins erweitert werden, um benutzerdefinierte Funktionen hinzuzufügen. Das Erstellen dieser Plugins kann ein mühsamer und zeitaufwändiger Prozess sein, aber mit Hilfe von ChatGPT, einem großen, von OpenAI trainierten Sprachmodell, ist es möglich, Code für Plugins zu generieren, indem man nur eine Beschreibung des gewünschten Ergebnisses verwendet.

In diesem Artikel werde ich die Verwendung von ChatGPT zum Generieren von Code für drei verschiedene Plugins demonstrieren. Der Code für diese Plugins wird unverändert verwendet, ohne dass eine manuelle Bearbeitung erforderlich ist. Das erste Plugin reduziert also alle erweiterten Ebenen in der Ebenenliste. Der zweite generiert einen QR-Code mit der Möglichkeit, das Ergebnis herunterzuladen. Der dritte sucht nach dem alten Produktnamen und ersetzt ihn in jedem Textblock auf der Seite durch den neuen. Interessant? Lass uns weitermachen!

Plugin „Knoten reduzieren“.

Das erste Plugin, das ich demonstrieren möchte, ist eines, das alle Knoten wie INSTANCE, FRAME, GROUP usw. ausblenden kann, wenn der Benutzer das Plugin ausführt. Natürlich verfügt Figma über eine Tastenkombination (ALT+L), die die gleiche Aktion ausführt, aber wir werden die Fähigkeit von ChatGPT erkunden, einfache Plugins für Figma zu erstellen, um zu sehen, wie es funktionieren würde und wie lange es dauern würde.

• Zeigen Sie ein Beispiel des Figma-Plugins, das Frames auf der aktuellen Seite findet und untergeordnete Frames, Gruppen und Instanzen auf allen Verschachtelungsebenen reduziert. Reduzieren Sie dann die auf der Leinwand platzierten übergeordneten Rahmen. Schließen Sie dann das Plugin und zeigen Sie eine Benachrichtigung mit dem Text „Aufgabe ist abgeschlossen“ an.
• 30 Minuten, um das Arbeitsergebnis zu erhalten und es in Figma zu testen.
• 40 Minuten, um optimierten Code zu erhalten.

Wie Sie sehen, generiert ChatGPT eine Lösung, die nicht optimal ist und viel unnötigen Code enthält. Dennoch funktioniert der obige Code sofort und kann bestimmte Probleme in Figma ohne zusätzliche Bearbeitung lösen.

Als zusätzliche Übung können wir auch versuchen, die KI zu bitten, den Code zu optimieren, und nach mehreren Versuchen wird der Code so aussehen:

Das Ergebnis der Optimierung ist großartig! AI hat alle unnötigen Teile des Codes entfernt und nur die wichtigen Teile übrig gelassen, die Ihnen das gleiche Ergebnis liefern wie der ursprünglich generierte Code.

Es ist jedoch wichtig zu bedenken, dass die Aufforderung an die KI, den Code zu optimieren, ohne seinen Kontext und Zweck anzugeben, dazu führen kann, dass der Code nur teilweise oder überhaupt nicht funktioniert.

QR-Generator-Plugin

Das zweite Plugin öffnet das Figma-UI-Fenster und generiert einen QR-Code mit der Möglichkeit, das Ergebnis als PNG-Datei herunterzuladen, nachdem der Benutzer auf die Schaltfläche „Generieren“ geklickt hat. Dieses Plugin ist etwas komplexer als das erste und erfordert ein klares Verständnis dessen, was Sie erreichen möchten. Wenn Sie ChatGPT mit der Generierung von Code beauftragen, wird Ihnen im Wesentlichen eine komplexe Lösung vorgeschlagen, die möglicherweise ein tieferes Verständnis des Entwicklungsprozesses erfordert. Der von der KI generierte anfängliche Code erforderte die Aufteilung des Codes in JS- und HTML-Dateien, die Installation von npm-Paketen mit JavaScript-Bibliotheken und die Verwendung von Bundlern wie Webpack oder Babel. Wenn Sie mit diesen Tools nicht vertraut sind, kann es sein, dass Sie stecken bleiben und die Idee, eine funktionierende Lösung zu entwickeln, aufgeben. Also nach mehreren Versuchen,

• Zeigen Sie ein Beispiel des JavaScript-Codes für das Figma-Plugin, das nur eine ui.html-Datei zum Generieren eines QR-Codes verwendet, nachdem der Benutzer die URL zum Eingabefeld hinzugefügt und auf die Schaltfläche „Generieren“ geklickt hat. Das Plugin sollte die „qrcodejs“-Bibliothek als Link zum CDN verwenden. Der generierte QR-Code sollte im selben Figma-UI-Fenster angezeigt werden mit der Möglichkeit, das Ergebnis herunterzuladen.
• 2 Stunden, um ein funktionierendes Ergebnis zu erhalten. Die meiste Zeit habe ich damit verbracht, herauszufinden, welche Bibliothek ich zum Generieren des QR-Codes verwenden sollte.

Es klappt! Einfach wow! Nicht wahr? Die einzigen erforderlichen Dinge sind ein klares Verständnis des gewünschten Ergebnisses, die Fähigkeit, geeignete Anfragen zu formulieren und alle wichtigen Aspekte zu berücksichtigen, die sich in der endgültigen Lösung widerspiegeln sollten. Unten finden Sie ein Beispiel für den von ChatGPT generierten Code:

Noch eine zusätzliche Übung. Bitten wir AI, die vorhandene Benutzeroberfläche zu verschönern und einige CSS-Stile auf unser Plugin anzuwenden.

Unten finden Sie ein Beispiel für die von ChatGPT generierten CSS-Stile:

Und das ist das Endergebnis mit den angewendeten Stilen.

Plugin zum Suchen und Ersetzen

Das dritte Plugin sucht nach Vorkommen eines alten Produktnamens und ersetzt diese durch einen neuen. Obwohl es aus Entwicklungssicht nicht besonders erwähnenswert ist, dient es als Beispiel dafür, wie KI zur Fehlerbehebung und Verbesserung von nicht funktionsfähigem Code eingesetzt werden kann, indem Fehlerbeschreibungen aus der Konsole verwendet werden, um Probleme zu identifizieren und zu lösen.

• Zeigen Sie ein Beispiel des JavaScript-Codes ohne „require“ für das Figma-Plugin, das Folgendes bewirkt: Keine asynchronen Funktionen verwenden, alle Knoten (Frame, Gruppe, Instanz, Symbol usw.) auf der aktuellen Seite mit Textknoten finden die „Acronis Backup“-Zeichen enthalten, „Acronis Backup“ durch „Acronis Cyber ​​Protect“ ersetzen, Plugin schließen, Benachrichtigung anzeigen.
• 20 Minuten inklusive Fehlerbehebung, um ein funktionierendes Ergebnis zu erhalten.

Auch der zweite Versuch war erfolglos. Ich habe einen weiteren Fehler in Figma erhalten und AI gebeten, den Code erneut zu verbessern.

Nach der zweiten Anfrage empfahl AI, die Logik des Plugins durch die Integration eines Figma-UI-Aufrufs und einer Event-Listener-Funktion zu ändern. Die Ereignis-Listener-Funktion impliziert, dass ein bestimmtes Ereignis beispielsweise in der Datei ui.html auftreten muss, bevor die Funktion ausgeführt wird. Dies schien eine unnötig komplexe Lösung zu sein, die wahrscheinlich viel Zeit für die Fehlerbehebung und das Erstellen eines funktionsfähigen Codes in Anspruch nehmen würde.

Um die Lösung nicht zu verkomplizieren, habe ich AI dann gebeten, die Event-Listener-Funktion nicht zu verwenden. Und schließlich hat ChatGPT Code generiert, der wie erwartet funktioniert.

Unten finden Sie ein Beispiel für den von ChatGPT generierten Code:

Abschließend

Die Entwicklung von Plugins für Figma mit ChatGPT kann ein leistungsstarkes Tool zur Automatisierung von Aufgaben auf niedriger Ebene und zur Generierung bestimmter Codeteile sein. Um ChatGPT effektiv nutzen zu können, ist es jedoch wichtig, ein klares Verständnis Ihrer Ziele und der zu deren Erreichung erforderlichen Schritte zu haben. Es ist auch wichtig zu bedenken, dass der von der KI generierte Code übermäßig komplex sein kann und möglicherweise optimiert werden muss. Darüber hinaus kann der Mangel an Kontext, der der KI bereitgestellt wird, dazu führen, dass Code generiert wird, der nicht wie erwartet oder überhaupt nicht funktioniert.

Außerdem eignet sich ChatGPT hervorragend zur Fehlerbehebung, da es schnell Code basierend auf spezifischen Eingaben und Anforderungen generieren kann. Darüber hinaus kann dies im Vergleich zum manuellen Schreiben oder Umschreiben des Codes oder dem Googeln der möglichen Lösungen irgendwo auf Stackoverflow erheblich Zeit und Mühe sparen.

Weitere Geschichten über Werkzeuge

• E-Mail-Builder für Figma
• ffmpeg + ImageMagick. Konvertieren Sie Videos mit der Terminal.app unter macOS in GIF
• So erstellen Sie ein Sketch-Plugin, das Symbole aus Ihrer Bibliothek mit jeder externen Dokumentation verbindet
• So optimieren Sie Bilder mit macOS Terminal + TinyPNG CLI

• Facebook
• Mittel