Ir al contenido
Volver al blog

Publicar una web de Figma Make desde GitHub: pasos y límites

Conecta Figma Make con GitHub y publica el repositorio en Hostbrid Projects. Distingue Figma Sites, revisa el build y evita perder cambios.

  • Figma Make
  • GitHub
  • publicar web

Figma tiene dos recorridos distintos para publicar. Figma Sites permite diseñar y publicar dentro de Figma, con la opción de conectar un dominio propio según la elegibilidad vigente de tu plan. Figma Make puede enviar el código a GitHub. Si quieres desplegar ese repositorio fuera de Figma, puedes conectarlo a Hostbrid Projects; antes, revisa cómo funciona la sincronización.

Si todavía no sabes si tu proyecto es estático o necesita un servidor, empieza por identificar qué debe ejecutar una web creada con IA. Esta guía se centra en el recorrido de código de Figma Make, no en exportar un archivo de Figma Sites.

1. Comprueba qué producto de Figma has usado

Si construiste el sitio en Figma Sites, sigue primero el flujo de publicación de Figma y consulta su guía para conectar un dominio propio. Un diseño o prototipo de Figma Design no es, por sí solo, un repositorio de código listo para desplegar.

Si trabajaste en Figma Make, la documentación de Figma permite conectar GitHub y crear un repositorio para el proyecto. Ese es el punto de partida para un hosting que publica desde Git.

2. Envía el proyecto de Make a GitHub

En el archivo de Make, abre Make settings → GitHub, conecta la cuenta u organización y crea el repositorio desde Make. Después usa Push to… para enviar los cambios. Según la documentación actual de Figma, esta integración crea el repositorio: no permite elegir uno que ya hubieras creado tú. Los cambios viajan en una sola dirección, de Make a GitHub, y se envían a la rama predeterminada.

Elige qué herramienta será la fuente principal del código. Si editas archivos directamente en GitHub y luego vuelves a enviar desde Make, el nuevo envío puede sobrescribir esas ediciones. Antes de continuar, confirma que el último cambio aparece en la rama del repositorio y no publiques .env, claves privadas ni contraseñas.

Make envía a la rama predeterminada de GitHub. En Projects, configura esa misma rama como rama de producción; si no coinciden, el repositorio puede recibir el cambio sin que se publique.

3. Conecta el repositorio en Projects

En el panel de Hostbrid abre Projects → Nuevo proyecto → Conectar repositorio y autoriza GitHub si aún no lo has hecho. Elige el repositorio que creó Figma Make. Projects inicia el build y permite revisar la rama de producción, el comando de instalación, el build y la carpeta de salida. La guía de Projects explica cada ajuste.

No supongas que Figma Make genera una web estática. Revisa package.json, el README, las variables y el comando de inicio. Si el repositorio produce archivos estáticos, configura la carpeta de salida que genera el build. Si necesita un proceso Node o un Dockerfile, comprueba que el plan de Projects elegido incluya servicios y cuota; consulta los planes y límites actuales. La detección automática ayuda, pero no sustituye la comprobación del resultado.

4. Prueba antes de poner tu dominio

Abre la URL provisional y comprueba la portada, las rutas internas al entrar directamente, las imágenes, el comportamiento móvil y los formularios. Si la app usa Supabase, Firebase u otra API, valida por separado su URL, autenticación, callbacks y permisos. Guarda secretos del servidor en la configuración segura del servicio; las variables VITE_ que llegan al navegador son públicas.

Projects publica cada push que llega a la rama configurada, salvo que el despliegue esté fijado en una versión anterior. Comprueba el log y la URL después de cada cambio. Conecta tu dominio cuando la versión provisional funcione y sepas qué servicios siguen alojados en Figma o en terceros. Si tu proyecto es React/Vite, consulta también cómo publicar React desde Git.

Figma Make → GitHub → Projects es una ruta documentada, no una migración automática de Figma Sites ni una garantía de que cualquier aplicación funcione sin ajustes. Revisa Hostbrid Projects y confirma runtime, almacenamiento, base de datos y límites antes de contratar.

Gestiona tus webs, servidores y correo.

Es gratis y tarda un minuto.

Mínimo 8 caracteres. Ni sólo números ni una contraseña común.

Te mandaremos un correo para confirmar la cuenta.