Español
English
Català
FrançaisFigma té dues maneres diferents de publicar. Figma Sites permet dissenyar i publicar dins de Figma, amb l’opció de connectar-hi un domini propi segons l’elegibilitat actual del pla. Figma Make pot enviar el codi a GitHub. Si vols desplegar aquest repositori fora de Figma, el pots connectar a Hostbrid Projects; abans, comprova com funciona la sincronització.
Si encara no saps si el projecte és estàtic o necessita un servidor, comença per identificar què ha d’executar un web creat amb IA. Aquesta guia tracta el flux de codi de Figma Make, no l’exportació d’un fitxer de Figma Sites.
1. Comprova quin producte de Figma has fet servir
Si has construït el lloc amb Figma Sites, comença pel flux de publicació de Figma i consulta la seva guia per connectar un domini propi. Un fitxer de Figma Design o un prototip no és, per si sol, un repositori de codi preparat per desplegar.
Si has treballat amb Figma Make, la documentació actual de Figma permet connectar GitHub i crear-hi un repositori per al projecte. Aquest és el punt de partida per a un allotjament que desplega des de Git.
2. Envia el projecte de Make a GitHub
Al fitxer de Make, obre Make settings → GitHub, connecta el compte o l’organització i crea el repositori des de Make. Després, fes servir Push to… per enviar-hi els canvis. Segons la documentació actual de Figma, aquesta integració crea el repositori: no permet triar-ne un que ja haguessis creat tu. Els canvis van de Make a GitHub en una sola direcció i s’envien a la branca predeterminada.
Decideix quina eina serà la font principal del codi. Si edites els fitxers a GitHub i després tornes a enviar els canvis des de Make, aquest enviament pot sobreescriure les edicions. Abans de continuar, confirma que l’últim canvi és a la branca del repositori i no hi afegeixis .env, claus privades ni contrasenyes.
Make envia els canvis a la branca predeterminada de GitHub. Configura aquesta mateixa branca com a branca de producció a Projects; si no coincideixen, el repositori pot rebre el canvi sense que Projects el publiqui.
3. Connecta el repositori a Projects
Al panell d’Hostbrid, obre Projects → Nou projecte → Connecta un repositori i autoritza GitHub si encara no ho has fet. Tria el repositori que ha creat Figma Make. Projects inicia el build i permet revisar la branca de producció, l’ordre d’instal·lació, el build i la carpeta de sortida. La guia de Projects explica cada opció.
No donis per fet que Figma Make genera un lloc estàtic. Revisa package.json, el README, les variables d’entorn i l’ordre d’inici. Si el repositori produeix fitxers estàtics, configura la carpeta que genera el build. Si necessita un procés Node o un Dockerfile, confirma que el pla de Projects inclogui serveis i quota disponible; consulta els plans i límits actuals. La detecció automàtica ajuda, però cal comprovar el resultat.
4. Prova el projecte abans de connectar-hi el domini
Obre l’URL provisional i comprova la portada, les rutes internes entrant-hi directament, les imatges, el comportament mòbil i els formularis. Si l’app fa servir Supabase, Firebase o una altra API, valida’n per separat l’URL, l’autenticació, les crides de retorn i els permisos. Desa els secrets del servidor a la configuració segura del servei; les variables VITE_ que arriben al navegador són públiques.
Projects publica els canvis que arriben a la branca de producció configurada, llevat que el desplegament estigui fixat en una versió anterior. Revisa el registre del build i l’URL després de cada canvi. Connecta el domini quan la versió provisional funcioni i sàpigues quins serveis continuen allotjats a Figma o en tercers. Si el projecte és React/Vite, consulta també com publicar React des de Git.
Figma Make → GitHub → Projects és un recorregut documentat, no una migració automàtica de Figma Sites ni una garantia que qualsevol aplicació funcioni sense ajustos. Consulta Hostbrid Projects i confirma runtime, emmagatzematge, base de dades i límits del pla abans de contractar.