Para freelancers, agencias digitales y equipos de marketing

Cómo trabajar con transjt.ai y HubSpot CMS

Con transjt.ai, puedes convertir al instante diseños únicos de Figma en temas listos para HubSpot. Aprende a optimizar tu flujo de trabajo, ahorrar tiempo y entregar a tus clientes sitios web de HubSpot limpios y adaptables.

Regístrate

¿Cómo crear una cuenta en transjt.ai?

Regístrate usando la autenticación de Google o Figma, o con tu correo electrónico directamente en transjt.ai. Necesitarás esta cuenta para usar tanto el plugin como la aplicación.

Regístrate

¿Cómo descargar el plugin de transjt para Figma?

Puedes obtener el plugin de transjt a través de la aplicación transjt.ai o directamente en Figma, buscando ‘transjt’ en la sección de «Plugins y Widgets».

Abrir página del Plugin

¿Cómo conectar transjt con HubSpot?

Inicia sesión en transjt.ai, ve a Settings > Integrations, haz clic en Agregar cuenta, selecciona HubSpot y sigue las indicaciones. Se requieren permisos de administrador en HubSpot.

Ir a Integrations

¿Cómo crear proyectos en transjt.ai?

Abre transjt.ai, ve a la sección Projects y haz clic en el icono ‘+’ para crear un nuevo project. También puedes eliminar projects desde la misma vista general.

Ir a Projects

¿Cómo vincular projects de transjt con HubSpot?

Abre tu project y haz clic en el ícono de engranaje en la esquina superior izquierda. En la pestaña Integrations, agrega una nueva cuenta de HubSpot o selecciona una cuenta existente de la lista para vincularla.

¿Cómo vincular otra cuenta de HubSpot?

Abre tu project y haz clic en el ícono de engranaje. Si tienes varias cuentas de HubSpot integradas, selecciona la correcta. Si no, agrega una nueva cuenta siguiendo los pasos descritos anteriormente.

Administra tu suscripción

Ofrecemos cuatro planes de subscription: Free, Creator, Professional y Enterprise (solo bajo solicitud). Puedes administrar o actualizar tu subscription en cualquier momento desde Settings > Subscription.

Ir a Subscriptions

¿Qué son las tasks en transjt?

La sección Tasks ofrece una vista general de todas las tasks activas de IA, incluidas las importaciones desde Figma y las exportaciones a HubSpot. Cuando una task se completa, se marcará como ‘Ready for export’. Si el componente ya existe en HubSpot, puedes elegir si reemplazarlo o mantener el existente. No olvides hacer clic en ‘Continue’ para continuar.

Uso de tokens: ¿cuándo se usan los tokens?

"Los tokens se usan cada vez que los diseños son procesados por la IA, tanto en la entrada (lo que envías) como en la salida (lo que genera la IA). Cada importación desde Figma y exportación a HubSpot consume tokens.

Cómo seleccionar el Theme de transjt en HubSpot y crear páginas

Crea un nuevo website project o una página en HubSpot CMS. Selecciona tu transjt theme buscando la imagen de vista previa y el nombre del project desde transjt.ai. Ten en cuenta que el transjt theme solo aparecerá después de tu primer export a HubSpot.

Diseña componentes, no páginas, para export (figma-transjt)

Evita importar páginas completas en transjt.ai, ya que no se dividirán en components individuales. En su lugar, importa components únicos — esto facilita la construcción de páginas en HubSpot más adelante.

Usa la funcionalidad de Auto Layout de Figma

El Auto Layout de Figma es una herramienta potente: cuando se configura correctamente, funciona sin problemas con transjt.ai para obtener excelentes resultados y ahorrar tiempo tanto en el desarrollo frontend como backend. Recuerda agrupar los elementos lógicos para mantener tu diseño organizado y fácil de exportar.

Cómo añadir instrucciones para la IA en los diseños

Puedes añadir instrucciones para la IA directamente dentro de tu diseño en Figma. Simplemente escribe explicaciones de texto dentro del campo de texto de un component, y la IA las interpretará y aplicará. Por ejemplo: añade al título principal ‘Hover state with background shadow’, y la animación hover se generará automáticamente.

¿Cómo crear un formulario de varios pasos en Figma para HubSpot CMS?

Simplemente añade ambos pasos —por ejemplo, en un flujo de formulario— a tu archivo de diseño y etiquétalos como “Step 1” y “Step 2”. La IA los combinará en un formulario de varios pasos sin interrupciones e integrará automáticamente con HubSpot CMS.