Figma Komponenten aus einem Import: eine UnHTML Pro Seite in wiederverwendbare Styles verwandeln

Was Pro beim Import bereits umwandelt

Figma Komponenten aus einem Import zu bekommen ist für den größten Teil einer Seite keine manuelle Aufgabe mehr. Wenn du einen Pro Import ausführst, liest das Plugin das eigene CSS der Seite und überträgt Spacing, Padding, Wrap und Stretch Verhalten in Auto Layout: gap für den Abstand zwischen Objekten, padding für den Raum um sie herum, und eine Richtung für vertikalen, horizontalen oder Grid Fluss. Abschnitte, deren Geometrie sich mit Auto Layout nicht reproduzieren lässt, wechseln von selbst zu absoluter Positionierung, sodass ein Frame, der sich nicht sauber abbilden lässt, nicht kaputt ankommt.

Derselbe Durchlauf erledigt auch zwei Dinge, die Designer sonst von Hand machen. Wiederholter Text, Überschriften, Fließtext, Bildunterschriften, wird zu gemeinsamen Text Styles, sodass das Bearbeiten eines Styles jede Ebene aktualisiert, die ihn verwendet. Und wiederholte visuelle Elemente, Karten, Navigationspunkte, Testimonial Blöcke, werden zu echten Komponenten mit Instanzen und Varianten, nach demselben Modell aus Hauptkomponente und Instanz, das Figma nativ verwendet: Die Hauptkomponente hält die maßgebliche Quelle, und Instanzen sind verknüpfte Kopien, die ihre Aktualisierungen übernehmen.

Pro geht bei diesem zweiten Teil bewusst vorsichtig vor. Würde das Ersetzen eines wiederholten Vorkommens durch eine Instanz dessen Position verschieben oder das von der Seite erfasste Layout verändern, lässt Pro es als einfachen Frame stehen, statt eine Komponente zu erzwingen, die vom Original abweichen würde. Genau diese Lücke behandelt dieser Artikel: herausfinden, was als einfacher Frame zurückblieb, und die Arbeit von Hand fertigstellen.

Falls du den Import noch nicht durchgeführt hast, sieh dir den Import einer React oder Vue Seite in Figma an, den Erfassungsschritt, der all dem vorausgeht.

Es hilft, den Import als zwei Durchläufe statt einem zu betrachten. Den ersten Durchlauf erledigt Pro allein: Er liest die Geometrie, schaut sich an, wie jeder Frame der Seite im CSS aufgebaut war, und bildet das mit gap, padding und einer Richtungseinstellung nach, die Flexbox und Grid Verhalten widerspiegeln. Der zweite Durchlauf, um den es in diesem Artikel geht, dreht sich um Benennung und Wiederverwendung: eine bereits funktionierende Geometrie in Styles und Komponenten zu verwandeln, die ein Team tatsächlich pflegen kann. Überspringst du ihn, bekommst du eine Datei, die am Tag des Imports gut aussieht und danach jeden Tag schwerer zu bearbeiten ist.

Schritt 1: den Import Report prüfen, um zu sehen, was als einfacher Frame zurückblieb

Jeder Pro Import liefert einen Import Report zusammen mit der Datei. Er listet jede Schriftersetzung auf (eine fehlende Schrift, standardmäßig durch Inter ersetzt und protokolliert, damit sich nichts stillschweigend ändert) und markiert, welche wiederholten Abschnitte in Komponenten umgewandelt und welche als einfache Frames belassen wurden.

Öffne zuerst den Report, bevor du das Canvas anfasst. Vergleiche die markierten Abschnitte mit den visuellen Wiederholungen der Seite: Karten Grids, Preisstufen, Testimonial Zeilen, Footer Linkspalten. Das sind die Stellen, an denen am wahrscheinlichsten absichtlich Frames belassen wurden, und auch die Stellen, an denen sich ein manueller Durchgang am schnellsten auszahlt, da das Reparieren einer Kartenvorlage jede Karte aktualisiert, sobald sie eine Instanz wird.

