For Freelancers, Digital Agencies and Marketing Teams

How to work with transjt.ai and HubSpot CMS

With transjt.ai, you can instantly turn unique Figma designs into HubSpot-ready themes. Learn how to streamline your workflow, save time, and deliver clean, responsive HubSpot websites to clients.

How to create a transjt.ai account?

Register using Google or Figma authentification, or with your email directly on transjt.ai. You’ll need this account to use both the plugin and the app.

Sign Up

How to download the transjt plugin for Figma?

You can get the transjt plugin either through the transjt.ai app or directly in Figma by searching for ‘transjt’ in the "Plugins & Widgets" section.

Open Plugin Page

How to connect transjt to HubSpot?

Log in to transjt.ai, go to Settings > Integrations, click Add Account, select HubSpot, and follow the prompts. Admin rights in HubSpot are required.

Go to Integrations

How to create projects in transjt.ai?

Open transjt.ai, go to the Projects section, and click the ‘+’ icon to create a new project. You can also delete projects from the same overview.

Go to Projects

How to Link transjt projects with HubSpot?

Open your project and click the gear icon in the top-left corner. Under the Integrations tab, either add a new HubSpot account or select an existing account from the list to link it.

How to Link an other HubSpot account?

Open your project and click the gear icon. If you have multiple HubSpot accounts integrated, select the correct one. If not, add a new account following the steps described earlier.

How to link your designed form to HubSpot forms?

Just design any form in Figma and link it under 5 Minutes with HubSpot without writing any line of code.

What are "Global Components"?

Components such as Headers and Footers are configured as global by default. However, you have the option to set any other component to be global and re-use this component on multiple pages.

Ho to create blog listing and blog pages?

Step by step tutorial how you can create a blog listing page and a blog detail pages in Figma and transjt.ai for HubSpot CMS.

How to select the transjt Theme in HubSpot and create pages

Create a new website project or page in HubSpot CMS. Select your transjt theme by looking for the preview image and project name from transjt.ai. Note that the transjt theme will only appear after your first export to HubSpot.

Manage your Subscription

We offer four subscription plans: Free, Creator, Professional, and Enterprise (only on request). You can manage or upgrade your subscription anytime under Settings > Subscription.

Go to Subscriptions

What are "tasks" in transjt?

The Tasks section provides an overview of all active AI tasks, including imports from Figma and exports to HubSpot. When a task is complete, it will be marked as ‘Ready for export’. If the component already exists in HubSpot, you can choose whether to replace it or keep the existing one. Don’t forget to click ‘Continue’ to proceed.”

Token usage: when are tokens used?

Tokens are used whenever designs are processed by the AI — both for input (what you send) and output (what the AI generates). Every import from Figma and export to HubSpot consumes tokens.

How to create a design in Relume.io and export it with transjt to HubSpot?

Go beyond wireframing and sitemaps with Relume. Use it to create design pages and components, and export your project directly to HubSpot CMS via transjt.ai.

How to create a design in UX Pilot and export it with transjt to HubSpot?

Use UX Pilot to create designs in Figma with AI and export them with transjt to HubSpot CMS. This workflow will save you a lot of time!

Design Components, Not Pages for export (figma-transjt)

Avoid importing entire pages into transjt.ai, as they won’t be split into individual components. Instead, import single components—this makes it easier to build pages in HubSpot later.

Use Figma’s Auto Layout Functionality

Figma’s Auto Layout is a powerful tool: when set up correctly, it works seamlessly with transjt.ai to produce excellent results and save significant time in both frontend and backend development. Remember to group logical elements to keep your design organized and easy to export.

How to add Instructions for AI in designs

You can add instructions for the AI directly within your Figma design. Simply write text explanations inside a component’s text field, and the AI will interpret and apply them. For example: add to the title headline, 'Hover state with background shadow', and the hover animation will be generated automatically.

How to create a multi-step form in figma for HubSpot CMS?

Simply add both steps—for example, in a form flow—into your design file and label them “Step 1” and “Step 2.” The AI will then combine them into a seamless multi-step form and automatically integrate it with HubSpot CMS.