Autoname

Was ist Autoname?

Autoname ist ein AI-basiertes Plugin zur Benennung von Ebenen, das für Figma-Designer entwickelt wurde und von Hugo Duprez erstellt wurde. Es kann den ausgewählten Designinhalt erkennen und für die Ebenen sowie ihre Unter-Ebenen leicht verständlichere Namen erzeugen.

Dieses Tool konzentriert sich auf die Benennung von Ebenen und ist nicht dafür zuständig, vollständige Benutzeroberflächen zu erstellen oder Designsysteme umzustrukturieren. Der Plugin steht kostenlos zur Verfügung, und der Client-Code wird unter der MIT-Lizenz veröffentlicht.

Hauptfunktionen von Autoname

• Einfache Benennung: Automatische Erkennung und Umbenennung der ausgewählten Schichten in Figma.
• Rekursive Verarbeitung: Die enthaltenen Unter-Ebenen werden im ausgewählten Bereich weiter verarbeitet.
• Komponentenschutz: Überwacht Komponenten und Instanzen, um eine willkürliche Änderung der Namen wichtiger wiederverwendbarer Objekte zu verhindern.
• KI-Klassifizierung: Verwendung von Bildklassifizierungsmodellen zur Erkennung häufig vorkommender Benutzeroberflächenelemente wie Schaltflächen, Bilder und Textblöcke.
• Benutzerdefinierte Modelle: Es ist möglich, die Adresse des Modells zu ändern und eigene Teachable Machine-Modelle zu importieren.
• Debug-Modus: Zeigt die dem Modell übermittelten Bilder an und gibt die Vorhersageinformationen in der Figma-Konsole aus.
• Open-Source-Klient: Entwickler können die Implementierung der Plugins einsehen, Projekte erstellen oder den Code gemäß der Lizenz anpassen.

Für welche Ebenen eignet es sich?

• Die Benennung der Benutzeroberflächen-Ebenen bleibt weiterhin die Standardwerte wie Frame, Group oder Rectangle usw.
• Objekte, bei denen nach dem Kopieren aus Vorlagen, Drahtzeichnungen oder externen Dateien der semantische Name fehlt.
• Enthält viele verschachtelte Strukturen; es ist zunächst ein Entwurf der Seite oder Komponente mit einer grundlegenden Ordnung erforderlich.
• Entwürfe für Mobile- und Webdesign, bei denen die Lesbarkeit der Schichten vor der Fertigstellung verbessert werden soll.
• Es ist notwendig, Designdokumente mit einheitlichen Klassifizierungsmodellen zu identifizieren, um die gängigen Interface-Elemente eines Teams zu erfassen.

Schutzmechanismen für Komponenten und Instanzen

Autoname überwacht Komponenten und Instanzen und versucht, die Umbenennung dieser Objekte, die eine Wiederverwendungsbeziehung aufweisen, so weit wie möglich zu vermeiden. Dieser Mechanismus verringert das Risiko, dass automatische Abläufe die Benennung der Komponentensammlung sowie die Zuordnung der Instanzen stören.

Schutzmechanismen bedeuten nicht, dass die Ausführung völlig risikofrei ist. Vor der Ausführung sollte man den Auswahlbereich noch einmal überprüfen und nach der Ausführung die Namen der Komponenten, Varianten sowie speziellen Ebenen prüfen.

Wie funktioniert die Benennung durch KI

1. Der Benutzer wählt auf dem Figma-Bildschirm die Schichten oder äußeren Rahmen aus, die geordnet werden sollen.
2. Der Plugin strukturiert den Ziel-Inhalt visuell in Bildeingaben, die vom Modell erkannt werden können.
3. Das Klassifizierungsmodell prognostiziert die Kategorie des dem Layer am nächsten liegenden Interface-Elements.
4. Der Plugin schreibt die Vorhersagungsergebnisse in den Namen der entsprechenden Schicht und geht anschließend weiter mit den bearbeitbaren Unter-Schichten.
5. Der Benutzer überprüft die Ergebnisse und passt anschließend manuell die für den Geschäftsbereich spezifischen Namen oder korrigiert Fehler.

Anleitung zur Installation von Autoname

1. Melden Sie sich bei Figma an und gehen Sie zur Seite für Community-Plugins.
2. Suchen Sie nach Figma Autoname, das von Hugo Duprez veröffentlicht wurde, und überprüfen Sie den Autor sowie die Identifikation des Plugins.
3. Klicken Sie zum Öffnen oder Installieren des Plugins und erteilen Sie ihm die Berechtigung, im aktuellen Design-Dokument zu laufen.
4. Kehren Sie zum Entwurf zurück und starten Sie Autoname über das Plugin-Menü.
5. Erst die Testseite kopieren und die Namensergebnisse auf einer kleinen Ebene überprüfen.

