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.

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 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.

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.