Im datenwerk haben wir lange Zeit das Programm Adobe XD für UI Design verwendet. Jetzt wechseln wir zu Figma, da viele unsere Kund:innen uns Figma Dateien schicken und die Nutzung des Tools stetig steigt. Da ich bisher kaum mit Figma gearbeitet habe, musste ich viel im Internet recherchieren. Ich habe mich in den vergangenen Wochen intensiv mit dem Programm auseinandergesetzt und viel Neues gelernt.
In diesem Artikel erkläre ich dir, wie du am besten von XD auf Figma umsteigen kannst und die Unterschiede zwischen Gruppen und Frames. Das hier ist der erste Teil meiner Figma Best Practices -Reihe. Bevor wir so richtig beginnen, beantworte ich dir die Frage:
Was ist Figma?
Figma ist ein browserbasiertes Grafikdesign-Tool, das hauptsächlich für das UI/UX-Design und das Prototyping verwendet wird. Es ermöglicht Designer:innen, in Echtzeit zusammenzuarbeiten, da es Cloud-basiert ist. Nutzer:innen können damit Benutzeroberflächen für Software und Websites entwerfen und interaktive Prototypen erstellen. Figma bietet eine Vielzahl von Funktionen wie Vektor-Tools, Code-Export und umfangreiche Plug-in-Unterstützung, die den Designprozess effizienter machen.
Figma Community
Die Figma Community ist eine Plattform, auf der Designer:innen ihre Kreationen wie UI-Kits, Vorlagen, Icons und andere Design-Ressourcen teilen können. Nutzer:innen können diese Ressourcen durchsuchen, sie zu ihren eigenen Projekten hinzufügen und ihre eigenen Designs zur Community beisteuern. Diese Plattform fördert die Zusammenarbeit und den Austausch innerhalb der Design-Community.
XD nach Figma übertragen
Es gibt mehrere Methoden, eure Design-Dateien zu übertragen. Derzeit gibt es kein einsatzbereites XD-Plug-in, das alle Designs perfekt nach Figma exportiert. Unabhängig von der Methode, die du wählst, ist es ohnehin notwendig nochmals manuell darüber zu arbeiten.
Aber keine Sorge, ich zähle die Schritte auf, die du machen solltest, damit der Übergang reibungslos funktioniert. Als allererstes beginnen wir unser Designsystem zu übertragen. Denn das ist der wichtigste Bestandteil in unserem Projekt.
SVG-Methode
Der erste Weg, den ich dir vorstelle, ist die Designs als SVG-Code zu kopieren. Das heißt, du kopierst den Code der Designelemente und fügst diese ganz easy in Figma ein. Beachte, dass diese Methode besonders nützlich für Grafiken, Icons und Muster ist. Es ist einfacher und zuverlässiger, Ebenen wie Text und Formen von Grund auf neu zu erstellen.
Es gibt zwei Optionen, den SVG-Code zu kopieren:
Die erste Beschreibung kommt von Figma selbst, wie man Assets von XD kopiert:
- Wähle das Element in XD aus, das du kopieren möchtest.
- Gehe zu „Datei > Exportieren > Aktuell auf Zeichenfläche ausgewählte ⌘ + E oder Strg+ E“ > SVG auswählen > Exportieren.
- Öffne deine Figma-Datei.
- Füge die SVGs in die Zeichenfläche ein (Drag-and-drop).
Die zweite Option ist:
- Wähle die Zeichenfläche / das Element in XD aus, das du kopieren möchtest.
- Gehe zu „Bearbeiten oder rechts Klick > SVG-Code kopieren“.
- Öffne deine Figma-Datei.
- Füge die Ebenen oder SVGs in die Zeichenfläche ein (Strg+V oder ⌘ + V).
Anmerkung: Solltest du versuchen, alle deine Zeichenflächen auf einmal von XD nach Figma mit dieser Methode zu kopieren und einzufügen, was eigentlich technisch möglich ist, erkennt Figma nicht automatisch, was diese SVGs sind, daher passieren komische Dinge: zum Beispiel werden die Größen der Textfelder geändert oder man verliert einige Ebenenmasken. Nach der Konvertierung musst du viel manuelle Arbeit investieren, um Anpassungen vorzunehmen.
Achtung: Viele in der Figma Community haben die SVG-Methode erwähnt, wenn jemand die Frage stellte, wie sie am besten ihre XD Dateien nach Figma exportieren können.
Der Nutzer Miti_Abulaiti merkte an, dass beim Kopieren von SVGs Vorsicht geboten ist, da dies das Design beeinträchtigen kann.
„It works 60%, but the page design will be ruined anyway. Please beware: you will lose all the images you used in the design, your type attributes will not remain as they were in XD, and effects, transparencies, and overlays will be gone." - Miti_Abulaiti
Plug-in „Convertify“
Convertify ist ein Figma-Plug-in zum Konvertieren von Designs aus verschiedenen Designtools, wie Sketch und Adobe Illustrator. Sie bieten sowohl kostenlose als auch kostenpflichtige Versionen an. Die XD-Importfunktion ist noch in der Beta-Version – mehr dazu erfährst du in diesem Video.
Ich habe einige unsere Kund:innenprojekte mit dem Plug-in konvertiert. Dafür habe ich die Datei von der Cloud heruntergeladen und in Convertify hochgeladen. Die Konvertierung von Frames, Styles, Bilder usw. hat etwas gedauert. Im Vergleich dazu nimmt die manuelle Erstellung viel mehr Zeit in Anspruch und das Plug-in hat mir viel Arbeit weggenommen.
Nun stellt sich die Frage, wie ist das Endergebnis? Ich bin sehr zufrieden mit dem Ergebnis. Denn ich hatte alle Komponenten unter Assets und musste diese nicht neu erstellen. Außerdem habe ich alle Textstyles und Farben unter Local styles gefunden. Alle Zeichenflächen werden automatisch auf Frames geändert und alle Dateinamen werden automatisch übernommen.
Gruppen vs. Frames
Als ich von Adobe XD zu Figma wechselte, stand ich zunächst vor einer kleinen Herausforderung: Ich konnte den Unterschied zwischen Gruppen und Frames nicht sofort erkennen, da ein solches Konzept in Adobe XD nicht in der gleichen Weise existiert. Dies führte anfangs zu einiger Verwirrung. Ich erkläre dir die Unterschiede zwischen Gruppen und Frames und wie diese beiden Funktionen in Figma genutzt werden können, um effizientere und strukturierte Designs zu erstellen.
Gruppen
In Figma, wie in vielen anderen Designprogrammen, kannst du mehrere Elemente zu einer Gruppe zusammenfassen. Das bedeutet, dass du sie als eine einzige Ebene bearbeiten kannst. Die Größe der Gruppe passt sich automatisch an die Größe und Position ihrer Elemente an. Eine Gruppe erstellst du, indem du die gewünschten Objekte auswählst und dann auf deinem Mac ⌘ + G oder auf Windows Strg + G drückst.
Gruppen sind besonders nützlich, wenn du ähnliche Elemente zusammenhalten möchtest, ohne viele einzelne Ebenen verwalten zu müssen. Stell dir vor, du möchtest verschiedene Firmenlogos zusammenhalten. Indem du sie gruppierst, fasst du sie zu einer leichten handhabbaren Ebene zusammen. Ein Klick auf ein Element der Gruppe wählt die gesamte Gruppe aus, so kannst du sie als ein Objekt verschieben oder bearbeiten. Möchtest du ein spezifisches Element innerhalb einer Gruppe auswählen, kannst du einfach darauf doppelklicken.
Gruppierung aufheben
Das Praktische an Gruppen ist, dass sie flexibel bleiben. Das Zusammenfügen der Elemente ist nicht endgültig, also keine Sorge – du kannst die Gruppierung jederzeit rückgängig machen. Auf einem Mac machst du das mit ⌘ + Shift + G und auf Windows mit Strg + Shift + G.
Skalierung einer Gruppe
Wenn du eine Gruppe skalierst, skalieren sich die darin enthaltenen Elemente, wie du es von Vektorgrafiken erwartest. Allerdings skalieren sich Effekte, Striche und Schriftgrößen nicht mit. Wenn du auch diese Eigenschaften skalieren möchtest, solltest du das Skalierungswerkzeug (K) verwenden. Wenn du festlegen möchtest, wie sich Elemente beim Skalieren verhalten sollen, könnte es sinnvoller sein, anstelle einer Gruppe, einen Frame zu verwenden. Constraints, die du an Elementen anbringst, beziehen sich immer auf den nächstgelegenen übergeordneten Frame, nicht auf die Grenzen der Gruppe.
Quick-tip: Innerhalb einer Gruppe kannst du auch die Abstände zwischen den Elementen leicht anpassen, indem du die Funktion „Smart Selections“ (intelligente Auswahl) nutzt. Wenn du die Abstände änderst, passt sich die Gesamtgröße der Gruppe automatisch an.
Frames
In Figma ist das, was du vielleicht als „Zeichenfläche“ in anderen Programmen kennst, ein „Frame“ (deutsch Rahmen). Rahmen sind super wichtig, weil du damit deinen Design-Projekten eine Struktur geben kannst. Du kannst sie nutzen, um Prototypen wie den Bildschirm eines Handys darzustellen, oder auch kleinere Teile deines Designs zu organisieren. Du kannst Frames ineinander stecken, was hilft, dynamische Layouts zu erstellen.
Es gibt drei Methoden, um einen Frame zu erstellen:
Wähle das Framewerkzeug (F) und suche dir eine vorgegebene Größe für Geräte aus dem Menü auf der rechten Seite. So erscheint ein Frame in genau dieser Größe auf deiner Arbeitsfläche.
Wenn du das Framewerkzeug schon ausgewählt hast, klicke einfach auf die Arbeitsfläche und zieh die Maus, um den Frame in der Größe zu erstellen, die du brauchst.
Du kannst auch Elemente, die du schon auf deiner Arbeitsfläche hast, in einen Frame packen. Das machst du, indem du sie auswählst und dann ⌘ + Opt + G (auf einem Mac) oder Strg + Alt + G (auf einem Windows-Computer) drückst.
Rahmen entfernen
Falls du mal einen Rahmen entfernen möchtest, kannst du das machen, indem du denselben Tastenbefehl benutzt wie, wenn du eine Gruppe von Elementen auflöst: ⌘ + Shift + G (Mac) oder Strg + Shift + G (Windows).
Skalierung von Frames
Die Größe von Rahmen wird unabhängig von ihren untergeordneten Elementen festgelegt. Wenn du untergeordnete Elemente innerhalb eines Rahmens neu positionierst oder skalierst, passen sich die Grenzen nicht automatisch an. Wenn du möchtest, dass sich die Abmessungen des Rahmens den Inhalten anpassen, kannst du im Designbereich auf der rechten Seite auf den Button „Resize to Fit“ oder ⌥ + Shift + ⌘ + R (Mac) / Alt + Shift Control + R (Windows) klicken.
Quick-tip: In Figma verhalten sich Komponenten genauso wie Frames. Du kannst einen Frame zu einer Komponente machen, um ihn woanders wiederzuverwenden. Wenn du eine bereits vorhandene Komponente entfernst, wird sie zu einem Frame zurückverwandelt.
Skalieren mit Constraints
Rahmen und Gruppen verhalten sich beim Skalieren unterschiedlich. Wie bereits erwähnt, skalieren Gruppen wie Vektoren. Bei einem Frame jedoch verändert sich das Skalierungsverhältnis unabhängig von den Dingen, die darin sind. Du kannst aber Constraints festlegen, die bestimmen, wie sich die Inhalte im Frame verändern, wenn du den Frame anpasst. Normalerweise sind diese Constraints auf „Oben“ und „Links“ eingestellt.
Es ist echt praktisch, eigene Constraints zu setzen, besonders wenn du willst, dass alles im Frame seine Größe und Position behält, auch wenn sich der Frame selbst ändert. Das ist besonders wichtig, wenn du für verschiedene Bildschirmgrößen designst. In diesem Video von Figma werden die Unterschiede zwischen Gruppen, Frames und Frames mit Constraints gezeigt.
Quick-tip: Wenn du beim Vergrößern oder Verkleinern eines Frames deine Constraints ignorieren möchtest, halte ⌘ (Mac) oder Strg (Windows) gedrückt, während du den Frame ziehst.
Psssst…Im nächsten Best Practices Figma Artikel gebe ich dir noch mehr neue spannende Tipps über den Workflow mit Constraints. Also bleib gespannt!
Fazit
Du kannst Gruppen und Frames auf viele Arten verwenden (gemeinsam oder separat), um unterschiedliche Verhaltensweisen zu erreichen. Hier noch einmal zusammengefasst:
Verwende eine Gruppe, wenn:
- du mehrere Objekte zu einer einzigen, handhabbaren Ebene zusammenfügen möchtest.
- du Elemente gruppieren möchtest, die beim Skalieren eine feste Beziehung beibehalten sollen (z. B. ein Logo oder Symbol, das aus mehreren Formen besteht).
- du möchtest, dass sich die Grenzen der Gruppe automatisch an die untergeordneten Objekte anpassen, wenn du sie bearbeitest.
Verwende einen Frame, wenn:
- du die Framegröße unabhängig von seinem Inhalt steuern möchtest.
- du das Skalierungsverhalten von untergeordneten Elementen definieren möchtest.
- du möchtest, dass Objekte durch die Framegrenzen beschnitten werden oder außerhalb dieser Grenzen liegen.
- du verschachteltes Scrollen in deinem Prototyp möchtest (z. B. ein horizontales Karussell oder eine Karte, die du vertikal und horizontal verschieben kannst).