Anleitung zur automatischen Benennung mit einer Taste

1. Wählen Sie eine oder mehrere Ebenen aus, die bearbeitet werden sollen – es ist auch möglich, ein Rahmenwerk mit mehreren Ebenen zu wählen.
2. Öffnen Sie den Autoname-Plugin und überprüfen Sie, ob die aktuelle Auswahl Objekte enthält, die nicht geändert werden sollten.
3. Führen Sie die automatische Benennung aus und warten Sie, bis das Modell geladen und erkannt wurde.
4. Öffnen Sie das Ebenen-Panel und überprüfen Sie, ob die Namen der übergeordneten und untergeordneten Ebenen der gestalterischen Logik entsprechen.
5. Löschen Sie die fehlerhaften Ergebnisse oder fügen Sie manuell den Namen des Seiteninhalts hinzu, und speichern Sie anschließend die Designdatei.

Auswahlorange und Verarbeitung von Unter-Ebenen

Der Plugin arbeitet mit dem aktuell ausgewählten Element sowie dessen Unterelementen. Daher kann die Auswahl des übergeordneten Seitenrahmens dazu führen, dass viele Objekte beeinflusst werden. Wenn eine präzise Steuerung erforderlich ist, kann man zunächst ein einzelnes Kartenfeld, eine Navigationsleiste oder einen Inhaltsteil auswählen.

Für Seiten, bei denen bereits strenge Namenskonventionen eingeführt wurden, wird empfohlen, die Bearbeitung in Schritten durchzuführen. Die batchweise Verarbeitung macht es einfacher, Abweichungen in der Klassifizierung zu erkennen, und es ist auch einfacher, mithilfe der Rückgabefunktion von Figma wieder in den ursprünglichen Zustand zurückzukehren.

Einfügen eines benutzerdefinierten AI-Modells

Autoname ermöglicht den Wechsel der Modell-Adresse und kann in Kombination mit Teachable Machine genutzt werden, um eigene Modelle zur Bildklassifizierung zu erstellen. Teams können Kategorien trainieren, die besser zu den internen Komponenten, Produktterminologien und Designmustern passen.

Schritte zur Anpassung der Modell-Einstellungen

1. Ordnen Sie die zu identifizierenden Kategorien wie Hauptknöpfe, Etiketten, Profilbilder, Karten und Navigationselemente.
2. Für jede Kategorie bereiten Sie ausreichende und unterschiedliche Beispiele für Screenshots der Benutzeroberfläche vor.
3. Trainieren Sie ein Modell zur Bildklassifizierung in Teachable Machine und überprüfen Sie die Genauigkeit mit Testbeispielen.
4. Exportieren oder verwalten Sie kompatible Modelle und dokumentieren Sie die Adressen der Modelle, auf die der Plugin zugreifen kann.
5. Ersetzen Sie in Autoname die Modelladresse und überprüfen Sie die Ausgabe mit einem separaten Testfile.
6. Nachdem das Modell stabil ist, wird sein Anwendungsbereich erweitert, und weiterhin werden verwirrende Beispiele hinzugefügt.

Wie verwendet man den Debug-Modus?

Im Debug-Modus werden die an das Modell gesendeten Frame-Bilder innerhalb des Plugins angezeigt, und die Vorhersagungsergebnisse werden in die Figma-Konsole geschrieben. Er eignet sich zur Behebung von Problemen bei inkonsistenten Auswahlmöglichkeiten, Modellkategorien und Benennungen.

• Überprüfen Sie, ob das Bild, das vom Modell tatsächlich empfangen wird, vollständig zugeschnitten ist.
• Beobachten Sie die Ergebnisse der Vorhersagen für verschiedene Kategorien sowie die leicht verwechselbaren Benutzeroberflächen-Elemente.
• Überprüfen, ob die Adresse des benutzerdefinierten Modells ordnungsgemäß geladen werden kann.
• Das Positionierungsmodell erkennt Probleme bei der Erkennung sowie logische Probleme beim Umbenennen von Plugins.

Offener Quellcode und lokale Entwicklung

Das offizielle Client-Repository wird unter der MIT-Lizenz bereitgestellt. Für das Projekt werden Technologien wie Svelte, TypeScript, Tailwind CSS, TensorFlow und Teachable Machine verwendet. Der Open-Source-Anwendungsbereich umfasst hauptsächlich den Plugin-Client; dies bedeutet jedoch nicht, dass die Figma-Plattform oder alle Modellservices zum Projekt gehören.

Grundlegender Ablauf der lokalen Kompilierung

