Design e codice

A cosa serve. Creare un’app in base a un design che hai fatto in Figma. Setherion genera l’immagine del frame, ne legge layout, colori, caratteri e spaziature, e crea a partire da lì.

Collega. Clicca su Connect Figma nella pagina Connectors, accedi a Figma e torna indietro. Non ci sono chiavi da copiare. L’accesso è di sola lettura: Setherion non può mai cambiare i tuoi file. Si usa mentre crei e non fa mai parte dell’app che pubblichi. Figma non mostra nessun addebito di consumo da parte di Setherion.

Usalo. Nell’editor clicca su +, poi Design, poi Import from Figma. Nella dashboard è sotto +, in Import a design, dove è offerto anche Canva. In Figma, fai clic con il tasto destro sul frame che vuoi e scegli Copy link to selection, incolla il link e clicca su Import frame. Il frame viene allegato al tuo messaggio insieme a una sua descrizione e ai suoi colori, caratteri e spaziature esatti, e l’app viene ricreata in base a esso.

Chiedi. “Ricrea la home page in base a questo frame.” “Usa i colori e i caratteri del mio design di Figma.”

Da sapere. Il link deve puntare a un design, come figma.com/design/KEY?node-id=1-234. La barra degli indirizzi dell’elenco dei tuoi file non lo è, e l’importatore te lo dice. Se un link viene rifiutato, l’account Figma collegato deve poter aprire quel file. Se Figma smette di accettare la connessione, l’importazione ti dice di collegarti di nuovo.

A cosa serve. Portare un design di Canva (un menu, un volantino, un banner) in un’app come immagini da collocare. Sono illustrazioni da mettere su una pagina, non un layout da ricreare.

Collega. Clicca su Connect Canva, accedi a Canva e torna indietro. Non ci sono chiavi da copiare. Setherion legge i tuoi design e li esporta solo quando ne importi uno, e nulla in Canva viene cambiato.

Importa da Canva. Nell’editor clicca su +, poi Design, poi Import from Canva. Nella dashboard è sotto +, poi Import a design. Apri il design in Canva, copia l’indirizzo dal browser (contiene /design/, e un indirizzo breve canva.link non va bene), incollalo e clicca su Import design. Il design deve essere tuo o condiviso con te.

Chiedi. “Metti il menu che ho appena importato nella pagina Menu.” “Usa il banner come hero della home page.”

Limiti.

• Le prime tre pagine del design arrivano, come immagini, nella chat.
• Vengono esportate una volta, mentre crei, e poi ospitate insieme alle altre immagini dell’app. I link di esportazione di Canva smettono di funzionare dopo un giorno, ed è per questo che un’app non interroga mai Canva mentre è in funzione.
• Canva Free non può ingrandire molto un design oltre la sua dimensione. Quando Canva rifiuta un’esportazione grande, Setherion richiede di nuovo alla dimensione del design.
• Canva limita quante esportazioni può fare una persona in pochi minuti. Se lo dice, aspetta e riprova.

A cosa serve. Portare con te il tuo codice, e portare dentro del codice. L’esportazione mette l’app in un repository tuo come normale progetto Vite e React. L’importazione ricrea un’app che hai già in un repository.

Collega. Clicca su Connect GitHub, accedi e approva, oppure usa Connect GitHub dentro la finestra di esportazione. L’accesso si usa quando chiedi di inviare il codice, e non fa mai parte dell’app che pubblichi. Copre anche i repository privati.

Esporta. Apri il menu Publish nell’editor e scegli Export to GitHub. Dai un nome al repository, scegli se è Private repository (l’impostazione predefinita) e clicca sul pulsante. Se il repository non esiste, viene creato. Esporta di nuovo in qualsiasi momento per aggiornarlo con le ultime modifiche.

Importa. Nella dashboard clicca su +, poi Import an app, poi GitHub. Collega lì GitHub per vedere i tuoi repository, compresi quelli privati, oppure incolla l’indirizzo di uno pubblico. Qualsiasi app web va bene: React, Next.js, Vue o semplice HTML. La lettura guarda cosa fa l’app, non come è stata costruita. I file segreti e le chiavi vengono lasciati fuori. Vedi Importare un’app.

Limiti. L’esportazione fa parte dei piani a pagamento: con Free il pulsante ti chiede di passare a un piano superiore. L’importazione costa una nuova app più la lettura del codice, e la tua prima importazione è gratis: vedi Piani e crediti. I record di un database non arrivano con un’importazione, solo la sua struttura.

Da sapere. L’esportazione è un pulsante in Publish, non una richiesta da scrivere nella chat.

A cosa serve. Lo stesso dell’esportazione di GitHub, per GitLab: il tuo codice in un repository tuo.

Collega. Clicca su Connect GitLab, accedi e approva, oppure usa Connect GitLab dentro la finestra di esportazione. Si usa quando invii il codice e non diventa mai parte di un’app che pubblichi.

Esporta. Apri il menu Publish nell’editor e scegli Export to GitLab. Dai un nome al repository, scegli Private repository (l’impostazione predefinita) o no, e clicca su Export to GitLab. Esporta di nuovo per aggiornarlo. È un progetto Vite e React eseguibile.

Limiti. L’esportazione fa parte dei piani a pagamento, come per GitHub. GitLab non ha un’importazione: per portare un’app da un progetto GitLab, scaricala come ZIP e usa l’importazione da ZIP in Importare un’app.