FigmaからHubSpotへのプラグイン

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.”
KevinThinkFuel
  • 95–99%完成コードの割合(構成の整ったファイルの場合)
  • ∞取り込めるAIビルダー(Figmaにも対応)
  • 2ネイティブ対応のCMS:HubSpotとWordPress
  • 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
ネイティブテーマ

Figmaから​HubSpotへの​プラグイン:​ネイティブテーマか、​ドラッグ&ドロップの​テンプレートか?

多くのチームは、マーケットプレイスのテンプレートやHubSpotのドラッグ&ドロップビルダーから始め、デザインのほうをそれに合わせて曲げています。transjtはその逆です。Figmaのデザインがそのままテーマになり、すべてのセクションが独自のフィールドを持つHubLモジュールになります。後からコードを開いた開発者が目にするのは、標準的なHubSpotのファイルです。

詳しくは、FigmaからHubSpotへのテーマに含まれるものとHubSpotの接続方法をご覧ください。

WordPressをお使いですか?FigmaからWordPressへのプラグインをご覧ください。

FAQ

FigmaからHubSpotへの​プラグインに​関する​質問。

要点だけをまとめた回答です。それ以外のことは、デモを予約してお尋ねください。

デモを予約
  • プラグインが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)などのスクロールアニメーションにも対応しています。

今日​デザインして、​明日​公開。

transjtでは一秒一秒が大切です。だから私たちの使命はシンプル。あなたの時間を節約し、ワークフローの手間をなくすことです。