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..f61b8c41 100644 --- a/docs/ff-designer/index.md +++ b/docs/ff-designer/index.md @@ -156,7 +156,100 @@ 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. + +### 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 @@ -193,11 +286,7 @@ This method is best for structural, layout, or multi-element changes. To make a

-### 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. +You can also select a page and ask the AI to generate variations of it. This helps you quickly explore different design directions.
+
+

+ +:::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. @@ -396,3 +567,36 @@ To export the entire storyboard, open the top-left **FF Designer** menu and choo 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. ![export-single-screen.avif](imgs/export-single-screen.avif) + +## 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. + + +
+ +
+

\ No newline at end of file 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. + +
+ +
+

+ +