FigmaExport: Automatisieren des Exports eines UI-Kits von Figma in Xcode- und Android Studio-Projekte

Wenn Sie ein iOS- oder Android-Entwickler sind und das Design Ihres Projekts in Figma entwickelt wurde, treten beim Exportieren von Ressourcen höchstwahrscheinlich Probleme auf: Sie können keine Farben entladen, und das Exportieren von Symbolen und Bildern ist unpraktisch. In diesem Artikel werde ich Ihnen erklären, wie Sie Ihr Leben einfacher machen und den Export des UI-Kits von Figma direkt nach Xcode und Android Studio automatisieren können.



Immer mehr mobile Entwicklungsteams wechseln zu Figma. Zuvor verwendeten viele (und auch wir) ein Bündel von Sketch + Zeplin oder Figma + Zeplin. Und es war bequem. Aber als wir bei einem der Projekte Unterstützung für das dunkle Thema hinzufügten, verschlechterte sich die Situation. Zeplin unterstützt das dunkle Thema nicht, daher müssen Sie nach Problemumgehungen suchen, die Sie zum Nachdenken anregen: Wird Zeplin jetzt benötigt? In diesem Fall ist Zeplin eine Verschwendung der Zeit des Designers, Projekte in zwei Tools zu warten und zu synchronisieren, sowie zusätzliche Kosten für das Unternehmen.



Nachdem wir Zeplin verlassen und zu Figma gewechselt waren, hatten wir (die Entwickler) Schmerzen beim Exportieren des UI-Kits aus Figma.



Im Gegensatz zu Zeplin interagiert Figma in keiner Weise mit Xcode oder Android Studio. Plugins verhindern, dass Figma sich eng in sie integriert. Wir haben ein Befehlszeilenprogramm gefunden, das Farben und Textstile exportiert, aber es hat bei uns nicht funktioniert - es hat das Exportieren von Bildern und eines dunklen Themas nicht unterstützt. Deshalb habe ich mein Dienstprogramm geschrieben.



Aber ein bisschen mehr Details zu den Problemen.

Warum ist es für mobile Entwickler unpraktisch, Assets aus Figma zu exportieren?

Problem Nr. 1: Farben können nicht exportiert werden

Was sehen wir - Entwickler, wenn wir das UI-Kit in Figma öffnen? Im einfachsten Fall mehrere Kreise unterschiedlicher Farbe.







Wenn das Projekt jedoch groß ist und ein dunkles Thema unterstützt, enthält die Palette viel mehr Farben:







Figma kann keine Farben exportieren. Sie können höchstens die Farbe auswählen und den HEX-Wert kopieren. Und wenn der Designer etwas ändert, muss der Entwickler bei einer großen Palette viel Zeit aufwenden, um die Palette im Code und in Figma zu vergleichen.



Der Farbname funktioniert auch nicht immer gut zum Kopieren. Einige Designer verwenden das Zeichen "/" im Stilnamen, es wird jedoch in iOS und Android nicht unterstützt. Dieses Symbol wird benötigt, um Farben in Gruppen zu gruppieren.







Beispiel. Die Farbe in Figma heißt Hintergrund / Primär . Für Android-Entwickler müssen Sie eine Farbe namens background_primary und für iOS-Entwickler backgroundPrimary angeben .



Ein weiteres Problem mit Farben ist das dunkle Thema. Mit keinem Designer-Tool (Figma, Zeplin, Sketch) können Sie gleichzeitig eine dunkle und eine helle Palette erstellen. Hier gibt es zwei Ansätze: Erstellen Sie eine separate Datei mit einer dunklen Palette oder speichern Sie alle Farben in einer Datei, benennen Sie sie jedoch mit einem Postfix, z. B. background_primary_day, background_primary_night.



Als Entwickler möchten wir die Farbpalette von Figma direkt in Xcode- oder Android Studio-Projekte exportieren können.

Problem Nr. 2: Unbequemer Export von Symbolen mit Standardwerkzeugen

Hier gibt es auch einige Schwierigkeiten.



Wiederum kommt es vor, dass Designer das Zeichen "/" im Namen von Symbolen verwenden, um Symbole zu gruppieren. Wenn beispielsweise das Symbol mit dem Namen ic / 24 / tab / profile mit den Standardwerkzeugen von Figma exportiert wird, erhalten wir eine solche Verschachtelung.







