Design e código

Para que serve. Criar um app de acordo com um design que você fez no Figma. O Setherion renderiza o frame, lê o layout, as cores, a tipografia e os espaçamentos dele, e cria a partir disso.

Conectar. Clique em Connect Figma na página Connectors, entre no Figma e volte. Não há chaves para copiar. O acesso é somente leitura: o Setherion nunca pode alterar seus arquivos. Ele é usado enquanto você cria e nunca faz parte do app que você publica. O Figma não mostra nenhuma cobrança de uso vinda do Setherion.

Usar. No editor, clique em +, depois Design, depois Import from Figma. No painel, fica em +, em Import a design, onde o Canva também é oferecido. No Figma, clique com o botão direito no frame que você quer e escolha Copy link to selection, cole o link e clique em Import frame. O frame é anexado à sua mensagem junto com uma descrição dele e suas cores, fontes e espaçamentos exatos, e o app é recriado de acordo.

Peça. “Recrie a página inicial de acordo com este frame.” “Use as cores e as fontes do meu design do Figma.”

Bom saber. O link precisa apontar para um design, como figma.com/design/KEY?node-id=1-234. A barra de endereço da sua lista de arquivos não é um, e o importador avisa. Se um link for recusado, a conta do Figma conectada precisa conseguir abrir esse arquivo. Se o Figma deixar de aceitar a conexão, a importação diz para você conectar de novo.

Para que serve. Trazer um design do Canva (um cardápio, um panfleto, um banner) para um app como imagens para colocar. São arte para pôr em uma página, não um layout para recriar.

Conectar. Clique em Connect Canva, entre no Canva e volte. Não há chaves para copiar. O Setherion lê seus designs e os exporta só quando você importa um, e nada no Canva é alterado.

Importar do Canva. No editor, clique em +, depois Design, depois Import from Canva. No painel, fica em +, depois Import a design. Abra o design no Canva, copie o endereço do navegador (ele tem /design/ nele, e um endereço curto canva.link não serve), cole-o e clique em Import design. O design precisa ser seu ou ter sido compartilhado com você.

Peça. “Coloque o cardápio que acabei de importar na página Cardápio.” “Use o banner como a imagem principal da página inicial.”

Limites.

• As três primeiras páginas do design chegam, como imagens, no chat.
• Elas são exportadas uma vez, enquanto você cria, e depois hospedadas com as outras imagens do app. Os links de exportação do próprio Canva deixam de funcionar depois de um dia, e é por isso que um app nunca consulta o Canva enquanto roda.
• O Canva Free não consegue ampliar muito um design além do tamanho dele. Quando o Canva recusa uma exportação grande, o Setherion pede de novo no tamanho do próprio design.
• O Canva limita quantas exportações uma pessoa pode fazer em alguns minutos. Se ele avisar, espere e tente de novo.

Para que serve. Levar seu código com você e trazer código para dentro. A exportação coloca o app em um repositório seu como um projeto Vite e React normal. A importação recria um app que você já tem em um repositório.

Conectar. Clique em Connect GitHub, entre e aprove, ou use Connect GitHub dentro da janela de exportação. O acesso é usado quando você pede para enviar, e nunca faz parte do app que você publica. Ele cobre também repositórios privados.

Exportar. Abra o menu Publish no editor e escolha Export to GitHub. Dê um nome ao repositório, escolha se ele será Private repository (o padrão) e clique no botão. Se o repositório não existir, ele é criado. Exporte de novo quando quiser para atualizá-lo com as mudanças mais recentes.

Importar. No painel, clique em +, depois Import an app, depois GitHub. Conecte o GitHub ali para ver seus próprios repositórios, inclusive os privados, ou cole o endereço de um público. Qualquer app web serve: React, Next.js, Vue ou HTML simples. A leitura olha o que o app faz, não como ele foi criado. Arquivos secretos e chaves ficam de fora. Veja Importar um app.

Limites. Exportar faz parte dos planos pagos: no Free o botão pede que você faça upgrade. Importar custa um app novo mais a leitura do código, e sua primeira importação é grátis: veja Planos e créditos. Os registros de um banco de dados não vêm em uma importação, só a estrutura dele.

Bom saber. Exportar é um botão em Publish, não uma solicitação que você digita no chat.

Para que serve. O mesmo que a exportação do GitHub, para o GitLab: seu código em um repositório seu.

Conectar. Clique em Connect GitLab, entre e aprove, ou use Connect GitLab dentro da janela de exportação. Ele é usado quando você envia e nunca passa a fazer parte de um app que você publica.

Exportar. Abra o menu Publish no editor e escolha Export to GitLab. Dê um nome ao repositório, escolha Private repository (o padrão) ou não, e clique em Export to GitLab. Exporte de novo para atualizá-lo. É um projeto Vite e React executável.

Limites. Exportar faz parte dos planos pagos, como no GitHub. O GitLab não tem importação: para trazer um app de um projeto do GitLab, baixe-o como um ZIP e use a importação de ZIP em Importar um app.