FigmaからHubSpotへのプラグイン:デザインをネイティブテーマとして書き出す。
transjtのFigmaプラグインは、手作業で作り直すことなく、デザインをFigmaからHubSpotへ送ります。フレームとコンポーネントは、お客様が所有するテーマの中で、HubLテンプレートとドラッグ&ドロップのモジュールになります。Figmaの中で直接実行でき、ページビルダーは使いません。
代理店、フリーランス、マーケティングチームに選ばれています
































































Figmaにはプラグインを1つ、HubSpotには接続を1つ。
Figmaプラグイン
transjt.aiのプラグインはFigmaのワークスペースで動き、デザインや複雑なコンポーネントを数クリックでHubSpotへエクスポートします。手作業で作り直す必要はありません。
デザインは数時間でテーマになります。何日もかかっていたコーディングがなくなるので、フリーランスのデザイナーはHubSpotでのサイト構築も請け負えるようになり、代理店はより多くの案件を受けられます。
Figmaで開くHubSpotとの接続
HubSpot側では、サイトに何もインストールする必要はありません。スーパー管理者がHubSpot自身のログイン(OAuth)でHubSpotアカウントをtransjtに一度接続するか、HubSpotマーケットプレイスからtransjtアプリをインストールします。無料プランを含め、どのHubSpotプランでも使えます。
あとは数分でテーマをデプロイするか、ZIPでダウンロードします。エクスポートはすべてパッケージとして保存されるので、以前のバージョンを再度デプロイすることもできます。代理店はクライアントごとに1つのHubSpotアカウントを接続します。
マーケットプレイスの掲載ページを開く
HubSpotのロジックも搭載。
transjtのFigmaからHubSpotへのプラグインには、次の機能が備わっています:
- モバイルレイアウトの自動生成
- 編集できるフィールドを備えたネイティブHubLモジュール
- ブログの一覧ページと詳細ページのロジックを自動で統合
- ネイティブなHubSpotフォームとの統合
- 開発者にも扱いやすいクリーンなコード
- Figmaでのタグ付けは不要
FigmaとHubSpot CMSをAIでつなぐ。
Figmaのデザインを手作業でコーディングする代わりに、AIに任せれば、数時間でレスポンシブなHubSpotテーマとWebサイトになります。
- ワークフロー
Figmaとのネイティブ連携
transjtのプラグインはFigmaの中で動くので、キャンバスを離れずにデザインを送ってコードを生成できます。
- 汎用性
サイト全体、ブログ、フォームを構築
ランディングページ、ブログ、フォームを含むWebサイト全体を、一度に変換できます。
- 自動化
AIによる自動レスポンシブレイアウト
メディアクエリを書く必要はありません。AIがレイアウトをモバイル、タブレット、デスクトップに合わせます。
- 拡張性
カスタムテーマ
デザインが、再利用できるコンポーネントを備えたHubSpotテーマになるので、チームが自分たちで新しいページを作れます。
- 汎用性
ほかのツールにも対応
Google Stitch、Relume、UX Pilotでデザインしている場合は、その結果をFigmaに取り込み、transjtでHubSpotへエクスポートします。
Figmaでプラグインを開く。
Figmaの中でtransjtを実行し、フレームをワークスペースに送ります。
Figmaで開く
計算してみましょう:コンポーネントはいくつありますか?
transjtでサイトを公開
- 費用を節約
- $8,100*
- 時間を節約
- 81時間*手作業で10.1作業日
- すぐに結果が出る
- 1.5〜3時間*テーマ全体で
*手作業でFigmaからHubSpotへ構築する場合の時間をもとにした概算です。1コンポーネントあたり約4.5時間、時給$100、1日8時間で計算しています。transjtなら約1.5〜3時間でテーマを構築します。
お客様の声。

