コーディングなしで​Figmaを​WordPressに​変換。

Figmaファイルを準備する

• ボタン、ヘッダー、コンテナーにはオートレイアウトを使ってください。レスポンシブなCSSのflexboxに直接対応づけられます。
• 実際のページの領域（Hero、Features、Footer）に対応するセクションにまとめます。transjtはこれらをテーマのセクションやコンポーネントとして扱います。
• 平坦化したページではなく、再利用できるコンポーネントでデザインします。1つの巨大なフレームよりも、はるかに確実に変換できます。

グローバルなデザイントークンを設定する

Figmaで、色、余白、文字サイズの段階に明確な名前を付けます（例：Primary-Brand、Accent-Green）。transjtはFigmaのグローバルスタイルを読み取り、生成するテーマに対応づけるので、ブランドのデザインシステムは手作業で入力し直すことなく、そのまま引き継がれます。

transjt.aiのプラグインを実行する

• 完成したデスクトップ版のモックアップをFigmaで開きます。
• transjtのFigmaプラグインを起動します（プラグイン → transjt）。
• 変換したいフレームやコンポーネントを選択します。
• プロジェクトの種類としてWordPressを選びます。
• transjtのAIがカスタムテーマを生成し、transjt.aiのワークスペースに送ります。

WordPressへエクスポートする

• WordPressサイトにtransjtのプラグインをインストールして有効化します。
• サイトをtransjt.aiのワークスペースに接続します。
• 生成されたテーマを、transjtからWordPressへ直接エクスポートします。
• これで、レスポンシブなカスタムテーマがWordPressで稼働し、ページとコンテンツを追加できる状態になります。

取り込み後の仕上げとレスポンシブ対応

• 配置の確認：画像、テキスト、ボタンが微妙にずれたり、折り返したりしていないか確かめます。
• 画面幅のテスト：タブレットとモバイルのプレビューを切り替え、モバイルで大きすぎる見出しがあれば調整します。
• 動的コンテンツの接続：デザイン上必要な箇所で、ブログやCMSのフィールドを接続します。