Added FF UI pages

Author: pinkeshmars

docs/intro/ff-ui/builder.md

@@ -0,0 +1,27 @@
+---
+slug: builder
+title: App Builder
+tags: []
+---
+
+# App Builder
+
+On opening the project, you'll see the App Builder, which consists of four main sections: Navigation Menu, Toolbar, Canvas, and Properties panel.
+
+![AppBuilder.avif](imgs/AppBuilder.avif)
+
+## 1. Navigation Menu
+
+The [Navigation Menu](navigation-menu) provides access to the project's widget palette, widget tree, storyboard, and features like Firestore, API calls, asset uploads, app values, integrations, custom functions, theme settings, and more.
+
+## 2. Tool Bar
+
+From [Tool Bar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.
+
+## 3. Canvas Area
+
+In the [Canvas Area](canvas), you can see a preview of your mobile device's screen and build your app page.
+
+## 4. Properties Panel
+
+The [Properties Panel](properties-panel) is present on the right side of the canvas. It displays all the properties you can customize for the selected widget or page.

docs/intro/ff-ui/canvas.md

@@ -0,0 +1,135 @@
+---
+slug: canvas
+title: Canvas
+tags: []
+---
+
+# Canvas 
+The Canvas shows the mobile device screen where you can add widgets by dragging and dropping them. You can select, move, and position widgets anywhere on the Canvas. 
+
+It allows zoom level adjustments and previews in light or dark mode. It also includes features for multi-language preview, adding AppBar and NavBar, simulating larger font visualization, and more.
+
+![CanvasArea.avif](imgs/CanvasArea.avif)
+
+## 1. Preview Screen
+
+This is the canvas of the device screen where you can build the user interface. You can customize the screen by adding widgets using drag and drop from the [Widget Palette](#) and by applying properties present in the [Properties Panel](#).
+
+## 2. Show or hide Navigation Menu
+
+From here, you can open or close the [Navigation Menu](#).
+
+## 3. Zoom Controls
+
+There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of the canvas. While working on complex user interface designs, this comes in handy to give you a better preview of the widgets by zooming in to a particular area and then zooming out to have an overview.
+
+## 4. AI Generated Page
+
+From here, you can [create a page using AI](#).
+
+## 5. Add AppBar
+
+From here, you can add an [AppBar](#) to your page. Clicking this button opens a popup displaying different [AppBar styles](#) for you to choose from. Just select any AppBar style from the list and it will appear in the Preview Screen.
+
+![AddAppBar.avif](imgs/AddAppBar.avif)
+
+## 6. Multi-Language Preview
+
+If you've enabled the multi-language feature for your project, you can use this to preview your app in different languages. Just select the language from the dropdown menu, and the text in your app will be translated accordingly.
+
+:::info
+This becomes really helpful in testing your app design with translated text without having you run your app.
+:::
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/ViB374dOSglo4Z1afa0o?embed&show_copy_link=true"
+        title="Sharing a Project with a User"
+        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>
+
+## 7. Dark/Light Mode
+
+This toggle lets you switch between light and dark mode in your app, allowing you to ensure your design looks great in both modes. This feature is only available if you've enabled dark mode support in your project.
+
+## 8. Display Device
+
+You can use this to show the device frame in the preview. This might come in handy if you want to visualize better or capture the user interface on a particular device.
+
+## 9. Display Resize Handle Bars
+
+Enabling the Resize Handle Bars will show the handle bards at the right and bottom sides of the preview screen. This allows you to change the size of the preview screen to better test your app on a screen with a custom resolution and the overall responsiveness of your app.
+
+## 10. Larger Font Visualization
+
+This enables you to simulate how your app appears when users adjust text scale or accessibility settings on their devices. It's vital for developing an app that's visually appealing and also accessible, especially for those requiring larger text sizes.
+
+## 11. Canvas Settings
+
+### 11.1 Safe Area
+
+When the safe area is enabled, it ensures that content isn't hidden behind physical features like camera notches, sensors, or rounded edges of the display. You can enable or disable it using the Safe Area switch.
+
+### 11.2 Resize Snapping
+
+When resizing a widget, you can snap its size to the specific pixel values or a percentage of the screen size. By default, it is set to 1 px. To change this, click here, ensure Resize Snapping is enabled, and enter the pixel or percentage value.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/1IOtwXpNus8W4dLgdHsm?embed&show_copy_link=true"
+        title="Sharing a Project with a User"
+        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>
+
+## 12. Add NavBar
+
+This button allows you to add the [NavBar](#) to your page. Clicking on this button opens the popup that allows you to enable NavBar for your project. Once the NavBar is enabled, you can customize it to match your design.
+
+![AddNavBar.avif](imgs/AddNavBar.avif)
+
+---
+
+## Video guide
+
+If you prefer watching a video tutorial, here's the one for you:
+<div class="video-container"><iframe width="760" height="428" src="https://www.youtube.com/embed/NDrte4nOXYc" title="The Canvas | FlutterFlow University" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+---