Le Répertoire des AgentsFR · EN · ES · JA · HI
ホーム › バイブコーディングと開発

“Figmaのモックアップはあるのに、コードにできない”

きれいなFigmaのモックアップを持ちながら、コードの前で止まってしまうデザイナーやプロジェクトオーナー向けです。デザインは準備完了、技術が足りません。

おすすめのエージェント: Locofy
💰 月額約0〜50 $(試せる無料トライアルあり)。 レベル: 中級 🌍 シンガポール 恒常的な無料版+有料プランの無料トライアル。Proは月額9 $から

Locofy(locofy.ai):Figmaのモックアップを、デプロイできる、きれいで構造化されたコード(React、HTML…)に変えるプラグインです。

仕組み

きっかけ: Figmaで画面を選んだとき — コンポーネントを分析し、構造化されたコードに変換します, すべての画面でテストできる、書き出し可能なインターフェース.

導入の手順

  1. FigmaにLocofyプラグインをインストールします。
  2. 変換する画面を選びます。
  3. AIがコードを生成します:結果をライブでプレビュー。
  4. プロジェクトに書き出すか、直接デプロイします。
⚠️ 注意点: Figmaのレイヤー名をきれいに付けてください:ファイルが整理されているほど、生成されるコードは良くなります。公開前にスマホでの表示を確認しましょう。
🔧 技術詳細
インストール
hybride — クラウドでホストされるBuilderとFigmaプラグイン(Locofy Lightning)に、ローカルツールを組み合わせ:生成コードの取得とマージのためのCLI、VS Code拡張機能、MCPサーバー。
前提条件
Locofyアカウント(Google、GitHub、メールで登録)と、共有URLまたはプラグイン経由でアクセスできるFigmaデザイン。CLIにはNode.js/npm(「npm install -g @locofy/cli」の後、「locofy login」と「locofy init」)。MCPには、Builderで同期されたプロジェクトと、プロジェクトごとに生成されるMCPトークン。
ハードウェア
non_applicable
セルフホスティング
部分的 — プラットフォームはLocofyがホストし続けますが、生成されたコードはユーザーのもので、自由にホストするために書き出せます(ZIP、GitHub同期、CLI、VS Code拡張機能)。プラットフォーム自体のオンプレミス展開:non_documente。
ライセンス
参照した公式条件ではプラットフォームのライセンスは未確認です。公式ページは、生成されたコードの完全な所有権がユーザーに残ることだけを明記しています。
APIと連携
API: 記載なし (参照した公式情報源では、製品の公開REST APIはドキュメント化されていません。) · SDK: 記載なし · CLI: はい — 公式CLI @locofy/cli:「locofy pull」で生成コードを取得し、ローカルコードに賢くマージ。その後、対話モードで自然言語による調整ができます。 · Webhooks: 記載なし · MCP: はい — Locofy MCP(@locofy/mcpパッケージ)が、mcp.jsonとプロジェクト固有のトークンを通じて、対応エディタやエージェント(Cursor、Claude Desktop/Code、GitHub Copilot、Windsurf、Gemini CLI)にプロジェクトを接続します。コンポーネントとファイルの取得ツールがドキュメント化されています。
モデル
独自の自社モデル「Large Design Models」(LDM)。数百万のデザインと製品で学習されたマルチモーダルでヒューリスティックなモデル——顧客のデータは使いません。個人キー(BYOK)とローカルモデル:non_documente。
データ
デザインはLocofyサービスに送られ、そのLarge Design Modelsで変換され、コードはBuilder、GitHub、ローカル環境(CLI/VS Code/MCP)へ返されます。Locofyは、顧客のデータをモデルの学習に使わず、生成されたコードの完全な所有権はユーザーに残ると宣言しています。Locofy側でのデザインとコードの保持:non_documente。
ドキュメント化された制限
消費量はLDMtokens(Lightning変換とAgentモードのプロンプト)で計測され、ダッシュボードの「Plan and Usage」ページで追跡されます(利用履歴と残高)。プランごとの数値化されたクォータ:参照した公式ページではnon_documente。
運用
ダッシュボードでの利用と請求の追跡(プラン、LDMtokensの履歴、請求書)。プロジェクトごとのMCPトークンは再生成・失効が可能で、有効期限を選択できます(1か月、または無期限)。SSO、RBAC、監査ログ:non_documente。

公式ソース:www.locofy.ai · www.locofy.ai · www.locofy.ai · www.locofy.ai · www.locofy.ai — 2026年11月1日に確認.

クイズで自分に合うエージェントを見つける →

よくある質問

Locofyの料金はいくらですか?

月額約0〜50 $(テスト用の無料トライアルあり)。永久無料版+有料プランの無料トライアル;Proは月額9 $〜。

Locofyは無料ですか?

はい、一部無料です。永久無料版+有料プランの無料トライアル;Proは月額9 $〜。

Locofyは使い始めるのが難しいですか?

レベル:中級。導入は4ステップで進みます。まず、FigmaにLocofyプラグインをインストールします。

Locofyを使うときに知っておくべき制限や注意点は何ですか?

Figmaのレイヤーには分かりやすい名前を付けましょう。ファイルが整理されているほど、生成されるコードの質が上がります。公開前にスマホ表示を確認してください。

この問題に使える他のエージェント

Lovable

アプリのアイデアはあるのに、コードが書けない

月額0〜25 $(Pro;チーム向けのBusinessは月額50 $から)。

Durable

コードに触らずにプロのショーケースサイトが欲しい

月額0〜25 $(Launch;Growは月額49 $)。

Cursor

AIと一緒にコードを書きたいけど、どこから始めればいいか分からない

月額0〜20 $から(Pro 20 $、年払いなら月額16 $;ヘビーユース向けにPro+ 60 $、Ultra 200 $)。

Vercel

アプリは自分のパソコンでは動くのに、オンラインに公開できない

月額0〜20 $(ほとんどのプロジェクトには無料プランで十分です)。

v0

アイデアを本物のWebインターフェースに変えたい

月額0〜20 $(試せる無料プランあり)。

あわせて見る

“アプリのアイデアはあるのに、コードが書けない” — Lovable“コードに触らずにプロのショーケースサイトが欲しい” — Durable“AIと一緒にコードを書きたいけど、どこから始めればいいか分からない” — Cursor

2026年11月1日に更新 — ディレクトリの新着情報.