Es ist unmöglich damit zu arbeiten. Ich muss die Datei umbenennen. Die Datei sollte den Namen ic24TabProfile.pdf haben . Dies ist für iOS-Entwickler.



Für Android-Entwickler ist es üblich, Ressourcen im snake_case- Stil zu benennen . In diesem Fall heißt die Datei ic_24_tab_profile.xml. Aber Figma macht das nicht.



Aus Figma exportierte Symbole müssen manuell in das Projekt übertragen werden. Für iOS-Entwickler reicht es nicht aus, sie nur zu migrieren. Für jedes Symbol muss Folgendes notiert werden : Vektordaten beibehalten, Einzelskala, Als Vorlagenbild rendern.







Als Entwickler möchten wir alle Figma-Symbole direkt in Xcode- oder Android Studio-Projekte exportieren können.

Problem Nr. 3: Unbequemer Export von Abbildungen mit Standardwerkzeugen

Symbole sind kleine Vektorbilder, häufig in Schwarzweiß, und können (vom System oder vom Entwickler) neu eingefärbt und in der Größe geändert werden. Wenn Sie die Barrierefreiheit aktivieren, wachsen einige Symbole mit dem Text. Ihr Hauptproblem sind die Namen: das oben erwähnte Zeichen "/" und die Tatsache, dass iOS-Entwickler camelCase-Namen und Android-Entwickler snake_case verwenden.







Abbildungen sind große Farbbilder, die sich in dunklen und hellen Themen unterscheiden. In einem dunklen Thema sollten die Farben stummgeschaltet sein. Wenn die Abbildung zu hell ist und sich dann von der Dunkelheit abhebt, "trifft" sie mit hellem Licht in den Augen.









Abbildungen haben die gleichen Probleme wie Symbole, es gibt jedoch auch einige neue.



Android-Entwickler exportieren Figma-Symbole und Illustrationen als SVG-Dateien und konvertieren die SVG-Dateien mithilfe der in Android Studio integrierten Tools in vektorzeichnbare XML-Dateien. Wenn Sie 50 Symbole oder Illustrationen exportieren müssen, dauert es lange, bis alle Symbole konvertiert sind. Dies kann automatisiert werden.



iOS-Entwickler exportieren Illustrationen als Bitmaps in drei Maßstäben. Wenn die Anwendung ein dunkles Thema unterstützt, gibt es insgesamt 6 Bilder. So sieht es in einem iOS-Projekt aus:







Stellen wir uns nun vor, wir haben 50 Illustrationen von Figma entladen. Es stellt sich heraus, dass wir 50 * 6 = 300 PNG-Bilder haben, die manuell per Drag & Drop in das Projekt übertragen werden müssen, und dann müssen alle wieder manuell umbenannt werden. Willst du das machen - Nein. Es gibt wichtigere Dinge zu tun ...



Als Entwickler möchten wir alle Figma-Illustrationen direkt in Xcode- oder Android Studio-Projekte exportieren können.

Warum Zeplin nicht half:

• es unterstützt kein dunkles Thema;
• erlaubt nicht, mehrere Farben mit demselben HEX-Wert, sondern unterschiedlichen Namen zu haben: Wenn Sie die Farben entsprechend dem Ort ihrer Anwendung benennen, kann es vorkommen, dass zwei Farben unterschiedliche Namen haben, aber dieselben HEX-Werte. Beispielsweise müssen backgroundPrimaryPressed (Haupthintergrundfarbe beim Drücken) und backgroundSecondary (Hintergrundfarbe) denselben HEX-Wert haben. Zeplin lässt dich das nicht tun. Es gibt eine Problemumgehung: Ändern Sie den HEX-Wert auf den niedrigstmöglichen Wert. Beispiel # F4F5F8 und # F4F5F7;
• erfordert zusätzliche Designerressourcen, um Layouts und UI-Kit mit Figma zu synchronisieren;
• es kostet extra Geld. Figma kostet 12 USD pro Designer und Monat für eine Organisation. Wenn Sie Zeplin kaufen, sind das weitere 10,75 USD pro Designer und Monat.

Wie wir den Export von Vermögenswerten aus Figma automatisiert haben

Als mir klar wurde, dass dies nicht mehr möglich ist, habe ich nachgefragt, ob Figma über eine API- oder Plugin-Erweiterbarkeit verfügt, um den Export zu automatisieren, und es stellte sich heraus, dass dies der Fall ist. Ich hatte zwei Wege: Schreiben Sie ein Figma-Plugin oder verwenden Sie die Figma-API .