1. Holen Sie sich den offiziellen Client-Code und lesen Sie die Lizenz sowie die Entwicklungsanleitungen im Repository.
2. Installieren Sie die Projektabhängigkeiten und starten oder kompilieren Sie die Plugin-Ressourcen lokal.
3. Im Figma-Desktop-Client wird das Manifest in das Projekt über die Funktion zur Entwicklung von Plugins eingefügt.
4. Nach der Anpassung des Codes neu kompilieren und bei Bedarf den Plugin neu starten, um die Änderungen zu überprüfen.
5. Aktivieren Sie den Debug-Modus, um die Bildeingaben, die Vorhersageprotokolle und die benannten Ergebnisse zu überprüfen.
6. Prüfen Sie vor Veröffentlichung der überarbeiteten Version die MIT-Lizenz, die Drittanbieter-Abhängigkeiten sowie die Regeln der Figma-Plattform.

Technologiestack und Abhängigkeiten

Typische Anwendungsszenarien

• Entwurfsreinigung: Schnelle Ersetzung vieler Standard-Layer-Names zur Verbesserung der Lesbarkeit der Datei.
• Entwicklung und Bereitstellung: Vor der Bereitstellung wird die Seitenstruktur geordnet, um den Ingenieuren dabei zu helfen, die Gestaltungselemente zu finden.
• Vorlagenorganisation: Erste semantische Benennung von kopierten oder importierten Vorlagen.
• Teamrichtlinien: Kombination eines benutzerdefinierten Modells zur Erkennung häufig vorkommender interner Komponentenkategorien.
• Lehrübungen: Hilft Anfängern, die Organisation von Ebenen sowie grundlegende Namenskonzepte zu verstehen.
• Open-Source-Lernen: Untersuchung der Kombination von Figma-Plugins, Frontend-Oberflächen und Bildklassifizierungsmodellen.

Für welche Benutzer geeignet

• Produktdesigner und Visual Designer, die Figma-Ebenen häufig organisieren müssen.
• Entwicklerteams, die große Seitendateien verwalten und die wiederholte Benennung von Dateien reduzieren möchten.
• Vorbereitung zur Übergabe des Entwurfs an das Produktteam der Frontend- oder Client-Entwickler.
• Hoffentlich kümmern sich die Betreuer des Design-Systems um die Entwicklung von Modellen zur Klassifizierung von Trainingsoberflächen.
• Entwickler, die sich mit der Entwicklung von Figma-Plugins sowie Frontend-Anwendungen mit TensorFlow beschäftigen.

Vorteile von Autonamen

• Das Ziel ist eindeutig und klar – es eignet sich hervorragend zur Bewältigung der häufig wiederkehrenden Aufgabe, Ebenen zu benennen.
• Die Unterstützung für ausgewählte Ebenen und Unterebenen verkürzt die Zeit, die für die manuelle Anpassung Ebene für Ebene benötigt wird.
• Aktive Schutzmechanismen für Komponenten und Instanzen, um die Wahrscheinlichkeit von Schäden an der Wiederverwendungsstruktur zu verringern.
• Es ist kein Kauf eines Add-on-Pakets erforderlich – sowohl Einzelpersonen als auch Teams können es kostenlos ausprobieren.
• Der Client-Code ist öffentlich verfügbar und unter der liberalen MIT-Lizenz gestellt.
• Unterstützung von benutzerdefinierten Modellen, die sich an die Designsprache unterschiedlicher Teams anpassen lassen.
• Es wird ein Debug-Modus bereitgestellt, der Entwicklern die Überprüfung der Eingabedaten des Modells sowie der Vorhersagungsergebnisse erleichtert.

Nutzungsbeschränkungen

• Die Klassifizierung durch KI ist nicht immer genau – Knöpfe, Karten und kleine Objekte mit ähnlichem Aussehen können verwechselt werden.
• Automatische Namen sind in der Regel allgemeine Kategorien und können die vollständige Produktsemantik wie den Bestellstatus oder Geschäftsmodule nicht erfassen.
• Die Auswahl eines großen Rahmens beeinflusst viele Unter-Ebenen, und nach der Ausführung muss man diese einzeln überprüfen.
• Der Plugin benötigt eine Internetverbindung, um Modelle herunterzuladen; bei eingeschränktem Netzwerkzugang kann es nicht ordnungsgemäß initialisiert werden.
• Für benutzerdefinierte Modelle müssen Beispiele bereitgestellt, sie trainiert, gehostet und gewartet werden; sie sind nach der Importierung nicht sofort dauerhaft stabil.
• Offene Quellcode-Repository umfassen hauptsächlich Client-Seiten; man sollte nicht davon ausgehen, dass alle Modelle, Hosted-Dienste oder Figma-Funktionen privat gemacht werden können.
• Das Update-Rhythmus der offiziellen Projekte kann sich ändern; vor der Installation sollte man den Status der Community-Seite sowie des Code-Repos überprüfen.

Hinweise zu Privatsphäre und Sicherheit

