Design et code

À quoi il sert. Construire une application qui correspond à un design que vous avez réalisé dans Figma. Setherion affiche le cadre, lit sa mise en page, ses couleurs, sa typographie et ses espacements, et construit à partir de là.

Connexion. Appuyez sur Connect Figma sur la page Connectors, connectez-vous sur Figma et revenez. Il n’y a aucune clé à copier. L’accès est en lecture seule : Setherion ne peut jamais modifier vos fichiers. Il est utilisé pendant que vous construisez et ne fait jamais partie de l’application que vous publiez. Figma n’affiche aucun frais d’utilisation de la part de Setherion.

Utilisation. Dans l’éditeur, appuyez sur +, puis sur Design, puis sur Import from Figma. Sur le tableau de bord, il se trouve sous +, dans Import a design où Canva est proposé aussi. Dans Figma, faites un clic droit sur le cadre voulu et choisissez Copy link to selection, collez le lien, et appuyez sur Import frame. Le cadre est joint à votre message avec une description de celui-ci et ses couleurs, polices et espacements exacts, et l’application est reconstruite pour y correspondre.

À demander. « Reconstruis la page d’accueil pour qu’elle corresponde à ce cadre. » « Utilise les couleurs et les polices de mon design Figma. »

Bon à savoir. Le lien doit pointer vers un design, comme figma.com/design/KEY?node-id=1-234. La barre d’adresse de votre liste de fichiers n’en est pas un, et l’outil d’import vous le dit. Si un lien est refusé, le compte Figma connecté doit pouvoir ouvrir ce fichier. Si Figma n’accepte plus la connexion, l’import vous dit de vous connecter de nouveau.

À quoi il sert. Importer un design Canva (un menu, un flyer, une bannière) dans une application sous forme d’images à placer. Ce sont des visuels à poser sur une page, pas une mise en page à reconstruire.

Connexion. Appuyez sur Connect Canva, connectez-vous sur Canva et revenez. Il n’y a aucune clé à copier. Setherion lit vos designs et les exporte seulement quand vous en importez un, et rien n’est modifié dans Canva.

Import depuis Canva. Dans l’éditeur, appuyez sur +, puis sur Design, puis sur Import from Canva. Sur le tableau de bord, il se trouve sous +, puis Import a design. Ouvrez le design dans Canva, copiez l’adresse du navigateur (elle contient /design/, et une adresse courte canva.link ne convient pas), collez-la et appuyez sur Import design. Le design doit être l’un des vôtres ou être partagé avec vous.

À demander. « Mets le menu que je viens d’importer sur la page Menu. » « Utilise la bannière comme visuel principal de la page d’accueil. »

Limites.

• Les trois premières pages du design arrivent, sous forme d’images, dans le chat.
• Elles sont exportées une seule fois, pendant que vous construisez, puis hébergées avec les autres images de l’application. Les liens d’export propres à Canva cessent de fonctionner au bout d’un jour, et c’est pourquoi une application ne sollicite jamais Canva pendant qu’elle tourne.
• Canva Free ne peut pas agrandir beaucoup un design au-delà de sa taille d’origine. Quand Canva refuse un export de grande taille, Setherion redemande à la taille d’origine du design.
• Canva limite le nombre d’exports qu’une personne peut faire en quelques minutes. S’il le dit, attendez et réessayez.

À quoi il sert. Emporter votre code avec vous, et importer du code. L’export place l’application dans un dépôt à vous, comme un projet Vite et React normal. L’import reconstruit une application que vous avez déjà dans un dépôt.

Connexion. Appuyez sur Connect GitHub, connectez-vous et approuvez, ou utilisez Connect GitHub dans la fenêtre d’export. L’accès est utilisé quand vous demandez d’envoyer, et ne fait jamais partie de l’application que vous publiez. Il couvre aussi les dépôts privés.

Export. Ouvrez le menu Publish dans l’éditeur et choisissez Export to GitHub. Nommez le dépôt, choisissez s’il est Private repository (le choix par défaut), et appuyez sur le bouton. Si le dépôt n’existe pas, il est créé. Exportez de nouveau à tout moment pour le mettre à jour avec les dernières modifications.

Import. Sur le tableau de bord, appuyez sur +, puis sur Import an app, puis sur GitHub. Connectez GitHub à cet endroit pour voir vos propres dépôts, privés compris, ou collez l’adresse d’un dépôt public. Toute application web convient : React, Next.js, Vue ou du simple HTML. La lecture regarde ce que fait l’application, pas comment elle a été construite. Les fichiers secrets et les clés sont laissés de côté. Voir Importer une application.

Limites. L’export fait partie des forfaits payants : sur Free, le bouton vous demande de passer à un forfait supérieur. L’import coûte une nouvelle application plus la lecture du code, et votre premier import est gratuit : voir Forfaits et crédits. Les enregistrements d’une base de données ne viennent pas avec un import, seulement sa structure.

Bon à savoir. L’export est un bouton dans Publish, pas une demande que l’on tape dans le chat.

À quoi il sert. La même chose que l’export GitHub, pour GitLab : votre code dans un dépôt à vous.

Connexion. Appuyez sur Connect GitLab, connectez-vous et approuvez, ou utilisez Connect GitLab dans la fenêtre d’export. Il est utilisé quand vous envoyez et ne devient jamais une partie d’une application que vous publiez.

Export. Ouvrez le menu Publish dans l’éditeur et choisissez Export to GitLab. Nommez le dépôt, choisissez Private repository (le choix par défaut) ou non, et appuyez sur Export to GitLab. Exportez de nouveau pour le mettre à jour. C’est un projet Vite et React exécutable.

Limites. L’export fait partie des forfaits payants, comme pour GitHub. GitLab n’a pas d’import : pour importer une application depuis un projet GitLab, téléchargez-la en ZIP et utilisez l’import ZIP dans Importer une application.