Geh nicht davon aus, dass ein Abschnitt aus Versehen übersprungen wurde. Der Report existiert genau dafür, den Unterschied zwischen "Pro konnte dieses Layout nicht reproduzieren" und "Pro hat es gar nicht erst versucht, weil eine Komponente es verschoben hätte" erkennbar zu machen.

Zwei Listen lohnt es sich festzuhalten, bevor du das Canvas anfasst: Abschnitte, die als absolute Positionierungs Fallbacks markiert sind, und Abschnitte, die trotz Wiederholung als einfache Frames markiert sind. Die erste ist ein Layout Problem, ein Abschnitt, dessen ursprüngliches CSS sich nicht sauber auf Auto Layout abbilden ließ, und ihn zu reparieren kann bedeuten, die Struktur dieses einen Frames von Hand neu aufzubauen. Die zweite ist ein Benennungs und Komponentisierungs Problem: Abschnitte, die bereits korrekt aufgebaut sind und nur noch zu echten Komponenten werden müssen. Die Schritte 2 bis 4 behandeln genau diese zweite Liste. Behandle die erste Liste als separaten, kleineren Durchgang, denn Auto Layout auf einen Frame zu erzwingen, der es wirklich nicht unterstützen kann, erzeugt genau die Art von Abweichung, die Pro von vornherein vermeiden wollte.

Schritt 2: verbleibenden wiederholten Text in Text Styles umwandeln

Für Text, den Pro noch nicht umgewandelt hat, meist einzelne Überschriften oder Text, der sich nicht oft genug wiederholte, um markiert zu werden, kannst du dieselbe Behandlung von Hand anwenden. Wähle eine Textebene aus, öffne den Typografie Bereich in der rechten Seitenleiste und erstelle einen neuen Style. Benenne ihn nach Rolle und Größe (Heading/Large, Body/Default, Caption/Small) statt nach seiner Position auf der Seite. Der Name ist das, was dein Team sieht, wenn es in sechs Monaten einen Style auswählt, nicht die Seite, von der er stammt.

Soll eine Ebene ihr aktuelles Aussehen behalten, ohne an einen gemeinsamen Style gebunden zu sein, entfernt das Lösen (detach) die Verbindung zur Style Definition, behält aber die aktuellen Eigenschaftswerte der Ebene bei. Das ist wichtig, wenn du einen Import selektiv aufräumst: Wende einen Style testweise an, und löse dann genau die eine Ebene, die etwas anders bleiben muss, ohne den Rest zu berühren.

Styles zu erstellen und zu bearbeiten erfordert Bearbeitungszugriff auf einem kostenpflichtigen Figma Plan (Education, Professional, Organization oder Enterprise). Betrachter können einen vorhandenen Style aus einer gemeinsamen Bibliothek anwenden, aber keinen neuen erstellen, gut zu wissen, bevor du die Datei zur Durchsicht weitergibst.

Schritt 3: die Abschnitte komponentisieren, die Pro absichtlich ausgelassen hat

Das ist der Schritt, der die in deiner Prüfung markierten einfachen Frames in echte Komponenten verwandelt. Wähle die Ebenen aus, die einen wiederholten Abschnitt bilden, und wähle Create component; Figma verschachtelt die Auswahl in einem Komponenten Frame, im Ebenen Panel mit dem violetten Komponenten Symbol markiert. Wenn mehrere separate Abschnitte dieselbe Behandlung brauchen, drei Preisstufen, fünf Testimonial Karten, verwandelt die Auswahl aller und Create multiple components jeden davon in einem Durchgang in eine eigene Komponente, statt den Einzelauswahl Ablauf Abschnitt für Abschnitt zu wiederholen.

