Design und Code

Wofür es da ist. Eine App passend zu einem Design zu erstellen, das Sie in Figma gemacht haben. Setherion rendert den Frame, liest sein Layout, seine Farben, Schriften und Abstände und erstellt danach.

Verbinden. Klicken Sie auf der Seite Connectors auf Connect Figma, melden Sie sich bei Figma an und kommen Sie zurück. Es gibt keine Schlüssel zu kopieren. Der Zugriff ist nur lesend: Setherion kann Ihre Dateien nie ändern. Er wird beim Erstellen genutzt und ist nie Teil der App, die Sie veröffentlichen. Figma zeigt keine Nutzungskosten von Setherion.

Nutzen. Klicken Sie im Editor auf +, dann auf Design, dann auf Import from Figma. Im Dashboard finden Sie es unter +, in Import a design, wo auch Canva angeboten wird. Klicken Sie in Figma mit der rechten Maustaste auf den gewünschten Frame und wählen Sie Copy link to selection, fügen Sie den Link ein und klicken Sie auf Import frame. Der Frame wird Ihrer Nachricht angehängt, zusammen mit einer Beschreibung und seinen genauen Farben, Schriften und Abständen, und die App wird passend dazu neu erstellt.

Fragen. „Rebuild the home page to match this frame.“ „Use the colours and fonts from my Figma design.“

Gut zu wissen. Der Link muss auf ein Design zeigen, etwa figma.com/design/KEY?node-id=1-234. Die Adressleiste Ihrer Dateiliste ist keiner, und der Import sagt das. Wird ein Link abgelehnt, muss das verbundene Figma-Konto die Datei öffnen können. Wenn Figma die Verbindung nicht mehr annimmt, sagt der Import, dass Sie sich erneut verbinden sollen.

Wofür es da ist. Ein Canva-Design (eine Speisekarte, einen Flyer, ein Banner) als Bilder in eine App zu holen, die Sie platzieren. Sie sind Grafiken, die auf eine Seite kommen, kein Layout, das neu erstellt wird.

Verbinden. Klicken Sie auf Connect Canva, melden Sie sich bei Canva an und kommen Sie zurück. Es gibt keine Schlüssel zu kopieren. Setherion liest Ihre Designs und exportiert sie nur, wenn Sie eines importieren, und in Canva wird nichts geändert.

Aus Canva importieren. Klicken Sie im Editor auf +, dann auf Design, dann auf Import from Canva. Im Dashboard finden Sie es unter +, dann Import a design. Öffnen Sie das Design in Canva, kopieren Sie die Adresse aus dem Browser (sie enthält /design/, und eine kurze canva.link-Adresse genügt nicht), fügen Sie sie ein und klicken Sie auf Import design. Das Design muss eines von Ihnen sein oder mit Ihnen geteilt.

Fragen. „Put the menu I just imported on the Menu page.“ „Use the banner as the hero of the home page.“

Grenzen.

• Die ersten drei Seiten des Designs kommen als Bilder im Chat an.
• Sie werden einmal exportiert, während Sie erstellen, und dann zusammen mit den anderen Bildern der App gehostet. Die eigenen Export-Links von Canva funktionieren nach einem Tag nicht mehr, deshalb fragt eine App Canva nie, während sie läuft.
• Canva Free kann ein Design kaum über seine eigene Größe hinaus vergrößern. Lehnt Canva einen großen Export ab, fragt Setherion erneut in der eigenen Größe des Designs.
• Canva begrenzt, wie viele Exporte eine Person in wenigen Minuten machen kann. Sagt es das, warten Sie und versuchen Sie es erneut.

Wofür es da ist. Ihren Code mitzunehmen und Code hereinzuholen. Der Export legt die App als normales Vite- und React-Projekt in einem Repository von Ihnen ab. Der Import erstellt eine App neu, die Sie bereits in einem Repository haben.

Verbinden. Klicken Sie auf Connect GitHub, melden Sie sich an und bestätigen Sie, oder nutzen Sie Connect GitHub im Export-Fenster. Der Zugriff wird genutzt, wenn Sie das Hochladen verlangen, und ist nie Teil der App, die Sie veröffentlichen. Er umfasst auch private Repositories.

Exportieren. Öffnen Sie im Editor das Menü Publish und wählen Sie Export to GitHub. Benennen Sie das Repository, wählen Sie, ob es Private repository ist (die Vorgabe), und klicken Sie auf die Schaltfläche. Existiert das Repository nicht, wird es angelegt. Exportieren Sie jederzeit erneut, um es mit den neuesten Änderungen zu aktualisieren.

Importieren. Klicken Sie im Dashboard auf +, dann auf Import an app, dann auf GitHub. Verbinden Sie dort GitHub, um Ihre eigenen Repositories zu sehen, auch private, oder fügen Sie die Adresse eines öffentlichen ein. Jede Web-App funktioniert: React, Next.js, Vue oder reines HTML. Das Einlesen betrachtet, was die App tut, nicht, wie sie gebaut wurde. Geheime Dateien und Schlüssel bleiben außen vor. Siehe Eine App importieren.

Grenzen. Das Exportieren gehört zu den kostenpflichtigen Tarifen: Im Tarif Free bittet die Schaltfläche Sie um ein Upgrade. Das Importieren kostet eine neue App plus das Einlesen des Codes, und Ihr erster Import ist kostenlos: siehe Tarife und Credits. Die Datensätze einer Datenbank kommen bei einem Import nicht mit, nur ihre Struktur.

Gut zu wissen. Der Export ist eine Schaltfläche in Publish, keine Anfrage, die Sie im Chat tippen.

Wofür es da ist. Dasselbe wie der Export von GitHub, für GitLab: Ihr Code in einem Repository von Ihnen.

Verbinden. Klicken Sie auf Connect GitLab, melden Sie sich an und bestätigen Sie, oder nutzen Sie Connect GitLab im Export-Fenster. Es wird genutzt, wenn Sie hochladen, und wird nie Teil einer App, die Sie veröffentlichen.

Exportieren. Öffnen Sie im Editor das Menü Publish und wählen Sie Export to GitLab. Benennen Sie das Repository, wählen Sie Private repository (die Vorgabe) oder nicht, und klicken Sie auf Export to GitLab. Exportieren Sie erneut, um es zu aktualisieren. Es ist ein lauffähiges Vite- und React-Projekt.

Grenzen. Das Exportieren gehört zu den kostenpflichtigen Tarifen, wie bei GitHub. GitLab hat keinen Import: Um eine App aus einem GitLab-Projekt hereinzuholen, laden Sie sie als ZIP herunter und nutzen den ZIP-Import unter Eine App importieren.