Figmaプラグイン

transjtプラグインをインストールしてログインし、Figmaのコンポーネントをtransjtのプロジェクトに送ります。

概要

プラグインでできること

transjtプラグインは、Figmaとtransjtアプリをつなぎます。Figmaファイルでレイヤーを選択し、transjtのプロジェクトに送ります。そこでレイヤーがコンポーネントに変換されるので、プレビューしてからHubSpotまたはWordPressにエクスポートします。

変換はピクセル単位で正確です。transjtが作るコンポーネントは、レイアウト、余白、タイポグラフィ、色まで、Figmaのデザインと一致します。デスクトップ、タブレット、モバイルのレイアウトも含まれます。

変換したいデザインファイルを開きます。
アクションメニューを開き（MacではCmd + K、WindowsではCtrl + K）、Plugins & widgetsに切り替えます。
「transjt」を検索し、プラグインをクリックして実行します。

一度使うと、Figmaでは最近使用したプラグインの一覧にこのプラグインが表示されるので、ワンクリックで再び起動できます。transjtアプリのPluginsにもリンクがあります。

まだデザインがない場合：無料のtransjt Figma Playgroundファイルでプラグインを試せます。transjtが想定するとおりに構成されたファイルです。

プラグインでは、transjtアプリと同じアカウントを使います。Figma、Google、HubSpot、GitHub、またはメールアドレスとパスワードでログインします。アカウントをお持ちでない場合は、プラグインでSign Upをクリックしてください。

プラグインの下部には、プラグインのバージョンとログイン中のアカウントが表示され、そこからログアウトもできます。

Select typeで、取り込むものの種類を選びます。
- Component：ヒーロー、機能グリッド、フッターなど、ページのセクション用。
- Blog：ブログの一覧レイアウト用。
- Blog Detail：個別記事のレイアウト用。
Projectsで取り込み先のプロジェクトを選ぶか、Create Projectをクリックして名前を付けます。
Figmaで、変換したいレイヤーを選択します。
Import to transjtをクリックします。

選択したコンポーネントが、transjtアプリのプロジェクトに転送されます。続きはアプリで、PreviewとExportに進みます。

Figmaでレイヤーを選択し、Import to transjtをクリックします。

Figmaでコンポーネントを変更した場合は、同じ手順でもう一度取り込みます。そのコンポーネントがすでにHubSpotにある場合、transjtはTasksで、既存のコンポーネントを置き換えるか残すかを確認します。Continueをクリックして先に進みます。

取り込みのたびに、デザインの複雑さに応じてサブスクリプションのトークンを消費します。エクスポートでは消費しません。詳しくはトークンをご覧ください。

詳しくはtransjt向けのデザインをご覧ください。