Español
English
Català
FrançaisFigma propose deux parcours de publication différents. Figma Sites permet de concevoir et publier dans Figma, avec la possibilité de relier un domaine personnalisé selon les conditions actuelles de votre offre. Figma Make peut envoyer le code vers GitHub. Pour déployer ce dépôt en dehors de Figma, vous pouvez le connecter à Hostbrid Projects ; vérifiez d’abord le fonctionnement de la synchronisation.
Si vous ne savez pas encore si votre projet est statique ou nécessite un serveur, commencez par déterminer ce qu’un site créé avec l’IA doit exécuter. Ce guide porte sur le code de Figma Make, pas sur l’export d’un fichier Figma Sites.
1. Identifiez le produit Figma utilisé
Si vous avez créé le site dans Figma Sites, suivez d’abord le parcours de publication de Figma et consultez son guide pour relier un domaine personnalisé. Un fichier Figma Design ou un prototype ne constitue pas, à lui seul, un dépôt de code prêt à être déployé.
Si vous avez travaillé dans Figma Make, la documentation actuelle de Figma permet de connecter GitHub et de créer un dépôt pour le projet. C’est le point de départ d’un hébergement qui déploie depuis Git.
2. Envoyez le projet Make vers GitHub
Dans le fichier Make, ouvrez Make settings → GitHub, connectez le compte ou l’organisation, puis créez le dépôt depuis Make. Utilisez ensuite Push to… pour envoyer vos changements. Selon la documentation actuelle de Figma, cette intégration crée le dépôt : elle ne permet pas de choisir un dépôt que vous aviez créé auparavant. Les changements vont de Make vers GitHub dans un seul sens et sont envoyés vers la branche par défaut.
Choisissez l’outil qui sera la source de référence du code. Si vous modifiez les fichiers directement dans GitHub puis envoyez de nouveau depuis Make, ce nouvel envoi peut écraser ces modifications. Avant de continuer, vérifiez que la dernière version se trouve sur la branche du dépôt et n’ajoutez pas de fichier .env, de clé privée ou de mot de passe.
Make envoie ses changements vers la branche par défaut de GitHub. Configurez cette même branche comme branche de production dans Projects ; sinon, GitHub peut recevoir la modification sans que Projects la publie.
3. Connectez le dépôt dans Projects
Dans le panneau Hostbrid, ouvrez Projects → Nouveau projet → Connecter un dépôt et autorisez GitHub si nécessaire. Sélectionnez le dépôt créé par Figma Make. Projects lance le build et vous permet de vérifier la branche de production, la commande d’installation, la commande de build et le dossier de sortie. Le guide Projects détaille chaque réglage.
Ne supposez pas que Figma Make produit un site statique. Examinez package.json, le README, les variables d’environnement et la commande de démarrage. Si le dépôt produit des fichiers statiques, indiquez le dossier créé par le build. S’il nécessite un processus Node ou un Dockerfile, vérifiez que l’offre Projects choisie inclut les services et un quota disponible ; consultez les offres et limites actuelles. La détection automatique est utile, mais elle ne remplace pas la vérification du résultat.
4. Testez avant de relier votre domaine
Ouvrez l’URL temporaire et vérifiez la page d’accueil, l’accès direct aux routes internes, les images, l’affichage mobile et les formulaires. Si l’application utilise Supabase, Firebase ou une autre API, vérifiez séparément son URL, l’authentification, les URL de retour et les permissions. Enregistrez les secrets du serveur dans les paramètres sécurisés du service ; les variables VITE_ envoyées au navigateur sont publiques.
Projects publie les changements envoyés sur la branche de production configurée, sauf si le déploiement est épinglé sur une version précédente. Vérifiez le journal du build et l’URL après chaque modification. Reliez votre domaine lorsque la version temporaire fonctionne et que vous savez quels services restent hébergés par Figma ou un autre fournisseur. Pour un projet React/Vite, consultez aussi publier React depuis Git.
Figma Make → GitHub → Projects est un parcours documenté, pas une migration automatique de Figma Sites ni une garantie que chaque application fonctionnera sans adaptation. Découvrez Hostbrid Projects et vérifiez le runtime, le stockage, la base de données et les limites de l’offre avant de commander.