From 4a28919a2d07557a262149d6913229f82524ddeb Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Fri, 22 May 2026 11:40:27 +0530 Subject: [PATCH] FF Designer: Integration Details --- docs/ff-designer/integrations/integrations.md | 96 ++++++++++++++----- 1 file changed, 71 insertions(+), 25 deletions(-) diff --git a/docs/ff-designer/integrations/integrations.md b/docs/ff-designer/integrations/integrations.md index 9135d1ba..c47185b3 100644 --- a/docs/ff-designer/integrations/integrations.md +++ b/docs/ff-designer/integrations/integrations.md @@ -9,47 +9,73 @@ keywords: [integrations, flutterflow designer, ai app design] # Integrations -You can connect FlutterFlow Designer with external AI agents and developer tools. This enables you to generate, edit, and inspect designs directly from your preferred coding or AI environment instead of working only inside the Designer UI. +You can connect FlutterFlow Designer with external AI agents and developer tools. This enables you to generate, edit, and inspect designs directly from your preferred AI environment instead of working only inside the Designer UI. -For example, you can use an agent like Claude or Gemini to open your design, make layout changes, add components, or iterate on styles just by describing what you want in natural language. +For example, you can use an agent like Claude or Codex to open your design, make layout changes, add components, or iterate on styles just by describing what you want in natural language. :::info[Prerequisites] Before using integrations, make sure the following are set up: -- [**FlutterFlow Designer Desktop App**](https://storage.googleapis.com/flutterflow-downloads/designer/macos/prod/flutterflow-designer-latest-macos.dmg) is installed (currently available only on macOS) -- **Agent MCPs** are installed via CLI. The install commands are: - - **Claude Code:** `npm install -g @anthropic-ai/claude-code` - - **Gemini CLI:** `npm install -g @google/gemini-cli` - - **Codex CLI:** `npm install -g @openai/codex` -- Supported **IDEs** are installed on your system. To download, use the official links: - - **Cursor:** [https://cursor.com/download](https://cursor.com/download) - - **Antigravity:** [https://antigravity.google/download](https://cursor.com/download) +- [**FlutterFlow Designer Desktop App**](https://storage.googleapis.com/flutterflow-downloads/designer/macos/prod/flutterflow-designer-latest-macos.dmg) is installed (currently available only on macOS) +- **Agent MCPs** are installed via CLI. The install commands are: + - **Claude Code:** `npm install -g @anthropic-ai/claude-code` + - **Gemini CLI:** `npm install -g @google/gemini-cli` + - **Codex CLI:** `npm install -g @openai/codex` +- Supported **IDEs** are installed on your system. To download, use the official links: + - **Cursor:** https://cursor.com/download + - **Antigravity:** [https://antigravity.google/download](https://cursor.com/download) ::: -To add integrations, go to the **Integrations** section inside FlutterFlow Designer. Here you will see available integrations under **Agent MCPs** (such as Claude Code, Gemini CLI) and **IDEs** (such as Cursor, Antigravity). Click **Install** next to any integration you want to use. +## Installation -Once installed, open the respective tool (for example, Claude Code). Start by asking something: +To add integrations, go to the **Integrations** section inside FlutterFlow Designer. Here you will see available integrations under **Agent MCPs** (such as Claude Code, Gemini CLI, and Codex) and **IDEs** (such as Cursor, Antigravity). Click **Install** next to any integration you want to use. -``` -Open FlutterFlow Designer tool, I want to make some changes. -``` +
+ +
+

+ +## Launch Agent -After the Designer context loads, describe the change you want. For example: +To launch an agent and update the design: -``` -Update the booking card layout to have a larger image and add a status badge. -``` +1. Open your design project and click the agent menu option in the top-right side. +2. Choose where you want to open the project, such as **Open in Claude Code**, **Open in Gemini CLI**, **Open in Cursor**, or **Open in Antigravity**. +3. Once the terminal opens, describe the change you want to make. For example, ask the agent to create more variations of a selected screen or modify the current design. +4. When the agent asks for permission to run a Designer MCP tool, approve the request so it can inspect and update the project. +5. Wait for the agent to complete the task. It will create or update frames inside your current design project. +6. Return to FF Designer and review the generated frames or changes. -The agent will connect to your Designer canvas, understand your project structure, and apply the requested changes directly. This allows you to iterate on designs faster without manually navigating the UI.