diff --git a/docs/ff-designer/_category_.json b/docs/ff-designer/_category_.json
new file mode 100644
index 00000000..6234f65d
--- /dev/null
+++ b/docs/ff-designer/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Welcome",
+ "position": 1
+}
\ No newline at end of file
diff --git a/docs/ff-designer/components/_category_.json b/docs/ff-designer/components/_category_.json
new file mode 100644
index 00000000..32dc703e
--- /dev/null
+++ b/docs/ff-designer/components/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Components",
+ "position": 3
+}
\ No newline at end of file
diff --git a/docs/ff-designer/components/components.md b/docs/ff-designer/components/components.md
new file mode 100644
index 00000000..d99fb405
--- /dev/null
+++ b/docs/ff-designer/components/components.md
@@ -0,0 +1,143 @@
+---
+slug: /components
+title: Components
+description: Learn how to create reusable UI components, add variants and toggles, and manage dynamic behavior using parameters and expressions in FlutterFlow Designer.
+tags: [Components, FlutterFlow Designer, FlutterFlow, Design]
+sidebar_position: 0
+keywords: [FlutterFlow components, reusable UI, component variants, toggles, has expression, design system, UI components]
+---
+
+# Components
+
+A **component** is a reusable UI building block that you can use across your app design. Instead of creating the same UI again and again, you build it once as a component and reuse it wherever needed. This helps keep your app design consistent and easier to maintain.
+
+When you update a component, all places where it is used automatically get updated.
+
+Imagine you are having a settings screen with multiple rows, such as:
+
+- Notification toggle
+- Privacy option
+- Account settings
+
+Each row has a similar layout with an icon, text, and an action such as switch or arrow. Instead of having each row separately, you can create one **Settings Item component** and reuse it multiple times with different content.
+
+### Creating Component
+
+To create a new component, start by selecting an existing UI block on the canvas. Then click **Create Component** from the right-side panel, give your component a name, and choose the parameters you want to include (such as text, image, or icon). Once you confirm, the component is created and opens in Component Studio.
+
+Inside Component Studio, you can bind these parameters to different UI elements. Select an element, then connect its properties (like text or image) to a parameter from the right panel. You can also add new parameters if needed. This allows each instance of the component to display different content while keeping the same structure and design.
+
+
+
+
+
+
+:::tip
+
+Once the component is created, you can also use AI to quickly update your component by describing the changes instead of manually editing everything.
+
+:::
+
+### Create Variants
+
+A **variant** is a different version of the same component that allows you to change its appearance without creating a new component. Variants help you manage multiple styles, states, or layouts in one place to make your components more flexible and reusable. For example, a button component can have variants like **Filled** and **Outlined**.
+
+To create a variant, first open your component and click **Add variant**. This creates a new option for the current component, such as an alternate style or layout. Once the new variant appears, select it and customize its properties to make it visually different from the default version, such as changing borders, spacing, colors, or other styling details.
+
+If you want to introduce a completely new category of variation, click **+ Add variant** again to create a new dimension for the component.
+
+
+
+
+
+
+
+### Add Toggle
+
+A **toggle** lets you switch between two states of a component, such as on/off or active/inactive, within the same component. For example, a settings item can have a toggle to show **enabled** or **disabled** states, or a card can toggle between **selected** and **unselected** styles.
+
+To add a toggle, open your component and click **Add toggle** from the variants panel. This creates a new toggle dimension for your component. Once added, you’ll see two states (i.e., true/false). Select each state and customize the component to define how it should look in each case.
+
+
+
+
+
+
+#### The `Has` Expression
+
+The `Has` expression lets you automatically control a Boolean property based on whether a component parameter has been provided. This is useful when you want part of a component to appear only when data exists, without manually setting a separate true/false value each time.
+
+For example:
+
+- Show an image only when `image_url` is set
+- Show a subtitle only when `subtitle` is set
+- Show a time row only when `time` is set
+
+A `Has` expression checks whether a parameter contains a value. If it does, the result is `true`. If it does not, the result is `false`.
+
+Suppose you have a flight booking card component with an optional image on the right side. Instead of adding both `image_url` and a separate `show_image` flag, you can just use `image_url` and bind the **Visible** property to `has(image_url)`. If an image is provided, the card displays the image, and if not, it just appears as a text-only layout.
+
+
diff --git a/docs/ff-designer/imgs/control-using-has-expression.avif b/docs/ff-designer/components/imgs/control-using-has-expression.avif
similarity index 100%
rename from docs/ff-designer/imgs/control-using-has-expression.avif
rename to docs/ff-designer/components/imgs/control-using-has-expression.avif
diff --git a/docs/ff-designer/designing/_category_.json b/docs/ff-designer/designing/_category_.json
new file mode 100644
index 00000000..f8e6eb05
--- /dev/null
+++ b/docs/ff-designer/designing/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Designing",
+ "position": 2
+}
\ No newline at end of file
diff --git a/docs/ff-designer/designing/designing.md b/docs/ff-designer/designing/designing.md
new file mode 100644
index 00000000..aab6c8dd
--- /dev/null
+++ b/docs/ff-designer/designing/designing.md
@@ -0,0 +1,324 @@
+---
+slug: /designing
+title: Designing
+description: Learn how to generate and refine app designs using FlutterFlow Designer. Explore styles, use AI prompts, and visually edit layouts to quickly build complete UI experiences.
+tags: [FlutterFlow Designer, FlutterFlow, Design]
+sidebar_position: 0
+keywords: [FlutterFlow designing, AI UI builder, generate app design, explore styles, edit UI visually, design with prompts]
+---
+
+# Designing
+Get started by describing your app idea and generating your first set of screens. You can quickly explore design styles, refine layouts, and iterate on your UI visually or through prompts to shape your app experience.
+
+## Create Designs
+
+Here’s how you generate an initial screen design, refine, and export it:
+
+1. You can select [**Explore Styles**](#explore-styles) to first browse and refine design ideas, or choose **Instant Generation** to skip that step and quickly create designs from your prompt.
+2. Go to the **main prompt box** and write your app vision with important details (e.g., app type, target users, key screens, primary actions, and any must-have features). For example: *"Design a travel planning app with a modern card-based layout, destination image grids, a bottom navigation bar with Explore, Trips, Bookings, and Account tabs, saved itineraries, map integration, and a trip detail screen with timeline and booking information."*
+3. Optionally, [**attach an image**](#add-image-attachments) such as a sketch, wireframe, or screenshot using the image attachment button below the prompt field. The Designer will use it as a reference to transform it into a fully editable design.
+4. Use the mobile and desktop toggle to set your target platform. This ensures your designs are generated with the correct layout and screen dimensions for your intended device.
+5. Click the **submit** (up-arrow) button to generate your design storyboard.
+6. Review the generated screens. Scan through the generated frames to confirm:
+ - The right screens exist (and no critical screens are missing)
+ - The overall flow makes sense
+ - The UI direction matches your intent
+7. Select a screen to refine. You can [**use the prompt bar**](#use-ai-prompt) to request changes to the selected screen.
+8. You can also make precise tweaks from the [**Properties panel**](#use-properties-panel). Select an element and adjust its properties on the right side , such as text, typography, spacing, styling,.
+9. To add a new screen, click on an empty area of the canvas, then in the bottom prompt input, describe the screen you want to add. Include its purpose, key UI elements, and how it connects to the overall flow, then submit.
+10. Open the **Theme** tab to edit global styling like colors, typography, spacing, and radius so the entire design stays consistent.
+11. You can generate a **shareable link** for feedback and review.
+12. To export your design, open the top-left app menu (FF Designer) and choose an **export option**.
+
+
+
+
+
+
+### Explore Styles
+
+**Explore Styles** helps you try different visual directions for your app before generating the final design. Instead of going straight to a full build, you can first browse style variations, compare layouts, adjust colors, and guide the design toward the look you want.
+
+This is useful when you already know what your app should do, but want help deciding how it should look.
+
+Once the styles are generated, browse through the generated variants and look for the one that feels closest to your vision. Each style gives you a different take on the same app idea, such as a different layout, spacing, typography, or visual mood.
+
+When you hover over a style, you can use the following options:
+
+- **Regenerate**: Recreates the style if something looks off or needs improvement.
+- **More Like This**: Generates more variations similar to the selected style.
+- **Remix Colors**: Keeps the overall style but changes the color palette.
+- **Prompt for Changes**: Lets you describe specific updates you want for that style.
+- **Use This Style**: Selects that style and starts the full generation process.
+
+
+
+
+
+
+### Add Image Attachments
+
+You can attach reference images directly in the prompt to guide the design generation process. This is useful when you have an existing sketch, low-fidelity wireframe, competitor screenshot, or inspiration design that you want the Designer to follow.
+
+To do so, simply click the image attachment button below the prompt field and upload your image. The AI will analyze the layout, visual hierarchy, and structure, then transform it into a clean, fully editable multi-screen design.
+
+For example, you might upload a rough wireframe of a food delivery app showing a home screen with a search bar, restaurant cards, and a bottom navigation bar. Along with the image, you can add a prompt such as “Using the attached screenshot as a reference, convert this wireframe into a modern food delivery app design.”
+
+
+
+
+
+
+## Iterate Designs
+
+After generating your initial storyboard, you can refine and improve your screens in two ways: [editing visually](#edit-visually) on the canvas and [using AI prompts](#use-ai-prompt). Each method is useful depending on the type of change you want to make.
+
+### Edit Visually
+
+This is useful when you want precise control over layout and structure. It makes it easy to quickly add or adjust elements exactly where you want them.
+
+To start, click on any UI element in the canvas. The selected element will be highlighted, and small dots will appear around it. You can click any of these dots to add a new UI element at that position. When you click a dot, a selector pop-up opens, allowing you to choose and insert a new element.
+
+
+
+
+
+
+You can also rearrange elements using drag and drop. Simply select an element and move it to a new position within the layout.
+
+
+
+
+
+
+#### Use Properties Panel
+
+The Properties Panel allows you to make precise adjustments to any selected widget. When you click on an element in the canvas, its editable properties appear on the right side. From there, you can modify properties such as text content, typography settings, spacing, alignment, colors, borders, and other styling attributes. This gives you direct control over how each element looks and behaves without needing to regenerate the entire screen.
+
+Unlike AI-driven changes, edits made here are exact and predictable, making it ideal for polishing the design once the overall layout and structure are already in place.
+
+
+
+
+
+
+
+### Use AI Prompt
+
+This method is best for structural, layout, or multi-element changes. To make a change using AI Prompt:
+
+1. Click on the screen (frame) you want to update from the canvas or Frames panel.
+2. Use the prompt bar at the bottom to clearly describe what you want to modify.
+3. If you’re not satisfied with the result, use the regenerate option to explore a new variation of the same instruction.
+4. You can click directly on a widget. The selected widget will automatically be added to the prompt bar as context for your next instruction, allowing more precise AI updates.
+
+
+
+
+
+
+You can also select a page and ask the AI to generate variations of it. This helps you quickly explore different design directions.
+
+
+
+
+
+
+## Edit Theme
+
+Editing a **Theme** allows you to modify the global design system of your entire storyboard at once. Instead of adjusting individual widgets, you can change core styling elements such as brand colors, typography, spacing, corner radius, and text scaling. Any updates made in the Theme Editor automatically apply across all screens, ensuring visual consistency without manual updates on each page.
+
+
+
+
+
+
diff --git a/docs/ff-designer/getting-started/_category_.json b/docs/ff-designer/getting-started/_category_.json
new file mode 100644
index 00000000..87121b81
--- /dev/null
+++ b/docs/ff-designer/getting-started/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Getting Started",
+ "position": 1
+}
\ No newline at end of file
diff --git a/docs/ff-designer/getting-started/ff-designer-quickstart.md b/docs/ff-designer/getting-started/ff-designer-quickstart.md
new file mode 100644
index 00000000..966a7a5e
--- /dev/null
+++ b/docs/ff-designer/getting-started/ff-designer-quickstart.md
@@ -0,0 +1,78 @@
+---
+slug: /flutterflow-designer-quickstart
+title: Quickstart
+description: Get started with designing your first app quickly.
+tags: [FlutterFlow Designer, FlutterFlow, Design, Quickstart]
+sidebar_position: 0
+keywords: [flutterflow designer, ai app design, screen storyboard generation, ui design tool]
+---
+
+# Quickstart
+
+FF Designer lets you generate complete app designs from simple text prompts. Just describe what you want to build, explore different style directions, and the Designer will create a full set of screens for you. From there, you can refine the design using AI or manual editing and export it directly to continue building.
+
+Ready to design your app? Simply:
+
+1. Open FF Designer and click the prompt bar that says **Describe your app**
+2. Enter your app idea and press **Enter** to generate designs
+3. Browse style variants and click **Use This Style**
+4. Review the generated screens in the canvas
+5. Edit using AI or manually adjust elements and properties
+6. Export your design to FlutterFlow, PNG, or Agent Prompt
+
+The Designer generates complete app screens in seconds, giving you a strong starting point that you can quickly refine and turn into a real app.
+
+
+
+
+
+
+
+## Sample Prompts
+
+Here are some prompts you can try in FF Designer to quickly generate complete app designs.
+
+### Personal Finance Tracker
+
+**Prompt**
+
+Design a personal finance app that helps users track expenses and manage budgets. Show a dashboard with total balance, recent transactions, and spending categories. Include detailed views for transaction history and budget insights. Make the UI clean, modern, and easy to understand.
+
+
+
+### Fitness Workout App
+
+**Prompt**
+
+Create a fitness app with a home screen showing daily workouts, progress stats, and streaks. Include workout detail screens with exercises, sets, and timers. Make the design energetic, modern, and easy to follow.
+
+
+
+### Food Delivery App
+
+**Prompt**
+
+Design a food delivery app with a home screen showing nearby restaurants, categories, and featured items. Include restaurant detail pages, menu listings, and a checkout flow. Make the UI modern, colorful, and easy to navigate.
+
+
diff --git a/docs/ff-designer/getting-started/imgs/finance-app.avif b/docs/ff-designer/getting-started/imgs/finance-app.avif
new file mode 100644
index 00000000..7158f3c5
Binary files /dev/null and b/docs/ff-designer/getting-started/imgs/finance-app.avif differ
diff --git a/docs/ff-designer/getting-started/imgs/fitness-tracking-app.avif b/docs/ff-designer/getting-started/imgs/fitness-tracking-app.avif
new file mode 100644
index 00000000..616334ab
Binary files /dev/null and b/docs/ff-designer/getting-started/imgs/fitness-tracking-app.avif differ
diff --git a/docs/ff-designer/getting-started/imgs/food-delivery-app.avif b/docs/ff-designer/getting-started/imgs/food-delivery-app.avif
new file mode 100644
index 00000000..69a522a7
Binary files /dev/null and b/docs/ff-designer/getting-started/imgs/food-delivery-app.avif differ
diff --git a/docs/ff-designer/getting-started/workspace.md b/docs/ff-designer/getting-started/workspace.md
new file mode 100644
index 00000000..25c509dc
--- /dev/null
+++ b/docs/ff-designer/getting-started/workspace.md
@@ -0,0 +1,27 @@
+---
+slug: /workspace
+title: Workspace
+description: Learn about FlutterFlow Designer's workspace that provide a complete design environment with specialized tools.
+tags: [FlutterFlow Designer, FlutterFlow, Design, Workspace]
+sidebar_position: 0
+keywords: [flutterflow designer, ai app design, screen storyboard generation, ui design tool]
+---
+
+# Workspace
+
+The workspace is organized into panels that work together to provide a complete design experience.
+
+
+
+- **Frames Panel**: Displays all screens of the app and allows quick navigation between them.
+- **Components Panel**: Create reusable UI elements.
+- **Theme Panel**: Make global theme customization.
+- **Layers Panel**: Shows the hierarchical structure of widgets within the selected screen.
+- **Canvas Area**: Visual preview of all screens in storyboard layout.
+- **Undo/Redo Controls**: Quickly revert or reapply recent design changes.
+- **Light/Dark Mode Toggle**: Switch between light and dark preview modes to instantly see how your design adapts across themes.
+- **Zoom Controls**: Adjust zoom level for better overview or detailed editing.
+- **Share Button**: Share the current design or collaborate with others.
+- **Properties Panel**: Edit properties of the selected widget such as layout, content, and styling.
+- **Prompt Bar**: Use AI commands to describe changes and modify the selected screen or widget.
+
diff --git a/docs/ff-designer/import-export/_category_.json b/docs/ff-designer/import-export/_category_.json
new file mode 100644
index 00000000..062c651f
--- /dev/null
+++ b/docs/ff-designer/import-export/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Import & Export",
+ "position": 5
+}
\ No newline at end of file
diff --git a/docs/ff-designer/imgs/export-all.avif b/docs/ff-designer/import-export/imgs/export-all.avif
similarity index 100%
rename from docs/ff-designer/imgs/export-all.avif
rename to docs/ff-designer/import-export/imgs/export-all.avif
diff --git a/docs/ff-designer/imgs/export-single-screen.avif b/docs/ff-designer/import-export/imgs/export-single-screen.avif
similarity index 100%
rename from docs/ff-designer/imgs/export-single-screen.avif
rename to docs/ff-designer/import-export/imgs/export-single-screen.avif
diff --git a/docs/ff-designer/import-export/import-export.md b/docs/ff-designer/import-export/import-export.md
new file mode 100644
index 00000000..61ee98da
--- /dev/null
+++ b/docs/ff-designer/import-export/import-export.md
@@ -0,0 +1,67 @@
+---
+slug: /import-export
+title: Import & Export
+description: Learn how to import screens from FlutterFlow into Designer and export your designs as assets, prompts, or directly back into FlutterFlow.
+tags: [Import, Export, FlutterFlow Designer]
+sidebar_position: 0
+keywords: [Import from FlutterFlow, export design, FlutterFlow Designer export, UI handoff, design to FlutterFlow, export frames PNG, agent prompt export]
+---
+
+# Import & Export
+
+## Import from FlutterFlow
+
+Importing from FlutterFlow allows you to bring your existing app screens directly into the Designer environment. Instead of rebuilding UI from scratch, you can enhance layouts, explore new styles, and refine user experience faster. This is especially helpful when you want to modernize an existing app, experiment with different design directions, or quickly generate improved versions of your current screens.
+
+To import screens from FlutterFlow, select **Export to Designer** from the canvas menu options, then choose the pages you want to send in the export dialog. Once selected, click the export button to transfer them. After the process completes, the selected pages will open in FF Designer, where you can continue customizing and iterating on them.
+
+
+
+
+
+
+
+
+## Export Design
+
+Once your screens are finalized, you can export your design for implementation. FlutterFlow Designer provides flexible export options depending on whether you want static assets, reusable prompts, or direct integration into FlutterFlow.
+
+### Export Options
+
+- **Export Frames as PNGs:** Download high-quality PNG screenshots of your frames. This is ideal for adding to documentation, or presenting visual concepts.
+- **Export Agent Prompt:** Download an agent-ready prompt as a Markdown file. This allows you to reuse the generated design structure as context in AI workflows or modify it further using natural language instructions.
+- **Export to FlutterFlow:** Copy all frames directly to your clipboard for pasting into a FlutterFlow project. Simply select a widget on a FlutterFlow project page and paste to import all your design instantly.
+
+### Export Whole Design
+
+To export the entire storyboard, open the top-left **FF Designer** menu and choose one of the export options (PNGs, Agent Prompt, or FlutterFlow). This method is best when your full flow is ready for implementation.
+
+
+
+### Export Individual Frames
+
+To export a single frame, select a specific frame and use the **Export** section in the right panel. Use this when you only need to implement a particular screen.
+
+
+
diff --git a/docs/ff-designer/index.md b/docs/ff-designer/index.md
index f61b8c41..31543afe 100644
--- a/docs/ff-designer/index.md
+++ b/docs/ff-designer/index.md
@@ -1,13 +1,15 @@
---
-slug: /designer
-title: FlutterFlow Designer
-description: Generate, refine, and export multi-screen app designs using AI-powered prompts, visual editing tools, and automatic theming.
-tags: [designer, export, flutterflow]
+slug: /welcome
+title: Welcome
+description: Discover FlutterFlow Designer—the fastest way to design apps. Explore its key features, understand how it works, and start designing your first app with ease.
+tags: [FlutterFlow Designer, FlutterFlow, Design]
sidebar_position: 0
-keywords: [flutterflow designer, ai app design, screen storyboard generation, ui design tool, export to flutterflow, design to code, auto theming, multi screen design]
+keywords: [flutterflow designer, ai app design, screen storyboard generation, ui design tool]
---
-# FlutterFlow Designer
+# Welcome to FlutterFlow Designer
+
+**The Fastest Way to Design Apps**
The FlutterFlow [**Designer**](https://designer.flutterflow.io/) is an AI-powered app design tool that lets you generate UI screens from natural language prompts. It creates high-quality, editable UI layouts in seconds, so you can design a user interface quickly and iterate visually before building the full app.
@@ -19,584 +21,25 @@ FlutterFlow Designer helps you with:
Because FlutterFlow Designer is built to quickly turn ideas into fully editable designs, it empowers both non-technical creators and development teams to move faster during early UX and UI exploration.
-
-
-- **Frames Panel**: Displays all screens of the app and allows quick navigation between them.
-- **Theme Panel**: Make global theme customization.
-- **Layers Panel**: Shows the hierarchical structure of widgets within the selected screen.
-- **Canvas Area**: Visual preview of all screens in storyboard layout.
-- **Undo/Redo Controls**: Quickly revert or reapply recent design changes.
-- **Light/Dark Mode Toggle**: Switch between light and dark preview modes to instantly see how your design adapts across themes.
-- **Zoom Controls**: Adjust zoom level for better overview or detailed editing.
-- **Share Button**: Share the current design or collaborate with others.
-- **Properties Panel**: Edit properties of the selected widget such as layout, content, and styling.
-- **Prompt Bar**: Use AI commands to describe changes and modify the selected screen or widget.
-
-## Create Designs
-
-Here’s how you generate an initial screen design, refine, and export it:
-
-1. You can select [**Explore Styles**](#explore-styles) to first browse and refine design ideas, or choose **Instant Generation** to skip that step and quickly create designs from your prompt.
-2. Go to the **main prompt box** and write your app vision with important details (e.g., app type, target users, key screens, primary actions, and any must-have features). For example: *"Design a travel planning app with a modern card-based layout, destination image grids, a bottom navigation bar with Explore, Trips, Bookings, and Account tabs, saved itineraries, map integration, and a trip detail screen with timeline and booking information."*
-3. Optionally, [**attach an image**](#add-image-attachments) such as a sketch, wireframe, or screenshot using the image attachment button below the prompt field. The Designer will use it as a reference to transform it into a fully editable design.
-4. Use the mobile and desktop toggle to set your target platform. This ensures your designs are generated with the correct layout and screen dimensions for your intended device.
-5. Click the **submit** (up-arrow) button to generate your design storyboard.
-6. Review the generated screens. Scan through the generated frames to confirm:
- - The right screens exist (and no critical screens are missing)
- - The overall flow makes sense
- - The UI direction matches your intent
-7. Select a screen to refine. You can [**use the prompt bar**](#use-ai-prompt) to request changes to the selected screen.
-8. You can also make precise tweaks from the [**Properties panel**](#use-properties-panel). Select an element and adjust its properties on the right side , such as text, typography, spacing, styling,.
-9. To add a new screen, click on an empty area of the canvas, then in the bottom prompt input, describe the screen you want to add. Include its purpose, key UI elements, and how it connects to the overall flow, then submit.
-10. Open the **Theme** tab to edit global styling like colors, typography, spacing, and radius so the entire design stays consistent.
-11. You can generate a **shareable link** for feedback and review.
-12. To export your design, open the top-left app menu (FF Designer) and choose an **export option**.
-
-
-
-
-
-
-### Explore Styles
-
-**Explore Styles** helps you try different visual directions for your app before generating the final design. Instead of going straight to a full build, you can first browse style variations, compare layouts, adjust colors, and guide the design toward the look you want.
-
-This is useful when you already know what your app should do, but want help deciding how it should look.
-
-Once the styles are generated, browse through the generated variants and look for the one that feels closest to your vision. Each style gives you a different take on the same app idea, such as a different layout, spacing, typography, or visual mood.
-
-When you hover over a style, you can use the following options:
-
-- **Regenerate**: Recreates the style if something looks off or needs improvement.
-- **More Like This**: Generates more variations similar to the selected style.
-- **Remix Colors**: Keeps the overall style but changes the color palette.
-- **Prompt for Changes**: Lets you describe specific updates you want for that style.
-- **Use This Style**: Selects that style and starts the full generation process.
-
-
-
-
-
-
-### Add Image Attachments
-
-You can attach reference images directly in the prompt to guide the design generation process. This is useful when you have an existing sketch, low-fidelity wireframe, competitor screenshot, or inspiration design that you want the Designer to follow.
-
-To do so, simply click the image attachment button below the prompt field and upload your image. The AI will analyze the layout, visual hierarchy, and structure, then transform it into a clean, fully editable multi-screen design.
-
-For example, you might upload a rough wireframe of a food delivery app showing a home screen with a search bar, restaurant cards, and a bottom navigation bar. Along with the image, you can add a prompt such as “Using the attached screenshot as a reference, convert this wireframe into a modern food delivery app design.”
-
-
-
-
-
-
-## Iterate Designs
-
-After generating your initial storyboard, you can refine and improve your screens in two ways: [editing visually](#edit-visually) on the canvas and [using AI prompts](#use-ai-prompt). Each method is useful depending on the type of change you want to make.
-
-### Edit Visually
-
-This is useful when you want precise control over layout and structure. It makes it easy to quickly add or adjust elements exactly where you want them.
-
-To start, click on any UI element in the canvas. The selected element will be highlighted, and small dots will appear around it. You can click any of these dots to add a new UI element at that position. When you click a dot, a selector pop-up opens, allowing you to choose and insert a new element.
-
-
-
-
-
-
-You can also rearrange elements using drag and drop. Simply select an element and move it to a new position within the layout.
-
-
-
-
-
-
-#### Use Properties Panel
-
-The Properties Panel allows you to make precise adjustments to any selected widget. When you click on an element in the canvas, its editable properties appear on the right side. From there, you can modify properties such as text content, typography settings, spacing, alignment, colors, borders, and other styling attributes. This gives you direct control over how each element looks and behaves without needing to regenerate the entire screen.
-
-Unlike AI-driven changes, edits made here are exact and predictable, making it ideal for polishing the design once the overall layout and structure are already in place.
-
-
-
-
-
-
-
-### Use AI Prompt
-
-This method is best for structural, layout, or multi-element changes. To make a change using AI Prompt:
-
-1. Click on the screen (frame) you want to update from the canvas or Frames panel.
-2. Use the prompt bar at the bottom to clearly describe what you want to modify.
-3. If you’re not satisfied with the result, use the regenerate option to explore a new variation of the same instruction.
-4. You can click directly on a widget. The selected widget will automatically be added to the prompt bar as context for your next instruction, allowing more precise AI updates.
-
-
-
-
-
-
-You can also select a page and ask the AI to generate variations of it. This helps you quickly explore different design directions.
-
-
-
-
-
-
-## Components
-
-A **component** is a reusable UI building block that you can use across your app design. Instead of creating the same UI again and again, you build it once as a component and reuse it wherever needed. This helps keep your app design consistent and easier to maintain.
-
-When you update a component, all places where it is used automatically get updated.
-
-Imagine you are having a settings screen with multiple rows, such as:
-
-- Notification toggle
-- Privacy option
-- Account settings
-
-Each row has a similar layout with an icon, text, and an action such as switch or arrow. Instead of having each row separately, you can create one **Settings Item component** and reuse it multiple times with different content.
-
-### Creating Component
-
-To create a new component, start by selecting an existing UI block on the canvas. Then click **Create Component** from the right-side panel, give your component a name, and choose the parameters you want to include (such as text, image, or icon). Once you confirm, the component is created and opens in Component Studio.
-
-Inside Component Studio, you can bind these parameters to different UI elements. Select an element, then connect its properties (like text or image) to a parameter from the right panel. You can also add new parameters if needed. This allows each instance of the component to display different content while keeping the same structure and design.
-
-
-
-
-
-
-:::tip
-
-Once the component is created, you can also use AI to quickly update your component by describing the changes instead of manually editing everything.
-
-:::
-
-### Create Variants
-
-A **variant** is a different version of the same component that allows you to change its appearance without creating a new component. Variants help you manage multiple styles, states, or layouts in one place to make your components more flexible and reusable. For example, a button component can have variants like **Filled** and **Outlined**.
-
-To create a variant, first open your component and click **Add variant**. This creates a new option for the current component, such as an alternate style or layout. Once the new variant appears, select it and customize its properties to make it visually different from the default version, such as changing borders, spacing, colors, or other styling details.
-
-If you want to introduce a completely new category of variation, click **+ Add variant** again to create a new dimension for the component.
-
-
-
-
-
-
-
-### Add Toggle
-
-A **toggle** lets you switch between two states of a component, such as on/off or active/inactive, within the same component. For example, a settings item can have a toggle to show **enabled** or **disabled** states, or a card can toggle between **selected** and **unselected** styles.
-
-To add a toggle, open your component and click **Add toggle** from the variants panel. This creates a new toggle dimension for your component. Once added, you’ll see two states (i.e., true/false). Select each state and customize the component to define how it should look in each case.
-
-
-
-
-
-
-#### The `Has` Expression
-
-The `Has` expression lets you automatically control a Boolean property based on whether a component parameter has been provided. This is useful when you want part of a component to appear only when data exists, without manually setting a separate true/false value each time.
-
-For example:
-
-- Show an image only when `image_url` is set
-- Show a subtitle only when `subtitle` is set
-- Show a time row only when `time` is set
-
-A `Has` expression checks whether a parameter contains a value. If it does, the result is `true`. If it does not, the result is `false`.
-
-Suppose you have a flight booking card component with an optional image on the right side. Instead of adding both `image_url` and a separate `show_image` flag, you can just use `image_url` and bind the **Visible** property to `has(image_url)`. If an image is provided, the card displays the image, and if not, it just appears as a text-only layout.
-
-
-
-## 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.
-
-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.
-
-:::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)
-:::
-
-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.
-
-Once installed, open the respective tool (for example, Claude Code). Start by asking something:
-
-```
-Open FlutterFlow Designer tool, I want to make some changes.
-```
-
-After the Designer context loads, describe the change you want. For example:
-
-```
-Update the booking card layout to have a larger image and add a status badge.
-```
-
-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.
-
-
-
-
-
-
-:::tip
-For IDE-based integrations, you can interact via **Agent Mode** inside the IDE.
-:::
-
-## Edit Theme
-
-Editing a **Theme** allows you to modify the global design system of your entire storyboard at once. Instead of adjusting individual widgets, you can change core styling elements such as brand colors, typography, spacing, corner radius, and text scaling. Any updates made in the Theme Editor automatically apply across all screens, ensuring visual consistency without manual updates on each page.
-
-
-
-
-
-
-
-## Export Design
-
-Once your screens are finalized, you can export your design for implementation. FlutterFlow Designer provides flexible export options depending on whether you want static assets, reusable prompts, or direct integration into FlutterFlow.
-
-### Export Options
-
-- **Export Frames as PNGs:** Download high-quality PNG screenshots of your frames. This is ideal for adding to documentation, or presenting visual concepts.
-- **Export Agent Prompt:** Download an agent-ready prompt as a Markdown file. This allows you to reuse the generated design structure as context in AI workflows or modify it further using natural language instructions.
-- **Export to FlutterFlow:** Copy all frames directly to your clipboard for pasting into a FlutterFlow project. Simply select a widget on a FlutterFlow project page and paste to import all your design instantly.
-
-### Export Whole Design
-
-To export the entire storyboard, open the top-left **FF Designer** menu and choose one of the export options (PNGs, Agent Prompt, or FlutterFlow). This method is best when your full flow is ready for implementation.
-
-
-
-### Export Individual Frames
-
-To export a single frame, select a specific frame and use the **Export** section in the right panel. Use this when you only need to implement a particular screen.
-
-
-
-## Import from FlutterFlow
-
-Importing from FlutterFlow allows you to bring your existing app screens directly into the Designer environment. Instead of rebuilding UI from scratch, you can enhance layouts, explore new styles, and refine user experience faster. This is especially helpful when you want to modernize an existing app, experiment with different design directions, or quickly generate improved versions of your current screens.
-
-To import screens from FlutterFlow, select **Export to Designer** from the canvas menu options, then choose the pages you want to send in the export dialog. Once selected, click the export button to transfer them. After the process completes, the selected pages will open in FF Designer, where you can continue customizing and iterating on them.
-
-
+ width: '100%',
+ marginBottom: '2rem'
+}}>
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/ff-designer/integrations/_category_.json b/docs/ff-designer/integrations/_category_.json
new file mode 100644
index 00000000..3391738f
--- /dev/null
+++ b/docs/ff-designer/integrations/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Integrations",
+ "position": 4
+}
\ No newline at end of file
diff --git a/docs/ff-designer/integrations/integrations.md b/docs/ff-designer/integrations/integrations.md
new file mode 100644
index 00000000..cb3d8cb8
--- /dev/null
+++ b/docs/ff-designer/integrations/integrations.md
@@ -0,0 +1,74 @@
+---
+slug: /integrations
+title: Integrations
+description: Connect FlutterFlow Designer with AI agents and developer tools to generate, edit, and update designs using natural language from your preferred environment.
+tags: [Integrations, FlutterFlow Designer, FlutterFlow, Design]
+sidebar_position: 0
+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.
+
+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.
+
+:::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)
+:::
+
+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.
+
+Once installed, open the respective tool (for example, Claude Code). Start by asking something:
+
+```
+Open FlutterFlow Designer tool, I want to make some changes.
+```
+
+After the Designer context loads, describe the change you want. For example:
+
+```
+Update the booking card layout to have a larger image and add a status badge.
+```
+
+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.
+
+
+
+
+
+
+:::tip
+For IDE-based integrations, you can interact via **Agent Mode** inside the IDE.
+:::
diff --git a/src/css/custom.css b/src/css/custom.css
index 6ec11a7c..e43be52d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -185,7 +185,7 @@ a.menu__link {
}
.theme-doc-sidebar-menu
- > li.theme-doc-sidebar-item-link-level-1:not(.theme-doc-sidebar-item-category):nth-of-type(-n+4)
+ > li.theme-doc-sidebar-item-link-level-1:not(.theme-doc-sidebar-item-category):nth-of-type(-n+10)
> a.menu__link { color: var(--sidebar-level1-color) !important;
font-weight: 600 !important;
}