# Locofy.ai Figma、Penpot、Adobe XDのデザインをWeb・モバイルアプリのフロントエンドコードに変換。複数のフレームワークとワークフローに対応。 - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AIアプリビルダー, AI開発者ツール, AI UIジェネレーター ## Locofy.aiとは？ Locofy.ai は、Figma、Penpot、Adobe XD のデザインをフロントエンドコードに変換するデザイン・トゥ・コード・プラットフォームです。サイト上では、Web とモバイルの両方のプロジェクトで、視覚的なデザインから開発者向けの出力へ移行するための AI 主導の方法として位置づけられています。 この製品は、プラグイン、CLI、MCP、URL からのインポートなど、複数の生成ワークフローに対応しており、デザイナー、開発者、ビルダーは役割に合った方法から始められます。公開ページでは、React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby などのフレームワーク出力先に加え、コードを GitHub に同期したり、エディタベースのワークフローで使用したりするオプションも示されています。 ## Locofy.aiでできること ### デザインからコードへの変換 Figma、Penpot、Adobe XD のデザインを、Web とモバイル向けでそれぞれ使いやすいフロントエンドコードに変換します。 ### フレームワーク別エクスポート デザインソースに応じて、React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby などの対応先を選べます。 ### デザインシステムの再利用 CLI、GitHub、Storybook からカスタムコンポーネントやデザインシステム要素を再利用し、生成コードを既存の製品コードベースに合わせやすくします。 ### 複数の生成ワークフロー プラグイン、CLI、MCP、または URL からのインポートフローで作業でき、チームごとの好みのワークフローを維持できます。 ### エディタおよび AI ツール連携 コードを GitHub に同期し、VS Code などのエディタにエクスポートし、Cursor、Windsurf、Gemini CLI、Claude Desktop などのツールと MCP や LLM 連携を利用できます。 ### レスポンシブ出力と修正 レスポンシブレイアウトに対応し、生成されたセクションを調整し、インタラクティブなプロトタイプを生成してレビューと反復作業を支援します。 ## 利用シーン ### デザインから開発への引き継ぎ チームがデザインから実装へ移行したいときに、レイアウトを手作業で再構築せずにモックアップをコードへ変換して新しい製品画面を作成します。 ### Web アプリと Web サイトの構築 React、Next.js、Vue、Angular、HTML/CSS、Gatsby など、フレームワーク別のエクスポートを使って Web アプリや Web サイト向けのフロントエンドコードを生成します。 ### モバイルアプリの構築 同じデザインソースから、React Native または Flutter を対象とするモバイル向けコードを作成します。 ### 既存のデザインシステムを使うプロジェクト すでにコンポーネントライブラリがあるプロジェクトで、CLI、GitHub、Storybook 経由の対応パスを使い、既存コンポーネントやデザインシステムのルールを再利用します。 ### AI 支援のエンジニアリングワークフロー 開発者がコードのエクスポート、調整、同期を普段使いのツールに近い形で行いたい場合に、エディタベースまたはエージェントベースのワークフローで Locofy を使用します。 ## よくある質問 ### Locofy はどのデザイン入力に対応していますか？ Locofy は Figma、Penpot、Adobe XD のデザインに対応しています。ドキュメントでは、デザイン URL、プラグイン、CLI、または MCP ベースのワークフローから開始する方法も説明されています。 ### Locofy はどのフレームワークとワークフローに対応していますか？ ソースでは、React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby 向けの出力が説明されています。また、LLM と MCP の連携を通じて、コードを GitHub にエクスポートしたり、VS Code、Cursor、Windsurf、Gemini CLI、Claude Desktop などのエディタで使用したりできることも उल्लेखされています。 ### Locofy のトークンシステムはどのように機能しますか？ 料金に関する FAQ では、デザインをフロントエンドコードに変換すると LDMtokens が消費され、プランを選択するとそれらがアカウントに付与されると説明されています。 ### 後からプランの変更や解約はできますか？ はい。料金に関する FAQ では、いつでもアップグレードまたはダウングレードでき、次の請求サイクル前に追加の LDMtokens を購入でき、ダッシュボードからキャンセルできると説明されています。Enterprise プランには年額請求が記載されています。 ## クイック情報 - **カテゴリ**: デザイン・トゥ・コード / 開発者向けツール - **主な入力**: Figma、Penpot、Adobe XD - **主な出力**: Web・モバイルアプリ向けのフロントエンドコード - **対応フレームワーク**: React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby - **ワークフロー**: プラグイン、CLI、MCP、URL からのインポート - **ソースドメイン**: locofy.ai