FigwebX

中心となる約束は、変換にAuto Layoutがいらないことだ。多くのFigmaからコードへのツールは、まずフレームをAuto Layoutで整えるよう求める。それは完成済みのファイルを作り直す作業になる。FigwebXは普通のFigmaレイヤーを読み、それでもレスポンシブな結果を出す。デザインの受け渡しが二度目のデザイン作業にならない。

FigwebXは、多くのWordPressチームがすでに使っているビルダーへ出力する。Elementor、Gutenberg、Bricks Builder、Breakdance、そしてWebflowだ。要素は汎用テンプレートではなく、出力先ごとのネイティブブロックに変換される。エディタに届いたものは、慣れたビルダーでそのまま調整を続けられる。Gutenbergのブロックテンプレートショートコードを使えば、変換した要素をDivi、Beaver Builder、Flatsomeなど任意のテーマやビルダーに置ける。

プラグインはレスポンシブの挙動を自分で整えるため、書き出し後に画面サイズごとに余白とブレークポイントを手で詰める必要はない。デスクトップのデザインがスマホ表示で崩れる、あの面倒な工程が省ける。デバイスごとに細かく調整したい場合も、変換後にビルダーで手を加えられる。

FigwebXはレイアウトと要素を編集可能なビルダーコンテンツに変える。つまりテキスト、ボタン、画像、コンテナは、平坦な描画に固定されず調整できる状態で残る。出発点の構造を受け取るのか、スクリーンショットを受け取るのかの違いだ。編集はビルダーで続けられ、サイトが育ってもデザインは扱いやすいままだ。

変換はElementor FreeでもProでも動く。使うのに有料版は要らず、選ぶかどうかはプラグインの制約ではなく自分のデザイン要件で決まる。すでにProを使うチームは、Figmaの要素が入った後に追加のウィジェット群を活かせる。

WordPress以外に、FigwebXはFigmaのデザインをWebflowにも変換する。Webflowで公開する人にも同じ利点がある。Figmaの画面は、エディタで一つずつ作り直すのではなく、Webflow内の編集可能な構造になる。

利用はプランに紐づく月ごとの書き出し枠で回る。無料枠は月5回、有料プランは年50回、100回、1000回へと増え、有料プランでは全出力ビルダーと完全なレスポンシブが使える。一つ見込んでおきたいのは、書き出しタスクを削除しても枠は消費される点だ。実行した時点で一つ埋まる。