無料で登録
AIでFigmaからHubSpotへ

Figmaから​HubSpotへ：​AIで​デザインを​カスタムテーマに​変換。

FigmaのデザインをネイティブなHubSpot CMSテーマに変換する大変な作業はtransjtが引き受けるので、チームは最後の細部を整えるだけです。

Figmaプラグインを入手デモを予約

代理店、フリーランス、マーケティングチームに選ばれています

仕組み

Figmaを​HubSpotに​変換する方法。

FigmaからHubSpotへの変換とは、FigmaのデザインをHubSpot CMSのテーマ、つまりマーケティングチームがページエディターで編集するHubLテンプレートとドラッグ＆ドロップのモジュールにすることです。transjtはこの変換をAIで行います。プラグインがフレームを読み取り、数時間後にはHubSpotポータルにネイティブテーマが届きます。開発者への引き継ぎは要りません。

  1. デザインを準備する

    Figmaでオートレイアウトと再利用できるコンポーネントを使ってください。最もきれいな結果が得られます。

    詳しく見る

  2. transjtのFigmaプラグインで取り込む

    Figmaコミュニティからインストールし、Figmaの中で直接実行します。フレームを選択して、transjtに送ります。

    詳しく見る

  3. プレビューして調整する

    エクスポートする前に、デスクトップ、タブレット、モバイルのレスポンシブレイアウトを確認します。

  4. HubSpotへデプロイ

    スーパー管理者がポータルを一度接続すれば、あとは数分でテーマをデプロイするか、ZIPでダウンロードできます。エクスポートではトークンを消費しません。

  5. HubSpotでページを作る

    チームはモジュールをページにドラッグし、すべてのフィールドを編集します。独自のコードはcustom.cssとcustom.jsに追加してください。どちらも再エクスポート時にそのまま残ります。

  6. 数時間でテーマが完成。

    今日、Figmaからフレームを送りましょう。完成したテーマのHubSpotへのデプロイは数分で終わります。

    Figmaプラグインを入手デモを予約
テンプレートではなく、テーマ

Figmaから​HubSpotへの​テーマ vs. ドラッグ＆ドロップの​テンプレート。

多くのチームは、マーケットプレイスのテンプレートやHubSpotのドラッグ＆ドロップビルダーから始め、デザインのほうをそれに合わせて曲げています。transjtはその逆です。Figmaのデザインがそのままテーマになります。すべてのセクションが独自のフィールドを持つHubLモジュールなので、レイアウトはデザインどおりに保たれ、マーケターはページエディターでテキスト、画像、ボタンを編集できます。

カスタムテーマを手作業でコーディングする場合と違い、HubLテンプレート、モジュールのフィールド、CSSがネイティブなHubSpotテーマとして自動で生成されます。後から開発者がコードを開いても、目にするのは標準的なHubSpotの構造で、独自仕様のものはありません。無料プランを含む、すべてのHubSpotプランで使えます。

企業のマーケティングチーム、代理店、フリーランスのデザイナーのために作られています。

お客様の声

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“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へ：​AIでつなぐ。

Figmaのデザインを手作業でコーディングするのは、もうやめましょう。transjtが数時間で、レスポンシブでネイティブなHubSpotテーマとWebサイトに変換します。

  • ワークフロー

    Figmaとのネイティブ統合

    制作の流れを止めません。transjtのプラグインをFigmaの中で直接実行し、キャンバスを離れずにフレームをHubSpotへ送れます。

  • HubSpot

    ネイティブHubLモジュール

    すべてのセクションが、編集できるフィールドを持つHubSpotモジュールになり、ドラッグ＆ドロップエディターですぐに使えます。埋め込みも、iframeも、固定されたレイアウトもありません。

  • 汎用性

    サイト全体、ブログ、フォーム

    ヘッダーとフッターは標準でグローバルになり、ブログの一覧と記事のテンプレートはテーマに含まれます。Figmaでデザインしたフォームは、ネイティブなHubSpotフォームに対応づけられます。

  • 自動化

    AIによる自動レスポンシブレイアウト

    メディアクエリを書く必要はありません。transjtがレイアウトをモバイル、タブレット、デスクトップに合わせます。

  • 汎用性

    他のツールとも連携

    Google Stitch、Relume、UX Pilotでデザインし、Figmaで仕上げて、その結果をHubSpotへエクスポートします。

Figmaプラグインを入手デモを予約
AIデザインツール

AIで​デザインしましたか？

AIビルダーでサイトを作るか、Google StitchやUX Pilotでデザインを作成してFigmaに取り込めば、transjtがそれをネイティブなHubSpotテーマに変換します。

対象

企業、​代理店、​フリーランスの​ために。

明るいオフィスのロビーでタブレットを持って微笑むビジネスウーマン企業社内チームでWebサイトのリニューアルを進められます。長い木のテーブルを囲んで打ち合わせをするチーム代理店チームを増やさずに、クライアントのサイトを完璧に仕上げます。共有スタジオでノートパソコンに向かう、眼鏡に赤いニット帽のデザイナーフリーランスtransjtがプロジェクトを作っている間、チャイラテでもどうぞ。
FAQ

Figmaから​HubSpotへの​変換に関する​よくある質問。

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

デモを予約FigmaからHubSpotへの変換に関するすべての質問

  • いいえ、変換には必要ありません。HubLテンプレート、モジュールのフィールド、CSSは、transjtがデザインをもとに書きます。開発者が役立つのは、最後の細かな仕上げや特殊なロジックです。独自のコードはcustom.cssとcustom.jsに入れれば、再エクスポート時にもそのまま残ります。

  • 無料プランを含む、すべてのHubSpotプランで使えます。

  • スーパー管理者がポータルを一度接続するだけです。その後、チームは通常のHubSpot権限で作業できます。

  • いいえ。transjtは別のテーマを作成するので、現在のテーマやページはそのまま変わりません。ただし、1つのページで新旧のテーマを混在させないでください。

  • はい。すべてのセクションが、テキスト、画像、リンク、ボタンのフィールドを持つHubSpotモジュールになり、チームはドラッグ＆ドロップエディターでそれらを配置できます。

  • オートレイアウトとコンポーネントで整理されたファイルなら、変換直後で約90〜95%の仕上がりが見込め、あとは見た目を少し調整するだけです。

  • Figmaのモジュール1つなら数分で、テーマ全体なら数時間で完成します。完成したテーマのポータルへのデプロイは数分で終わります。

  • はい。FigmaでデザインしたフォームはネイティブなHubSpotフォームに対応づけられるので、送信内容はCRMに入ります。

  • 取り込みでは、デザインの複雑さに応じてトークンを消費します。HubSpotへのエクスポートでは消費しません。Starterは無料で3回、Creatorは月25回、Professionalは月50回のエクスポートが含まれます。料金を見る

  • まだできません。HubSpotのメールテンプレートは次に対応予定です。

次に読む

さらに​詳しく。

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

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

無料で始めるデモを予約