Design and code

What it is for. Building an app to match a design you made in Figma. Setherion renders the frame, reads its layout, colours, type and spacing, and builds from that.

Connect. Press Connect Figma on the Connectors page, sign in at Figma and come back. There are no keys to copy. The access is read only: Setherion can never change your files. It is used while you build and is never part of the app you publish. Figma shows no usage charges from Setherion.

Use it. In the editor press +, then Design, then Import from Figma. On the dashboard it is under +, in Import a design where Canva is offered too. In Figma, right-click the frame you want and choose Copy link to selection, paste the link, and press Import frame. The frame is attached to your message together with a description of it and its exact colours, fonts and spacing, and the app is rebuilt to match.

Ask. "Rebuild the home page to match this frame." "Use the colours and fonts from my Figma design."

Good to know. The link has to point at a design, like figma.com/design/KEY?node-id=1-234. The address bar of your list of files is not one, and the importer says so. If a link is refused, the connected Figma account has to be able to open that file. If Figma stops accepting the connection, the import tells you to connect again.

What it is for. Bringing a Canva design (a menu, a flyer, a banner) into an app as pictures to place. They are artwork to put on a page, not a layout to rebuild.

Connect. Press Connect Canva, sign in at Canva and come back. There are no keys to copy. Setherion reads your designs and exports them only when you import one, and nothing in Canva is changed.

Import from Canva. In the editor press +, then Design, then Import from Canva. On the dashboard it is under +, then Import a design. Open the design in Canva, copy the address from the browser (it has /design/ in it, and a short canva.link address will not do), paste it and press Import design. The design has to be one of yours or shared with you.

Ask. "Put the menu I just imported on the Menu page." "Use the banner as the hero of the home page."

Limits.

• The first three pages of the design arrive, as images, in the chat.
• They are exported once, while you build, and then hosted with the app's other pictures. Canva's own export links stop working after a day, which is why an app never asks Canva while it runs.
• Canva Free cannot enlarge a design much past its own size. When Canva refuses a large export, Setherion asks again at the design's own size.
• Canva limits how many exports one person can make in a few minutes. If it says so, wait and try again.

What it is for. Taking your code with you, and bringing code in. Export puts the app in a repository of yours as a normal Vite and React project. Import rebuilds an app you already have in a repository.

Connect. Press Connect GitHub, sign in and approve, or use Connect GitHub inside the export window. The access is used when you ask it to push, and is never part of the app you publish. It covers private repositories too.

Export. Open the Publish menu in the editor and choose Export to GitHub. Name the repository, choose whether it is Private repository (the default), and press the button. If the repository does not exist, it is made. Export again at any time to update it with the latest changes.

Import. On the dashboard, press +, then Import an app, then GitHub. Connect GitHub there to see your own repositories, private ones included, or paste the address of a public one. Any web app works: React, Next.js, Vue or plain HTML. The reading looks at what the app does, not at how it was built. Secret files and keys are left out. See Import an app.

Limits. Exporting is part of the paid plans: on Free the button asks you to upgrade. Importing costs a new app plus the reading of the code, and your first import is free: see Plans and credits. The records in a database do not come over from an import, only its structure.

Good to know. Export is a button in Publish, not a request you type in the chat.

What it is for. The same as GitHub's export, for GitLab: your code in a repository of yours.

Connect. Press Connect GitLab, sign in and approve, or use Connect GitLab inside the export window. It is used when you push and never becomes part of an app you publish.

Export. Open the Publish menu in the editor and choose Export to GitLab. Name the repository, choose Private repository (the default) or not, and press Export to GitLab. Export again to update it. It is a runnable Vite and React project.

Limits. Exporting is part of the paid plans, as for GitHub. GitLab does not have an import: to bring an app in from a GitLab project, download it as a ZIP and use the ZIP import in Import an app.