Locofy

Locofy（ロコファイ）は、デザインツールで作った画面を、AIの支援でフロントエンドのコードに変換することを目指したサービスとされます。これまで手作業で書いていたUI部分のコード化を、半自動で進められる点が特徴とされています。

仕組みとしては、デザインツール向けのプラグイン「Locofy Lightning」を使い、ボタンや入力欄、コンテナといった要素を認識・タグ付けし、最適化したうえでコードを書き出す流れとされます。変換先はReactやHTML/CSSのほか、React Nativeなど複数の形式に対応するとされていますが、対応範囲は変わり得ます。

使われ方としては、FigmaやAdobe XDなどで完成したデザインをもとに、画面のたたき台となるコードを素早く用意したい場面が想定されます。読者層はやや開発者・デザイナー寄りで、出力されたコードをそのまま使うというより、調整の出発点として扱う前提とされることが多いようです。

注意点として、UIは英語が中心とされ、無料で試せる範囲と有料プランがあるとされますが、具体的な料金体系や利用条件、対応するデザインツール・出力形式は変わりやすい部分です。

提供内容や仕様は時期によって更新される可能性があるため、導入前には公式サイト（locofy.ai）で最新情報を確認することをおすすめします。