diff --git a/docs/ff-designer/imgs/control-using-has-expression.avif b/docs/ff-designer/imgs/control-using-has-expression.avif new file mode 100644 index 00000000..c0449397 Binary files /dev/null and b/docs/ff-designer/imgs/control-using-has-expression.avif differ diff --git a/docs/ff-designer/index.md b/docs/ff-designer/index.md index 9b2624ca..2f70bcc0 100644 --- a/docs/ff-designer/index.md +++ b/docs/ff-designer/index.md @@ -156,16 +156,13 @@ 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.
+
+

+ +You can also rearrange elements using drag and drop. Simply select an element and move it to a new position within the layout. + +
+ +
+

+ ## 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

+#### 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. diff --git a/docs/ff-integrations/designer/import-from-ff-designer.md b/docs/ff-integrations/designer/import-from-ff-designer.md index d5103824..511fd622 100644 --- a/docs/ff-integrations/designer/import-from-ff-designer.md +++ b/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"> -

\ No newline at end of file +

+ +To import a single component, copy the component’s root element and paste it into your widget tree. + +
+ +
+

+ +