Behalte Pros Vorsicht dabei im Hinterkopf. Würde das Umwandeln eines bestimmten Vorkommens in eine Instanz dessen Position verschieben, passe entweder den Frame so an, dass die Instanz sauber passt, oder lass dieses eine Vorkommen als Frame und komponentisiere den Rest. Eine Komponente, die nach jeder Verwendung wieder zurechtgerückt werden muss, ist schlechter als ein Frame, der einfach ein Frame bleibt.

Sobald ein Abschnitt eine echte Komponente ist, wird die Hauptkomponente zu dem Ort, an dem du jede zukünftige Änderung vornimmst: Padding ändern, ein Icon austauschen, das Textmuster anpassen, und jede Instanz in der Datei übernimmt es.

Achte auf einen Sonderfall, der bei importierten Seiten oft vorkommt: Abschnitte, die identisch aussehen, aber aus leicht unterschiedlichem zugrunde liegendem Markup gebaut wurden, eine Kartenkomponente mit optionalem Badge etwa, gegenüber einer ohne. Beide ohne Varianten Unterstützung in eine einzige Komponente zu zwingen bedeutet, dass das Badge entweder bei jeder Instanz erscheint oder bei keiner. Genau dafür gibt es Komponenten Varianten. Baue zuerst die Basiskomponente, und füge dann eine Varianten Eigenschaft hinzu (Badge: Yes/No), damit jede Instanz sich auf definierte Weise unterscheiden kann, ohne die Verbindung zur Hauptkomponente zu brechen. Das ist ein zusätzlicher Schritt bei der Erstellung, und er erspart später einen Umbau, wenn die Seite eine dritte Variante hinzufügt, die du nicht eingeplant hattest.

Schritt 4: für die Übergabe organisieren

Bevor du irgendetwas in eine Team Bibliothek veröffentlichst, gruppiere die neuen Text Styles und Komponenten, die du gerade erstellt hast, und gib ihnen eine Namenskonvention, die zu dem passt, was Pro automatisch generiert hat, damit sich die Datei wie ein System liest und nicht wie zwei. Eine komponentisierte, mit Styles versehene Datei gibt einem Team einen schnelleren Bearbeitungszyklus als ein roher Import: ein Ort, um einen wiederholten Abschnitt zu aktualisieren, ein Ort, um eine Typografie Rolle zu aktualisieren, ein Ebenen Panel, das Struktur zeigt statt eines flachen Stapels absolut positionierter Frames.

Das ist auch der Moment, um zu entscheiden, was in der Datei bleibt und was in eine gemeinsame Bibliothek wandert, da der Zugriff auf die Bibliothek derselben Bearbeitungsregel folgt wie das Erstellen von Styles und Komponenten überhaupt. Wenn dein Team für andere Arbeit bereits eine Komponenten Bibliothek hat, ist das meist der Moment, die neuen dort einzugliedern, statt den Import zu einer eigenen Insel werden zu lassen.

Der UnHTML Pro Konvertierungsdurchlauf bringt den größten Teil einer Seite automatisch bis zu diesem Punkt. Was übrig bleibt, meist eine Handvoll Abschnitte, die der Import bewusst zurückhaltend behandelt hat, ist ein kurzer, mechanischer Durchgang, kein Redesign.

Fazit

Ein Pro Import liefert dir bereits Auto Layout, Text Styles und Komponenten für den größten Teil einer Seite. Die CSS zu Auto Layout Abbildung und der Komponentisierungsdurchlauf laufen beide automatisch, und der Import Report zeigt dir genau, wo sie aufgehört haben. Diesen Report zu prüfen, die Text Styles für verbliebenen Text fertigzustellen, und die Abschnitte zu komponentisieren, die Pro absichtlich als Frames belassen hat, macht aus der Datei mehr als eine originalgetreue Erfassung, nämlich etwas, mit dem dein Team wirklich arbeiten kann. Wiederhole denselben kurzen Durchgang jedes Mal, wenn du eine Seite erneut importierst, die sich verändert hat.