Jetzt systematisieren viele Teams das Design ihrer Anwendungen. Wir haben uns entschlossen, die Codesynchronisierung mit unserer Komponentenbibliothek weiter zu automatisieren.
Tatsache ist, dass in hh der bekannte Figma- Service zum Entwerfen der Benutzeroberfläche verwendet wird, die neben anderen Vorteilen eine offene API aufweist. Dies wiederum eröffnet Entwicklern großartige Möglichkeiten, die wir nutzen wollten.
So entstand die Idee des FigmaGen- Projekts - ein Tool, das Code mit der Komponentenbibliothek in Figma synchronisiert. Anfangs sah es wie ein Experiment aus, das nur für unser Produkt spezifisch war, aber es stellte sich heraus, dass es sich um eine universellere Lösung handelte. In diesem Artikel werden wir die ersten Früchte unserer Entwicklung vorstellen.
Wie funktioniert das?
In Figma können Sie eine Bibliothek mit Komponenten und Stilen erstellen, die global wiederverwendet werden können. Wenn diese Komponenten gruppiert sind und sich in einer separaten Datei befinden, ist es für Designer idealerweise einfacher, mit ihnen zu arbeiten, und Entwickler erhalten eine einzige Wissensquelle für die Implementierung dieser Entitäten in Code.
Wir haben eine kleine Demo-Datei in Figma für Styles vorbereitet, die als Referenz verfügbar ist und wie folgt aussieht:
FigmaGen empfängt solche Figma-Dateien über seine API , extrahiert dann alle erforderlichen Daten und rendert sie mithilfe von Schablonenvorlagen im Quellcode. Alle diese Schritte können in der Konfigurationsdatei konfiguriert werden. Um die Generierung zu starten, müssen Sie nur den Befehl ausführen:
figmagen generate
Derzeit unterstützt FigmaGen die Generierung von Farb- und Textstilen, die folgendermaßen verwendet werden können:
titleLabel.attributedText = "Hello world".styled( .title2, textColor: Colors.imperial ) view.backgroundColor = Colors.whiteSmoke
Der gesamte generierte Code kann einfach mithilfe seiner eigenen Schablonenvorlagen angepasst werden. Daher gibt es auf den Plattformen keine Einschränkungen, es ist lediglich erforderlich, eine Vorlage für die entsprechende Sprache zu implementieren und den Pfad dazu in der Konfiguration anzugeben. Ein zusätzlicher Bonus ist die Verwendung des StencilSwiftKit-Frameworks in FigmaGen , das den Vorlagen nützliche Filter und Tags hinzufügt.
Installation
Die Installation von FigmaGen ist Standard für solche Tools und es gibt mehrere grundlegende Möglichkeiten:
- CocoaPods : Fügen Sie die
pod 'FigmaGen' Zeile pod 'FigmaGen' zum Podfile und führen Sie den Befehl pod install --repo-update . - Homebrew : Führen Sie den
brew install hhru/tap/FigmaGen . - Laden Sie das Zip-Archiv der neuesten Version manuell aus dem Repository herunter und entpacken Sie es.
Bei der Installation mit CocoaPods sollte der Befehl generation den Pfad zum Pods/FigmaGen :
Pods/FigmaGen/figmagen generate
Die Installation mit CocoaPods wird empfohlen, da Sie damit die Version von FigmaGen auf allen Computern im Team reparieren können.
Konfiguration
Um FigmaGen zu konfigurieren, müssen Sie die Datei .figmagen.yml im Projektstammordner erstellen. Bei Bedarf können Sie im Parameter --config des Befehls generation einen anderen Pfad angeben. Beispiel:
figmagen generate --config 'MyFolder/figmagen.yml'
Die Konfigurationsdatei selbst hat das YAML- Format und ist in mehrere Abschnitte unterteilt:
base : Grundparameter, die für alle anderen Abschnitte relevant sind. Jeder Parameter aus diesem Abschnitt kann überschrieben werden, um den Generierungs-Unterbefehl selbst zu konfigurieren.colors : Optionen für den Unterbefehl color generation.textStyles : Optionen für den Unterbefehl zum Generieren von Textstilen.
Wenn jedoch ein Abschnitt des Unterbefehls generation in der Konfiguration fehlt, wird dieser Unterbefehl übersprungen.
Grundlegende Parameter
Um einige Felder in der Konfiguration nicht zu duplizieren, haben wir sie in einem separaten Basisabschnitt ausgewählt, der die für jeden Generierungs-Unterbefehl relevanten Parameter enthält:
accessToken : Zeichenfolge mit Figma-Zugriffstoken.fileKey : Zeile mit der Dateikennung Figma.
Diese Parameter werden von denjenigen Generierungs-Unterbefehlen verwendet, für die sie nicht definiert sind, zum Beispiel:
base: accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868 colors: fileKey: ZvsRf99Ik11qS4PjS6MAFc textStyles: fileKey: D1rfFI220qwaG8fD8iBqWa
In diesem Fall werden Farben und Textstile aus verschiedenen Figma-Dateien generiert, jedoch mit demselben Zugriffstoken.
Zugriffstoken
Für den Empfang der Figma-Datei ist eine Autorisierung erforderlich, die durch die Übertragung eines persönlichen Zugriffstokens erfolgt. Ein solches Token kann in wenigen einfachen Schritten erstellt werden:
- Öffnen Sie die Kontoeinstellungen in Figma.
- Klicken Sie im Abschnitt "Persönliche Zugriffstoken" auf die Schaltfläche "Neues persönliches Zugriffstoken erstellen".
- Geben Sie eine Beschreibung für das zu erstellende Token ein (z. B. "FigmaGen").
- Kopieren Sie das erstellte Token in die Zwischenablage.
Als Nächstes müssen Sie das empfangene Token in das Feld accessToken der Konfiguration einfügen. Wenn dieses Token den Zugriff auf alle Figma-Dateien ermöglicht, die in der Konfiguration angezeigt werden, reicht es aus, es nur im Basisabschnitt zu definieren.
Aus Sicherheitsgründen wird empfohlen, ein speziell erstelltes Benutzertoken zu verwenden, das nur Leserechte für die Figma-Datei besitzt.
Figma-Dateien
FigmaGen fordert die Figma-Datei mit ihrer Standardkennung an, die Sie über die URL in der Adressleiste des Browsers erhalten.
Im Allgemeinen hat diese URL das folgende Format:
https://www.figma.com/file/<>/<>?node-id=< >
Nach Erhalt der fileKey muss diese im Feld fileKey der Konfiguration angegeben werden. Wird wie bei einem Zugriffstoken für alle Generierungs-Unterbefehle eine einzige Datei verwendet, können Sie die Kennung nur im base .
Erzeugungseinstellungen
Zusätzlich zu den Basisparametern müssen für jeden Generierungs-Unterbefehl die folgenden Einstellungen festgelegt werden:
destinationPath : Pfad zum Speichern der generierten Datei.templatePath : Pfad zur Schablonenvorlagendatei. Wenn der Parameter weggelassen wird, wird die Standardvorlage verwendet.includingNodes : Frame-IDs, die beim Generieren des Codes verwendet werden sollen. Wenn dieser Parameter weggelassen wird, werden alle Knoten der Datei verwendet.excludingNodes : Bezeichner von Frames, die beim Generieren von Code ignoriert werden sollen. Wenn dieser Parameter nicht angegeben wird, werden alle im Feld includeNodes angegebenen Dateirahmen verwendet.
Die Einstellungen zum Generieren von Textstilen können beispielsweise wie folgt lauten:
textStyles: destinationPath: Sources/Generated/TextStyle.swift templatePath: Templates/TextStyles.stencil includingNodes: - 7:24 - 3:19 ...
Mit dieser Konfiguration werden nur die Textstile generiert, die sich in Frames mit den Bezeichnern "7:24" und "3:19" befinden.
Knotenfilterung
Unsere Projektbibliothek enthält plattformspezifische Komponenten. Beispielsweise unterscheidet sich die Schriftart in den Textstilen: In iOS ist es San Francisco und in Android ist es Roboto . Um keinen zusätzlichen Code zu generieren, müssen solche Stile gefiltert werden. Leider reichen Standard-Figma-Tools hier nicht aus, und wir haben einige Optionen für die Implementierung in Betracht gezogen:
- Systematisierung der Namen von Stilen und Komponenten: In diesem Fall würde der Name jedes Elements einige Metainformationen enthalten, die in FigmaGen entsprechend verarbeitet wurden.
- Filtern nach Frame-IDs: Alle Stile werden nach Typ und Plattform in separate Frames gruppiert. Die IDs dieser Frames sind in der FigmaGen-Konfiguration festgelegt.
In dieser Phase haben wir uns für die zweite Methode entschieden, da wir die Prozesse des Designteams für die Automatisierung auf der Entwicklungsseite nicht ändern wollten. In den Parametern includingNodes und excludedNodes können Sie daher die Frame-IDs auflisten, die für die Generierung von Unterbefehlen eingeschlossen bzw. ausgeschlossen werden sollen.
Sie können auch die Adressleiste des Browsers verwenden, um die Kennungen selbst abzurufen. Wählen Sie dazu den gewünschten Frame in Figma aus, und die URL hat ihren Bezeichner im Wert des Parameters node-id . In die Konfiguration können sowohl geschirmte als auch ungeschirmte Bezeichner eingefügt werden.
Für die Implementierung der neuen Funktionalität ist es für uns möglicherweise immer noch unzureichend, Frames nach ihren Bezeichnern zu filtern. In diesem Fall werden wir die Möglichkeiten von FigmaGen sicherlich erweitern, wenn zu diesem Zeitpunkt eine Standardlösung von Figma beispielsweise nicht in Form von Tags für Komponenten erscheint.
Generation
In einem separaten Repository gibt es ein Demo-Projekt , das zum Kampf bereit ist. Sie können es herunterladen und frei experimentieren. FigmaGen wird mit CocoaPods installiert. Führen Sie daher zuerst den Befehl pod install . Der Einfachheit halber wurde der Erstellungsphase ein Aufruf des Generierungsbefehls hinzugefügt, und bei jeder Ausführung werden alle generierten Dateien aktualisiert.
Nachdem Sie mit dem Code für die Stile aus der Demobibliothek gespielt haben, können Sie die Datei in Ihr Figma-Konto kopieren, indem Sie auf die Schaltfläche "Auf Ihre Entwürfe duplizieren" klicken.
Auf diese Weise können Sie die Stile ändern und besser verstehen, wie ihr Code generiert wird. Sie müssen FigmaGen nur neu konfigurieren, indem Sie die Daten für die neue Datei angeben.
Das Demo-Projekt eignet sich auch hervorragend als Spielwiese zum Anpassen von Schablonenvorlagen, die sich im Ordner Vorlagen befinden. Sie können sie direkt in Xcode bearbeiten und die Korrektheit sowohl der Vorlagen selbst als auch des Codes, den sie mit einem Durchlauf des Projektbuilds generieren, überprüfen.
Projektintegration
Es wird empfohlen, in der Erstellungsphase des Projekts verschiedene Codegenerierungstools ( SwiftGen , R.Swift ) auszuführen , da diese lokale Ressourcen verwenden, die sich während der Entwicklung ändern können. In diesem Fall stellt eine solche Integration sicher, dass immer der aktuellste Code in die Assembly gelangt.
FigmaGen verwendet keine lokalen Ressourcen. Alle zu generierenden Daten sind in Figma gespeichert. Daher ist es nicht sinnvoll, sie für jede Assembly aufzurufen. Es ist viel besser, Code einmal zu generieren und regelmäßig zu aktualisieren, wenn neue Versionen der Komponentenbibliothek erscheinen, oder wenn die Version von FigmaGen selbst aktualisiert wird.
Jetzt in unserem Projekt ist der diensthabende Entwickler damit beschäftigt, den generierten Code zu aktualisieren. In den nächsten Versionen von FigmaGen ist geplant, Unterstützung für die Versionierung von Figma-Dateien hinzuzufügen. Anschließend kann dieser Vorgang möglicherweise automatisiert werden, dies ist jedoch eine völlig andere Geschichte.
Um es zusammenzufassen
Dies sind nur unsere ersten Schritte zur Entwicklung eines leistungsstarken Tools, mit dem Entwickler die gesamte mit dem Entwurfssystem verbundene Routine so weit wie möglich automatisieren können.
Der schwierigste Teil des Projekts wurde abgeschlossen: Die Architektur wird definiert, die wichtigsten wiederverwendeten Knoten werden gebildet und die Infrastruktur wird konfiguriert. Dadurch können wir die neue FigmaGen-Funktionalität schnell erweitern, und wir haben noch viele interessante Pläne:
- Versionierung von Figma-Dateien
- Bildautomatisierung
- Unterstützung für helle und dunkle Themen
- Codegenerierung für Farbverläufe, Schatten, Striche usw.
Und neue Versionen mit diesen Funktionen werden mit Sicherheit sehr bald erscheinen. Bleiben Sie auf dem Laufenden im FigmaGen- Repository .
Das ist alles. Wir freuen uns über Feedback in den Kommentaren. Tschüss!