Principle ist ein Interaktionsdesign-Tool, mit dem du deine digitalen Designs und Prototypen zum Leben erwecken kannst.

Darin stehen dir eine ganze Reihe von Interaktionen zur Verfügung, vom Scrollen oder Wischen über die Verwaltung mehrerer Status bis hin zur Erstellung benutzerdefinierter Animationen und raffinierter Übergänge. Hier kannst du mehr über Principle erfahren.

Nachdem du Figma mit deinem Principle-Konto verbunden hast, kannst du deine Entwürfe problemlos aus Figma importieren und mit der Erstellung komplexer Animationen beginnen.

Mit Figma und Principle wirken deine Entwürfe gleich noch professioneller.

In diesem Artikel erklären wir dir folgende Dinge:

1. Figma und Principle verbinden
2. Importieren eines Entwurfs aus Figma
3. Trennen deines Figma-Kontos von Principle

Figma und Principle verbinden

Du musst jeweils ein Konto bei Figma und Principle erstellen, um die beiden miteinander zu verbinden. Principle ist derzeit nur auf macOS verfügbar.

Wenn du zum ersten Mal ein Design aus Figma importierst, wirst du aufgefordert, deine Figma-Kontodaten einzugeben, um die Verbindung zu autorisieren. Dies geschieht nur, wenn du das erste Mal die Option Import from Figma (Aus Figma importieren) verwendest.

1. Öffne Principle.
2. Navigiere im Hauptmenü zu File (Datei) und wähle Import from Figma (Aus Figma importieren):
3. Du kannst auch auf die Schaltfläche Import klicken:
4. Wähle aus den Optionen Figma:
5. Klicke auf die Schaltfläche Connect to Figma (Mit Figma verbinden):
6. Daraufhin öffnet sich ein Browserfenster. Wenn du nicht angemeldet bist, wirst du aufgefordert, dich bei deinem Figma-Konto anzumelden:
7. Klicke zur Bestätigung auf Allow access (Zugriff erlauben):
8. Du wirst dann in einem Dialogfeld aufgefordert, zu Principle zurückzukehren:

   Hinweis: Wenn du nicht direkt zu Principle weitergeleitet wirst, kannst du das Autorisierungsfenster schließen und zu Principle zurückkehren. Auch wenn es nicht so aussieht, ist die Verbindung nun erfolgreich hergestellt.

Importieren eines Entwurfs aus Figma

Jetzt, da die beiden Anwendungen miteinander verbunden sind, kannst du deine Designs direkt in Principle importieren. Hinweis: Es ist nicht möglich, eine Datei aus Figma zu Principle zu exportieren.

Du kannst alle Rahmen einer Seite oder eine Auswahl von Rahmen in eine Datei importieren.

1. Öffne Principle.
2. Navigiere im Hauptmenü zu File (Datei) und wähle Import from Figma (Aus Figma importieren):
3. Du kannst auch auf auf die Schaltfläche Import klicken:
4. Wähle aus den Optionen Figma:
5. Du kannst dann ein Dokument aus dem dafür vorgesehenen Feld auswählen. Daraufhin werden alle kürzlich bearbeiteten Dateien angezeigt.
   
   

   Hinweis: Dateien, die Multiplayer verwendet haben (z. B. Dateien, bei denen mehrere Editor*innen zusammenarbeiten), werden in den Vorschlägen für die kürzlich bearbeiteten Dateien zuerst angezeigt.

   

6. Klicke auf Import Page (Seite importieren), um alle Rahmen der Seite zu importieren.
7. Du kannst auch auf Import Selected Frames (Ausgewählte Rahmen importieren) klicken, um alle Rahmen zu importieren, die derzeit in Figma ausgewählt sind.
   
   

   Hinweis: Jetzt kannst du auch zu Figma wechseln und bestimmte Rahmen auswählen, die du importieren möchtest. Dadurch wird die Auswahl in Principle aktualisiert.

8. Eine Statusmeldung zeigt an, dass die Ebenen gerade von Figma gerendert werden:
9. Die Rahmen werden in Principle dann deiner Zeichenfläche hinzugefügt:
10. Jedes Objekt wird als einzelne Ebene gerendert, genau wie in Figma. Du kannst einzelne Objekte entweder im Ebenen-Tab auf der linken Seite oder direkt in der Arbeitsfläche auswählen:

Trennen deines Figma-Kontos

Wenn du das mit deinem Principle-Konto verknüpfte Figma-Konto ändern oder die beiden Konten vollständig trennen möchtest, kannst du das in Principle tun.

1. Klicke auf das Principle-Menü in der Apple Menüleiste.
2. Wähle aus den Optionen Disconnect from Figma (Verbindung mit Figma trennen):
3. Du kannst dann den Importvorgang erneut starten, um die Verbindung erneut herzustellen oder Principle mit einem anderen Konto zu verbinden.

Arbeiten mit Schatten in Figma und Principle

Schlagschatten und innere Schatten verhalten sich in Figma und Principle unterschiedlich. Figma rendert Schatten basierend auf der Position des Objekts auf der Arbeitsfläche, während Principle den Schatten basierend auf dem Objekt selbst darstellt.

Das bedeutet, dass die Drehung eines Objekts in Principle auch die Position des Objektschattens dreht (und diese nicht wie in Figma gleich bleibt).