“We’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.”
KevinThinkFuelWe’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.
Transjt made importing designs from third parties effortless. … Their support made a complex process simple and stress-free.
What would have traditionally required weeks of custom development was completed in just a few days with minimal adjustment.
Great tool that can take your designs into Hubspot in matter of minutes! Love it!
This tool is amazing! It saved me hours of manual coding by converting my Figma designs into clean, responsive layouts.
Turning the Figma design of our new website into a HubSpot webpage was extremely smooth and fast. Saved many hours - if not days - of coding time. Easy and rapid iterations.
The Figma to HubSpot conversion is fast and accurate. It saves hours of manual development when creating HubSpot modules and keeps excellent visual fidelity to the original design.
We’re using it to automate all the drag and drop modules. It’s working very well and we’ve been able to create modules with a high degree of customization.
Easy onboarding and has a great UI. Importing is fast, and the AI enhancements are decent. Good price. Easy to integrate as well.
Very precise design export, and really useful because components don’t get exported as images.
Great tool to export fast design to WordPress.
Once you understand how the system works, transjt becomes a very efficient tool that significantly improves both workflow speed and quality scalability. The support team is responsive and helpful.
- 95–99%完成コードの割合(構成の整ったファイルの場合)
- ∞取り込めるAIビルダー(Figmaにも対応)
- 2ネイティブ対応のCMS:HubSpotとWordPress
- 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
FigmaからHubSpotへのプラグイン:ネイティブテーマか、ドラッグ&ドロップのテンプレートか?
多くのチームは、マーケットプレイスのテンプレートやHubSpotのドラッグ&ドロップビルダーから始め、デザインのほうをそれに合わせて曲げています。transjtはその逆です。Figmaのデザインがそのままテーマになり、すべてのセクションが独自のフィールドを持つHubLモジュールになります。後からコードを開いた開発者が目にするのは、標準的なHubSpotのファイルです。
詳しくは、FigmaからHubSpotへのテーマに含まれるものとHubSpotの接続方法をご覧ください。
WordPressをお使いですか?FigmaからWordPressへのプラグインをご覧ください。
プラグインがFigmaファイルを分析し、レイアウトの構造、タイポグラフィ、カラー、アセットを抽出して、ネイティブなHubSpotテーマに変換します。HubLテンプレート、編集できるフィールドを備えたモジュール、CSSです。
Figma用のtransjtプラグインはFigmaコミュニティからインストールし、Figmaの中で直接動きます。HubSpot側では、サイトに何もインストールする必要はありません。HubSpotアカウントを一度transjtに接続するか、HubSpotマーケットプレイスからtransjtアプリをインストールしてください。
無料プランを含むどのプランでもよいので、HubSpotアカウントと、そのアカウントのスーパー管理者権限が必要です。これがないと、HubSpotはtransjtによるテーマのインストールを許可しません。
お客様です。transjtはテーマをお客様自身のHubSpotアカウントにデプロイします。ZIPでダウンロードすることもできます。独自のコードはcustom.cssとcustom.jsに追加してください。どちらも再エクスポート時にそのまま残ります。
はい。すべてのセクションが、テキスト、画像、リンク、ボタンのフィールドを持つHubSpotモジュールになり、チームはドラッグ&ドロップエディターでそれらを配置できます。
いいえ。HubL、HTML、CSS、JavaScriptはtransjtが書きます。Figmaからデザインを書き出し、コードを1行も書かずにHubSpotアカウントで公開できます。
はい。代理店はクライアントごとに1つのHubSpotアカウントを接続することがよくあります。各アカウントは「Settings > Integrations」にそれぞれ1行ずつ表示され、各プロジェクトは1つのアカウントにデプロイされます。
Figmaでオートレイアウトを使えば、transjtがデスクトップ、タブレット、モバイル向けのレスポンシブレイアウトを自動で生成します。
はい。transjtはナビゲーション、ブログテンプレート、ネイティブのHubSpotフォームをテーマの一部としてエクスポートし、AOS(Animate On Scroll)などのスクロールアニメーションにも対応しています。


