From 3b88f80f4259c34f354ca350d31668169dc6320f Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Fri, 31 Jan 2025 11:21:21 +0530 Subject: [PATCH 1/2] Update Adding Design System --- .../design-system/design-system.md | 93 ++----------------- docs/resources/projects/libraries.md | 2 +- 2 files changed, 10 insertions(+), 85 deletions(-) diff --git a/docs/ff-concepts/design-system/design-system.md b/docs/ff-concepts/design-system/design-system.md index fd35da5b..2d1a6fa6 100644 --- a/docs/ff-concepts/design-system/design-system.md +++ b/docs/ff-concepts/design-system/design-system.md @@ -45,52 +45,19 @@ To solve this issue, you can create a design system outlining common design guid ## Adding Design System +You can add a design system from the [Library](../../resources/projects/libraries.md) added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s). -To create your own design system: - -1. Open the **Theme Settings > Design System**. -2. Click **Create Design Library**. -3. Enter the **Design Library Project Name**. -4. Now you can configure the Colors, Typography & Icons, App Assets, NavBar & AppBar, and Theme Settings. -5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side). - -
- -
- +:::tip[possible use cases] -

+- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience. +- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation. +- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments. -6. To use the design system, open your project and navigate to **Theme Settings > Design System**. -7. Click on the **No Design System Selected**. -8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](../../resources/projects/how-to-collaborate-on-projects.md#sharing-a-project-with-an-organization) will also be available here. +::: -:::info -After selecting the design system, you can't change the Colors, Typography, and Theme Widgets. +To add a design system from a library, start by creating the design system in a new FlutterFlow project and [publishing it as a library](../../resources/projects/libraries.md#publishing-a-library). Next, [import](../../resources/projects/libraries.md#importing-a-library) that library into the project where you want to use the design system. Then, navigate to **Theme Settings > Design System** and click **No Design System Selected**. From the dropdown that appears, **Select a library** you’ve just imported to apply its design system to your project. -:::
-
-

- --- ## Loading Indicators diff --git a/docs/resources/projects/libraries.md b/docs/resources/projects/libraries.md index 9b698a7d..5f31644f 100644 --- a/docs/resources/projects/libraries.md +++ b/docs/resources/projects/libraries.md @@ -352,7 +352,7 @@ Yes, you can add and import a Marketplace project as a library.
How do libraries work with themes (design systems)?

-By default, the design system of the parent project takes precedence over the imported library's design system. If you want to use a library's design system, you must [**select or set the library in the Design System**](../../ff-concepts/design-system/design-system.md#use-library-as-design-system) page. +By default, the design system of the parent project takes precedence over the imported library's design system. If you want to use a library's design system, you must [**select or set the library in the Design System**](../../ff-concepts/design-system/design-system.md#adding-design-system) page.

From 9b4194611931df3abe62758fc215ca7d4fa1e9d1 Mon Sep 17 00:00:00 2001 From: pinkeshmars <71133091+pinkeshmars@users.noreply.github.com> Date: Tue, 25 Feb 2025 10:40:13 +0530 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Pooja Bhaumik --- docs/ff-concepts/design-system/design-system.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/ff-concepts/design-system/design-system.md b/docs/ff-concepts/design-system/design-system.md index 2d1a6fa6..e90eb83a 100644 --- a/docs/ff-concepts/design-system/design-system.md +++ b/docs/ff-concepts/design-system/design-system.md @@ -45,13 +45,13 @@ To solve this issue, you can create a design system outlining common design guid ## Adding Design System -You can add a design system from the [Library](../../resources/projects/libraries.md) added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s). +You can add a design system from the [Library](../../resources/projects/libraries.md) dependencies added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s). :::tip[possible use cases] - **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience. -- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation. -- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments. +- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design system library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation. +- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular platform based design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments. :::