Locofyは、デザインと開発をつなぐツールです。デザイナーがFigmaで画面を用意し、開発者かデザイナーが要素をボタン、入力欄、リストなどとタグ付けすると、Locofyがレスポンシブなレイアウトのコンポーネント型コードを生成します。出力はプレビューでき、プロジェクトへ書き出せます。
React、Next.js、Gatsby、Vue、React Nativeなどのフレームワークに対応し、GitHubとつないで同期できます。AI機能がコンポーネントやレスポンシブの挙動を自動で検出し、Builderでは書き出す前に編集やロジックの追加ができます。
Locofyには無料枠と有料プランがあります。生成されたコードはレビューが必要で、チームの規約に合わせて多少リファクタリングすることも多いです。代替にはAnima、DhiWise、Builder.io Visual Copilot、Figma Dev Mode、v0があります。デザインからコードへ素早く進めたいチームに向いています。