• Vor dem Ausführen prüfen Sie die Adresse des verwendeten Modells sowie den Datenbereich, auf den die Plugins Zugriff benötigen.
• Bei nicht veröffentlichten Produkten, Kundendaten oder geheimen Entwürfen muss zunächst eine interne Genehmigung innerhalb der Organisation eingeholt werden.
• Bei der Verwendung von Drittanbieter- oder selbst entwickelten Modellen muss man die Protokollierungs- und Datenspeicherungspolitik des Anbieters des Modells bewerten.
• Beurteilen Sie die Bedeutung einer Schicht nicht allein anhand der automatischen Benennung – die endgültige Freigabe bleibt in der Verantwortung des Designers.
• Es wird empfohlen, in einer Kopie zu testen und die Versionsgeschichte von Figma zu nutzen, um wiederherstellbare Knoten zu speichern.

Methoden zur Verbesserung der Qualität der Benennungen

1. Zuerst sollten die unnötigen Ebenen entfernt werden, und die offensichtlichen Zusammenhänge zwischen den Elementen müssen klar strukturiert werden.
2. Führen Sie die Aufgaben in Gruppen nach Seitenblöcken aus, um zu vermeiden, dass einmal eine ganze komplexe Datei ausgewählt wird.
3. Beibehaltung der bestehenden Namenskonventionen für Komponenten, Instanzen und die geschäftskritischen Schichten.
4. Ersetzen Sie den allgemeinen Begriff für KI durch die von dem Team vereinbarten Semantiken für Seiten und Zustände.
5. Erhalten Sie Aufzeichnungen der häufig fehlerhaft klassifizierten Elemente, um gezielte Beispiele für benutzerdefinierte Modelle hinzuzufügen.
6. Nach der automatischen Benennung erfolgt eine manuelle Überprüfung, bevor es an die Entwicklung oder Archivierung weitergegeben wird.

Preis und Version

Autoname bezeichnet die Plugins als völlig kostenlos; es gibt weder kostenpflichtige Mitgliedschaften noch Punktesysteme oder Gebühren je nach Anzahl der Nutzer. Die Kosten, die durch die Verwendung von Figma, das Hosting von benutzerdefinierten Modellen oder interne Entwicklung entstehen, fallen nicht unter die Gebühren für Autoname-Plugins.

Grundlegende Informationen

Empfehlungswert

Der Gesamtbewertungswert beträgt 4,2 von 5 möglichen Punkten. Es eignet sich für Designer, die die Standardnamen der Ebenen in Figma schnell ändern müssen. Dennoch sind die von der KI erzeugten Ergebnisse weiterhin menschlicher Überprüfung sowie der Hinzufügung von geschäftlich relevanten Informationen bedürftig.

Häufige Fragen

Was macht Autoname hauptsächlich?

Es verwendet ein Modell zur Bildklassifizierung, um automatisch Namen für die ausgewählten Ebenen sowie deren Unter-Ebenen in Figma zu erstellen.

Ist Autoname kostenlos?

Kostenlos – die offiziellen Anbieter bieten weder Mitgliedschaften noch Punkte oder Pakete mit Gebühren pro Sitz an.

Wird es Komponenten und Instanzen umnamen?

Der Plugin überwacht und schützt Komponenten sowie Instanzen, doch nach dem Start wird empfohlen, die wichtigsten wiederverwendbaren Objekte manuell zu überprüfen.

Kann man mehrere Ebenen auf einmal bearbeiten?

Ja, der Plugin wird die aktuell ausgewählte Ebene verarbeiten und anschließend weiterhin die darin enthaltenen Unter-Ebenen überprüfen.

Ist das Ergebnis der Benennung immer genau?

Nicht unbedingt – Elemente mit ähnlichem Aussehen oder komplexer Geschäftssemantik können zu Fehlern bei der Klassifizierung und Benennung führen.

Kann man eigene Modelle verwenden?

Ja, der Benutzer kann das Teachable Machine-Modell trainieren und die Adresse des Modells im Plugin ändern.

Warum ist eine Internetverbindung notwendig?

Der Plugin muss Modelle über das Netzwerk herunterladen; bei fehlender Netzverbindung oder einer ungültigen Modell-Adresse kann die Erkennung nicht durchgeführt werden.

Ist Autoname ein Open-Source-Tool?

Der Code der offiziellen Client-Software ist öffentlich verfügbar und unterliegt der MIT-Lizenz, doch die Figma-Plattform sowie externe Modellservices fallen nicht unter diese Lizenz.

Wird eine eigenständige API bereitgestellt?

Derzeit gibt es keine eigenständige öffentliche API für externe Systeme; sie wird hauptsächlich in Form von Figma-Plugins verwendet.

Eignet es sich für große Design-Systeme?

Es kann zur ersten Aufbereitung verwendet werden, doch große Designsysteme sollten mit internen Vorschriften, benutzerdefinierten Modellen und strenger manueller Überprüfung kombiniert werden.