locofy.ai はデザインをモバイルアプリやウェブのフロントエンドコードに変換を可能とします。

• FigmaやAdobe XDのプラグインを使用して、ボタン・入力などの要素にタグを付け、名前を改善し、レスポンシブな動作やページ上のアクションをカスタマイズすることができます。

• Locofy Builderを使用してコンポーネントを共通化し、カスタムスクリプトやSEOメタタグを追加し、最終ページに近いライブレスポンシブプロトタイプも共有可能です。

• 基本的なHTML・CSSやNext.js、Vue、React NativeなどのReactフレームワークにページやコンポーネントのコードをエクスポートしたり、NetlifyやVercelに直接デプロイしたりすることができます。

Figmaでは、「Locofy Lightning - Figma to Code in 1 click」というプラグインを使用し、アウトプットのオプションを選択します。

Locofyは何千ものページでトレーニングされ、レスポンシブなエクスペリエンスを提供し、共通のUIをコードコンポーネントにグループ化できます。現在のBETA版を試してみると、複雑なレイアウトはまだ適切なレスポンシブになっていませんが、80%の完成度を感じています。

ビューへのスクロール、ページの変更、ポップアップの表示、ドロワーの表示など、基本的なアクションを追加する必要があります。

Locofy Builder上でコンポーネント名の変更、props/stateの追加も可能です。

コードにエクスポートするか静的ホスティングにデプロイします。

ここでは既にpackage.json、CSSの設定、ページ、および共通のコンポーネントが用意されています。

npm installコマンドを使用するだけで、ソースコードがビルド可能であり、特殊な要件に対応するためにさらにリファクタリングやカスタマイズすることができます。