Das Figma-Plugin funktioniert direkt in der Figma-App. Mit der Figma-API können Sie ein Konsolendienstprogramm schreiben. Das Plugin kann Informationen aus Figma-Dateien nicht nur lesen, sondern auch ändern. Aus diesem Grund benötigen Figma-Plugins vom Entwickler die Berechtigung zum Bearbeiten der Datei. Die Figma-API kann nur Informationen aus Figma-Dateien lesen.



Das Plugin ist in JavaScript geschrieben. Mit der Figma-API können Sie einen Wrapper um alles schreiben. Das Figma-Plugin kann jedoch nicht mit dem Dateisystem auf dem Computer des Entwicklers (Benutzers) arbeiten. Deshalb habe ich es nicht getan.



Ich bin ein iOS-Entwickler und habe mich daher entschlossen, ein Konsolendienstprogramm in Swift zu erstellen. Ich begann mit einem Prototyp, der eine Farbpalette aus Figma direkt in ein Xcode-Projekt exportieren sollte. In ein paar Wochen war es fertig. Es war etwas. Ich habe mein Dienstprogramm ausgeführt und nach einigen Sekunden habe ich die gesamte Palette in Xcode erhalten. So sollte der ideale Figma-Export funktionieren :)







Nach ein paar Monaten war mein Dienstprogramm zum Exportieren von Assets aus Figma fertig. Einen Link dazu finden Sie am Ende des Artikels.

So funktioniert der Exportvorgang

Farben

Der Entwickler ruft den Befehl auf figma-export colors. Wenn es sich um ein iOS-Projekt handelt, werden die Farben in den Ordner Assets.xcassets exportiert .



Zusätzlich wird eine Color.swift- Datei erstellt, damit Sie Farben direkt aus dem Code verwenden können.

