Aus Figma importieren

Der Import läuft in die Gegenrichtung zum Export: Ein vorhandener Figma-Frame wird zu einem bearbeitbaren UXMagic-Screen, an dem du dann mit KI weiterarbeiten kannst.

Schritte#

1. Verbinde Figma unter Integrationen (eine OAuth-Verbindung — du autorisierst UXMagic einmal).
2. Füg die URL des Figma-Frames ein oder wähl Datei und Frame in der Auswahl.
3. Entscheide, ob die eigenen Stile des Frames dein Projekt-Theme werden sollen oder ob er auf das vorhandene Theme abgebildet wird.
4. Importieren.

Was übernommen wird#

• Layout und Hierarchie, inklusive Auto-Layout-Struktur.
• Text, mit seinen Textstilen.
• Farben und Effekte, inklusive Verläufen und Schatten.
• Bilder, kopiert in die Assets deines Projekts.
• Vektoren und Icons, als Markup nachgebaut.

Was du erwarten kannst#

Figma ist ein Vektor-Canvas und das Web ein Box-Modell, deshalb ist der Import eine getreue Übersetzung, keine bytegleiche Kopie. Erwarte sehr nahe Struktur und Abstände, mit kleinen Unterschieden beim Textumbruch und bei Effekten ohne direkte Entsprechung im Web.

Importe sind am genauesten, wenn der Figma-Frame Auto-Layout nutzt. Absolut positionierte freie Layouts werden importiert, aber mit geringerer struktureller Treue.

Die richtige URL#

Wähl den Frame in Figma aus und dann Rechtsklick → Link zur Auswahl kopieren. Ein Link zur Datei ohne ausgewählten Knoten importiert das Falsche oder gar nichts.

Nach dem Import#

Der importierte Screen verhält sich wie jeder andere: Chat-Änderungen, Bearbeitungsmodus, Themes, Versionen, Export. Das ist der schnellste Weg für „wir haben schon Designs, wollen aber jetzt schneller werden“.

Designsysteme und Komponentenbibliotheken#

Du kannst auch eine Komponentenbibliothek oder ein Designsystem importieren, damit generierte Screens deine Komponenten nutzen. Siehe Komponentenbibliotheken.