Findings24Findings24
Locofy.ai logo

Locofy.ai

認証する

Locofy.aiは、Figma、Penpot、Adobe XDのデザインをWeb・モバイル向けのフロントエンドコードへ変換。plugin、CLI、MCP、GitHub同期にも対応。

AIウェブデザインAI開発者ツールノーコード・ローコード
ウェブサイトを訪問
Locofy.ai preview

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 に同期したり、エディタベースのワークフローで使用したりするオプションも示されています。

主な機能

デザインからコードへの変換

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 を使用します。

Pros and Cons

Pros

  • Figma、Penpot、Adobe XD を含む複数のデザイン入力に対応しています。
  • デザイナー、開発者、AI 支援用途向けに複数のワークフローを提供しています。
  • 幅広いフロントエンドフレームワークとモバイル向けターゲットのコードを生成できます。
  • デザインシステムの再利用や、GitHub、エディタ連携などのコード同期パスをサポートしています。
  • オンプレミスまたはクラウド展開、SOC2/ISO の言及など、エンタープライズ向けの導入・セキュリティ面での位置づけがあります。

Cons

  • 提供されたテキストには、明確な価格、プランの上限、またはトライアルの詳細が公開されていません。
  • 対応出力やワークフローの詳細は幅広いものの、エッジケース、出力制約、レビュー要件についての情報は限定的です。

FAQ

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 プランには年額請求が記載されています。

Quick Facts

カテゴリ
デザイン・トゥ・コード / 開発者向けツール
主な入力
Figma、Penpot、Adobe XD
主な出力
Web・モバイルアプリ向けのフロントエンドコード
対応フレームワーク
React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby
ワークフロー
プラグイン、CLI、MCP、URL からのインポート
ソースドメイン
locofy.ai