FF Designer: Edit Visually + Import a single component + Has Expression

docs/ff-designer/index.md

@@ -156,24 +156,49 @@ For example, you might upload a rough wireframe of a food delivery app showing a
 
 ## Iterate Designs
 
-After generating your initial storyboard, you can refine and improve your screens in two ways: using AI prompts or directly editing components from the Properties panel. Both methods are useful depending on the type of change you want to make.
+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.
 
-### Use AI Prompt
+### Edit Visually
 
-This method is best for structural, layout, or multi-element changes. To make a change using AI Prompt:
+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.
 
-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.
+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.
 
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/baHBozUa0iwMy6WQON49?embed&show_copy_link=true"
+        src="https://demo.arcade.software/AcWFYJYNcqzMDoNEngxx?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+You can also rearrange elements using drag and drop. Simply select an element and move it to a new position within the layout.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/6EktGdKPOazdR6fwXFg5?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -193,7 +218,7 @@ This method is best for structural, layout, or multi-element changes. To make a
 </div>
 <p></p>
 
-### Use Properties Panel
+#### 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.
 
@@ -225,6 +250,42 @@ Unlike AI-driven changes, edits made here are exact and predictable, making it i
 </div>
 <p></p>
 
+
+### 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.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/baHBozUa0iwMy6WQON49?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
 ## 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.
@@ -344,6 +405,22 @@ To add a toggle, open your component and click **Add toggle** from the variants
 </div>
 <p></p>
 
+#### 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.
+
+![control-using-has-expression](imgs/control-using-has-expression.avif)
+
 ## 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.

docs/ff-integrations/designer/import-from-ff-designer.md

@@ -56,4 +56,34 @@ FlutterFlow will recreate the layout structure using real widgets, preserving hi
         allow="clipboard-write">
     </iframe>
 </div>
-<p></p>
+<p></p>
+
+To import a single component, copy the component’s root element and paste it into your widget tree.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/ls6ZG1o43pbinySRmzXV?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+