Figma MakeからWordPressへ

Figma Makeから​WordPressへ。​デザインファイルを​公開テーマに。

Figma Makeでプロトタイプを作りましたか? Figma MakeからWordPressへの変換は、transjtが自動で行います。生成したデザインが本物のPHPテンプレートを備えたネイティブテーマになり、いつもならデザインの細部が失われがちな受け渡しの工程を省けます。

プレビュー後にお支払い

transjtのブロックで作られたホームページを表示したWordPressのブロックエディター。横にはブロックの一覧が並んでいます

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

変換すべきとき

Figma Makeを​WordPressに​変換すべきとき

Figma Makeのプロトタイプを、誰かが作るための仕様書で終わらせず、WordPressテーマにすべき6つの場面。

  • デザインは引き継ぎで失われる

    デザインをコードに置き換えるとき、あなたが決めた余白の一つひとつは、そのまま残るか失われるかのどちらかです。Figma Makeの出力を直接変換すれば解釈の工程がなくなるので、テーマはファイルそのものと一致します。

  • デザイナーのあなたにとって、遅れの原因はすべて開発者の手配

    Figma Makeのおかげで、エンジニアリングなしにデザインファイルから動くコードまでたどり着きました。そこで止まってWordPress開発者の順番を待てば、せっかく開発者なしでここまで来たのに、また開発者に頼ることになります。

  • 移行してもデザインシステムは崩さない

    手作業で作り直すと、タイプスケールや余白のリズム、それに伴うコンポーネントのバリアントが、誰も気づかないうちに少しずつ崩れがちです。transjtは生成されたスタイルをそのままテーマに引き継ぐので、そうした決定が変わらずに残ります。

  • クライアントは修正を依頼するより、自分で編集したい

    クライアントはプロトタイプを見ることはできても、サイトを運用するにはテーマが必要です。変換すれば文章がWordPressのエディターに入るので、誤字のたびにクライアントからメールが届くこともなくなります。

  • 修正のたびに二度作り直す必要はない

    デザインが変わったら、Figma Makeで再生成し、変換をもう一度実行します。そうしなければ、修正のたびに、まずデザイン作業、次に開発作業と、二度費用を払うことになります。

  • サイトに必要なのはページだけでなくCMS

    ブログ、ランディングページ、フォーム、多言語コンテンツは、WordPressではごく普通の機能です。静的なプロトタイプでは、そのどれもが個別開発になります。変換すれば、こうした機能をすでに備えたソフトウェアの上にデザインを載せられます。

計算してみる

Figma Makeで​いくつの​コンポーネントを​作りましたか?

transjtでサイトを公開

費用を節約
$8,100*
時間を節約
81時間*手作業で10.1作業日
すぐに結果が出る
1.5〜3時間*テーマ全体で
無料で始める

*手作業でReactからWordPressへ移行する場合の時間をもとにした概算です。1コンポーネントあたり約4.5時間、時給$100、1日8時間で計算しています。transjtなら約1.5〜3時間で、リポジトリからテーマを構築します。

仕組み

Figma Makeを​4ステップで​WordPressへ​エクスポート。

GitHubを経由して、Figma MakeのプロジェクトからネイティブなWordPressテーマへ。

  1. Figma Makeで生成

    デザインが意図どおりに動くまで、Figma Makeの中でプロンプトを入れて調整します。出力は、サーバーサイドレンダリングなしのReactとViteを目指してください。この形が、テーマファイルに最もきれいに変換できます。

  2. コードをGitHubへ

    生成されたコードをFigma Makeから書き出し、リポジトリにプッシュします。ここで、デザインファイルがほかのツールでも読めるソースコードになります。

  3. リポジトリをtransjtに接続

    transjtのプロジェクトでGitHubを認可し、リポジトリを選択します。transjtはコンポーネントツリーを読み取り、どの部分をPHPテンプレートにし、どの部分を編集できるコンテンツ領域にするかを判断します。

  4. WordPressへエクスポート

    WordPressを選び、元のデザインと見比べながらプレビューを確認します。確定すると、transjtがテーマフォルダーを生成します。ほかのテーマと同じように、WordPressの管理画面からインストールできます。

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“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 Makeの​デザインを​WordPressへ​移しませんか?

Figma Makeから変換したWordPressテーマの中身

WordPressがWebの大きな割合を占めているのは、テーマ層がオープンで、編集ツールが成熟しているからです。デザイナーにとってずっと問題だったのは、デザインをそのテーマ層に落とし込むにはPHPが必要なことでした。そのため、作業は開発者待ちの列に並んだままになります。transjtはその変換を自動化するので、Figma Makeで生成したデザインが、誰かが手で作り直すことなくテーマになります。

FAQ

Figma Makeから​WordPressへの​FAQ。

Figma MakeのデザインをWordPressテーマに変換する前に知っておきたいこと。

デモを予約
  • Figma Makeは、プロンプトとデザインファイルを動くReactコードにします。そのコードをGitHubにプッシュすれば、transjtがネイティブなWordPressテーマに変換します。デザインファイルから公開サイトまで、間に開発者を挟む必要はありません。

  • 静的なFigmaのフレームは画像なので、解釈が必要です。Figma Makeは実際のスタイルを持つ本物のReactコンポーネントを生成するので、見た目の近似ではなく、動くコードから変換が始まります。そのため、仕上がりの整合性がはるかに高くなります。

  • はい。transjtはコンパイル済みのスタイルをそのまま引き継ぐので、余白、タイプスケール、コンポーネントのバリアントが、Figma Makeのプレビューと同じようにテーマでも表示されます。

  • ViteベースのReactで、サーバーサイドレンダリングなしです。生成されたプロジェクトにサーバー層が含まれている場合は、変換前に取り除いてください。コンポーネント自体は、どちらの場合でも移植できます。

  • はい。Figma Makeで再生成し、同じリポジトリにプッシュして、transjtをもう一度実行します。WordPress内ですでに編集したコンテンツはデータベースに保存されているので、上書きされません。

  • 生成したコードがGitHubにあれば、ページ数にもよりますが、transjtは通常数時間で、公開できるWordPressテーマを用意します。

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

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