import UIKit
 
 extension UIColor {
    static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
    static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
    static var backgroundVideo: UIColor { return UIColor(named: #function)! }
    ...
 }

Wenn es sich um ein Android-Projekt handelt, werden die Farben in die Werte / Farben.xml und Werte-Nacht / Farben.xml exportiert, wenn das dunkle Thema unterstützt wird.



Werte / Farben.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="button">#7701FF</color>
    <color name="button_ripple">#8A80FF</color>
    <color name="button_disabled">#D9DCE1</color>

    <color name="text_primary">#FFFFFC</color>
    <color name="text_primary_pressed">#A680FE</color>
    <color name="text_primary_disabled">#FFFFFE</color>
    <color name="text_secondary">#101828</color>
    <color name="text_tertiary">#A5ACBD</color>
...

Werte-Nacht / Farben.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="button">#6F01EC</color>
    <color name="button_ripple">#7D6AF0</color>
    <color name="button_disabled">#3F334B</color>

    <color name="text_primary">#E6D9F6</color>
    <color name="text_primary_pressed">#E6D9F3</color>
    <color name="text_primary_disabled">#544761</color>
    <color name="text_secondary">#E6D9F5</color>
    <color name="text_tertiary">#7B6F98</color>
...

Symbole

Der Entwickler ruft den Befehl auf. Wenn es sich um ein iOS-Projekt handelt, werden die Symbole als PDF-Dateien mit dem Parameter Als Vorlagenbild rendern in den Ordner Assets.xcassets exportiert . Wenn in der UITabBar Symbole verwendet werden, können Sie optional Vektordaten beibehalten angeben , um die Barrierefreiheit zu unterstützen. Wenn es sich um ein Android-Projekt handelt, werden die Symbole als Vektor-XML-Dateien in den Zeichenordner exportiert. Unter der Haube konvertiert das Dienstprogramm SVG-Dateien mit dem offiziellen vd-Tool (vector-drawable-tool), das von Android Studio verwendet wird, in XML.figma-export icons.

Abbildungen

Der Entwickler ruft den Befehl auf. Alles ist gleich, nur die Bilder werden als PNG-Dateien exportiert. Wenn es sich um ein Android-Projekt handelt, werden die Illustrationen als Vektor-XML-Dateien in den Ordner drawable und drawable-night exportiert.figma-export images.

Wie der Export konfiguriert werden kann

FigmaExport verfügt über viele Einstellungen, die in einer Konfigurationsdatei gespeichert und beim Start des Dienstprogramms übergeben werden.

./figma-export colors -i figma-export.yaml



Die Konfigurationsdatei enthält Parameter für iOS, Android und allgemeine Parameter. Es enthält auch die Kennung der Figma-Datei, in der sich die Farben, Symbole und Bilder befinden. Die Datei-ID finden Sie in der Adressleiste, wenn Sie sie in einem Browser öffnen.

Hier ist zum Beispiel die Adresse unseres UI-Kits: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit



Die Kennung der lightFileId-Datei in unserem Fall: GVHjNNE8PKKRf1KtnMPY9m



Ein Beispiel für eine Konfigurationsdatei für ein iOS-Projekt:

---
figma:
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
  # Path to the Assets.xcassets directory
  xcassetsPath: "./Resources/Assets.xcassets"
  
  # Parameters for exporting colors
  colors:
    # Should be generate color assets instead of pure swift code 
    useColorAssets: True
    # Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
    assetsFolder: Colors
    # Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
    colorSwift: "./Sources/Presentation/Common/Color.swift"
    # Color name style: camelCase or snake_case
    nameStyle: camelCase

  # Parameters for exporting icons
  icons:
    # Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
    assetsFolder: Icons
    # Icon name style: camelCase or snake_case
    nameStyle: camelCase
    # [optional] Enable Preserve Vector Data for specified icons
    preservesVectorRepresentation:
    - ic24TabMain
    - ic24TabHistory
    - ic24TabProfile

  # Parameters for exporting images
  images:
      # Name of the folder inside Assets.xcassets where to place images (.imageset directories)
      assetsFolder: Illustrations
      # Image name style: camelCase or snake_case
      nameStyle: camelCase

Ein Beispiel für eine Konfigurationsdatei für ein Android-Projekt:

---
figma:
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
  mainRes: "./main/res"

So organisieren Sie eine Figma-Datei für den automatisierten Ressourcenexport

Damit das UI-Kit automatisch entladen wird, müssen die folgenden Regeln beachtet werden.

Allgemeines

• Wenn eine Farbe, Symbol oder Illustration für iOS oder Android in seinen Eigenschaften eindeutig zuzuordnen ist, die Beschreibung Feld sollte enthalten „ios“ oder „Android“ . Wenn eine Farbe, Symbol oder Darstellung nicht für den Export zur Verfügung stehen soll, dann ist ihre Beschreibung Eigenschaft hat „keine“ . So bestimmt FigmaExport, was in ein iOS-Projekt exportiert werden soll, was ein Android-Projekt ist und was überhaupt nicht exportiert werden soll.

Beispiel. Das Freigabesymbol sieht unter iOS und Android anders aus. Die folgenden Screenshots zeigen, dass das ic24ShareIos- Symbol nur in ein iOS-Projekt exportiert wird. ios wird in der Eigenschaft Component description angegeben, und das ic24ShareAndroid- Symbol wird nur in ein Android-Projekt exportiert.

1. 
2. 

• Symbole und Abbildungen sollten Komponenten sein.
• Farbstile und Komponenten müssen in der Teambibliothek veröffentlicht werden.
• Es werden nur Symbole und Illustrationen exportiert, die den Rahmen für Symbole und Illustrationen hinzugefügt wurden.

Beispiele





Figma-Datei mit UI-Kit (helles Thema)





Figma-Datei mit UI-Kit (dunkles Thema)



Ressourcennamen



Farben, Symbole und Abbildungen können als beliebige Namen bezeichnet werden, die die Buchstaben az, AZ und die Symbole "_" und "/" enthalten.



Da Variablennamen im Code kein "/" -Symbol haben dürfen, ersetzt FigmaExport es automatisch durch ein "_" -Symbol. Anschließend wird die resultierende Zeichenfolge in camelCase für iOS oder snake_case für Android konvertiert .







Aus Gründen der Konsistenz und Bequemlichkeit können Sie beispielsweise alle Symbole in Ihrem eigenen Format benennen - ic / size / name . Ein Beispiel ist ic / 24 / open . Und die Illustrationen sind img / group / title . Ein Beispiel ist img / zero / nointernet. Informationen zu Farben finden Sie im Artikel "Anwendungsdesigner: Erstellen und Übertragen eines dunklen Themas" .



In der Konfigurationsdatei figma-export.yaml können Sie reguläre Ausdrücke verwenden, um die Namensüberprüfung vor dem Export zu aktivieren. Wenn eine Ressource den falschen Namen hat, meldet FigmaExport dies.

common:
 colors:
   # RegExp pattern for color name validation before exporting
   nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
 icons:
   # RegExp pattern for icon name validation before exporting
   nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
 images:
   # RegExp pattern for image name validation before exporting
   nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name

Dunkles Thema

Wenn Ihr Projekt ein dunkles Thema unterstützt, müssen Sie eine separate Datei mit UI-Komponenten erstellen, die eine dunkle Farbpalette und dunkle Illustrationen enthält.



Farben

In der Figma-Datei müssen Farben als Farbstile gestaltet und in der Teambibliothek veröffentlicht werden.





Für Entwickler ist es ratsam, eine Tabelle mit allen Farben zu erstellen, aus der hervorgeht, welche Farbe wo verwendet wird.





Symbole

Die Figma-Datei muss einen Rahmen mit dem Namen Symbole haben. Dieser Rahmen sollte Komponenten für jedes Symbol enthalten. Beispiel:





Abbildungen

Die Figma-Datei sollte einen Rahmen mit dem Namen Abbildungen haben, der die Komponenten für jede Abbildung enthält. Beispiel:

Ergebnis

Dank FigmaExport konnten wir viele Probleme bei der Arbeit mit Figma beseitigen. Das Exportieren von Ressourcen dauert jetzt Sekunden. Einige Beispiele, wie die Verwendung des Dienstprogramms unser Leben erleichtert hat.



1. Eines der Projekte hatte 52 Symbole. Der Designer entschied, dass sie alle in den gleichen Stil gebracht werden müssen. Nachdem er sie aktualisiert hatte, mussten wir sie zu Hause aktualisieren.



Wie würden wir sie manuell aktualisieren: Exportieren aller Symbole aus Figma als Zip-Datei, Umbenennen von 52 Dateien, Übertragen der Symbole in das Projekt, Festlegen aller erforderlichen Eigenschaften, Sicherstellen, dass sie nichts vergessen haben. Es würde mindestens eine Stunde dauern.



So haben wir sie von FigmaExport aktualisiert: Wir haben den Befehl figma-export icons ausgeführt .Nach 10 Sekunden wurden alle Änderungen verschärft. Wir haben die Anwendung auf dem Simulator gestartet und festgestellt, dass alle Symbole ersetzt wurden.



2. Bei einem der Sprints haben wir beschlossen, eine neue Funktion zu veröffentlichen. Im UI-Kit fügte der Designer vier neue Symbole hinzu, entfernte zwei alte Symbole und fügte zwei neue Farben hinzu.



Anstatt eine Stunde lang mit dem Designer zu diskutieren, was er im UI-Kit geändert hat, Symbole und Farben manuell zu exportieren, haben wir einfach den Befehl figma-export colours und figma-export icons ausgeführt und über Git gesehen, was entfernt, was hinzugefügt und hinzugefügt wurde was hat sich geändert. Und sie begannen sofort, Layouts mit neuen Symbolen und Farben zu erstellen.



3. Wir haben eine Funktion erstellt, bei der ein erweitertes Onboarding mit 4 Abschnitten erforderlich war, von denen jeder bis zu 7 Seiten mit Bildern enthält.







Der manuelle Export würde lange dauern. Nachdem wir den Befehl figma-export images in weniger als einer Minute ausgeführt haben, haben wir alle diese Bilder im Projekt einsatzbereit.

Wenige Nachteile

• Es ist notwendig, mit dem Designer zu vereinbaren, wie Farben, Symbole und Bilder im UI-Kit gespeichert werden, damit sie automatisch entladen werden können.
• Der Export funktioniert nur für die Komponenten, die der Teambibliothek hinzugefügt wurden. Daher müssen Designer über ein kostenpflichtiges Figma-Abonnement verfügen.

Pläne:

• Hinzufügen der Möglichkeit zum Exportieren von Textstilen,
• Hinzufügen der Möglichkeit zum Exportieren von Bitmap-Bildern für Android,
• SwiftUI-Unterstützung hinzufügen.

Besonderer Dank geht an Artur Abrarov und Katya Rokityan für ihre Hilfe bei der Fertigstellung des UI-Kits.

Utility-Link

Laden Sie FigmaExport auf GitHub herunter .



Ich würde mich freuen, wenn Sie mein Dienstprogramm ausprobieren. Fragen, Wünsche, Feedback - schreiben Sie mir an d.subbotin@redmadrobot.com