Frontender

Frontenderは、オランダのユトレヒトにある小さなプロダクトスタジオHubitionが作ったFigmaプラグインだ。キャンバス上で選んだレイヤーを読み取り、デザインに沿ったフロントエンドコードを書き出す。2023年に公開され、同社によれば30カ国で5,000人以上の開発者が使っている。画面を一から打ち直す代わりに、既存のマークアップを直したい人向けのフロントエンドコード生成ツールと言える。

埋めているのは受け渡しの隙間だ。デザイナーが画面を仕上げ、開発者が手作業で組み直す過程で、余白や文字サイズが少しずつずれる。Frontenderはプロジェクトに貼れるマークアップとスタイルを出すことで、そのずれの一部を引き受ける。ユーティリティクラスを前提にしたチームなら、Figma Tailwind 変換の流れがもっとも素直だ。

制約は出力と同じくらい重要になる。生成するのは表示部分のコードだけで、状態管理、データ取得、ルーティング、業務ロジックは自分の担当のまま残る。エディタで見直す前提の初稿として扱うといい。無料アカウントは月15回までで、APIもコマンドライン版もない。

Getting Started

1. Figma Communityのページからプラグインをインストールし、任意のデザインファイルでプラグインメニューから開く。
2. キャンバスでレイヤーを1つ、あるいはグループごと選択する。Frontenderは選択範囲を読み、そのままコードを書き始める。
3. パネルで出力形式を選ぶ。HTMLとTailwind、JSXとCSS-in-JS、CSSのみなどから決める。
4. コードをプロジェクトに貼るか、自動コピーでクリップボードに送り、アプリ側に依存する部分を手で調整する。