Design System

A design system is a guideline to create a consistent UI/UX across the app. A design system includes colors, typography, fonts, icons, app assets, a nav bar, an app bar, and pre-designed UI components such as buttons and text widgets.

This is especially helpful when you are working in a team of builders and designers in a large company. Let's say you have an app with several different features and pages, each with its unique design. However, you notice that you are starting to create inconsistencies in the design across different pages, such as using different colors, fonts, and layouts.

To solve this issue, you can create a design system outlining common design guidelines. Then, the team members can use this design system, which ensures the design remains consistent.

Adding Design System

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).

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 will also be available here.

info

After selecting the design system, you can't change the Colors, Typography, and Theme Widgets.

---

Import Figma Theme

You might use Figma to design your app and build it accordingly in our builder. If you have a lot of colors and text styles, importing them manually can take some time. You can now import the whole Figma theme, which includes the colors and text styles, directly into our builder.

info

Before you import the Figma theme, ensure you have access to the Figma design file and generate the access token.

To import the Figma theme:

1. Open the Theme Settings > Design System.
2. Click the Import Figma Theme button. This will open a new popup.
3. Enter your Figma File URL and Personal Access Token. The Personal access tokens allow us to access all of your files and data in Figma.
4. Click Import Figma Theme.
   1. Now, you'll see a list of colors from your Figma file, and here you can decide which one to keep. If everything looks good to you, Click Import & Continue.
   2. You can replace the current theme colors with new/imported ones. Click on any color, and the dropdown will display all imported colors. Click on the new color to replace it. When done, click Save & Continue.
   3. If you have custom text styling in your Figma file, it will be displayed here, and you can choose which one to import. Click Import & Continue.
   4. Replace any existing style with the new one and click Save & Finish.
5. Finally, click Finish & Close.

If you prefer watching a video tutorial, here is the guide for you:

---

Loading Indicator

To customize the loading indicators used in the app, you can make changes in this section. You have the option to specify the Indicator Type, Color, and Radius, and the preview of the changes will be displayed below.

If you prefer watching a video tutorial, here is the guide for you:

---

Scrollbar Theme

From here, you can customize the appearance of the scrollbar that shows up on scrollable elements like ListView, GridView, StaggeredView, Row, and Column.

note

The scrollbar currently shows up by default only on platforms where Flutter natively supports it, such as web and desktop environments.

You can modify its color, adjust its thickness, give it a rounded border, and more. In the 'Preview' section, you'll also be able to see the immediate visual effect of your changes.

Here are all the properties you can customize:

1. Thumb Color: This changes the color of the draggable portion of the scrollbar, often called the "thumb".

   

2. Thickness: This increases width (in a vertical scrollbar) or height (in a horizontal scrollbar).

   

3. Border Radius: This sets the curvature of the scrollbar's corners. By adjusting the border-radius, you can give the scrollbar a more rounded appearance (higher values) or a more squared appearance (lower values).

   

4. Min Thumb Length: This refers to the smallest size that the draggable portion (thumb) of a scrollbar can be. This ensures that users can always see and interact with the thumb, even when the content is very long.

   

5. Main Axis Margin: This refers to the space or gap along the primary direction of the scrollbar. For instance, in a vertically scrolling list, it refers to the top and bottom spacing, and in a horizontally scrolling list, it refers to the left and right spacing.

   

6. Cross Axis Maring: This refers to the space or gap along the cross direction of the scrollbar. For instance, in a vertically scrolling list, it refers to the left and right spacing, and in a horizontally scrolling list, it refers to the top and bottom spacing.

   

7. Thumb Always Visible: This determines whether the draggable "thumb" element of the scrollbar constantly remains visible or fades out when not in use. When enabled, you can also specify whether to show the track as well with custom color and border color.

8. Interactive: Using this property, you can set different colors for different states of the thumb, including when it's hovered over or being dragged.

   

---

Pull to Refresh Style

From here, you can customize the appearance of the pull to refresh (i.e., the loading circle).

You can modify its color, background color, and stroke width. In the 'Preview' section, you'll also be able to see the immediate visual effect of your changes.

Colors

This section allows you to customize the colors of your app, giving you control over the visual appearance of your application. From here, you can configure colors for both light and dark themes. Additionally, you can preview existing theme colors, import colors from Coolors, and even extract colors from images.

Add or replace color

By default, we add 16 predefined colors for light and dark themes. However, you might want to add a new color or replace the existing color to align better with your brand identity.

To add a new color:

1. Click Add Color button.
2. The new color will be added as Custom Color. Click on it and enter the Hex color value.
3. You can also edit the name of the custom color.
4. Click Use Color.

To update an existing color in a light and dark mode theme, click on the color and enter the hex color value.

Explore Project Colors

We allow you to browse through the commonly used colors in your app and some pre-defined color schemes that might align with your app branding.

To do so:

1. Click on the Explore Project Colors.
2. Select page you want to preview.
3. To find common colors, scroll down and click Find Common Colors. This will list out all the colors being used in the app. Use the 'done' and 'cancel' icons to accept or reject colors.
4. To explore the pre-defined color schemes, switch to the Explore tab, scroll through all the schemes, and tick to see the preview.
5. Click the 'refresh' button to get back to the original theme.
6. To proceed further, click Save Changes.

Import from Coolors

Importing colors from Coolors website is a quick and easy way to add your preferred color scheme to your app. Coolors offers a vast library of color palettes that you can import with just a few clicks, saving you time and effort in creating your own custom color palette.

To import from Coolors:

1. Go to the coolors.co, identify the palette you would like to add, click on the options menu (three dots), and then click on the Export palette.
2. Now, select the Code, and then copy the contents below the /* Object */ section.
3. Open your project, and navigate to Theme Settings > Colors.
4. Click on the Import from Coolors button. This will open a new popup window.
5. Paste the copied content and then click Import. New colors will be displayed under the Custom Colors section.

Extract from Image

This feature provides an easy way to create visually striking themes by utilizing the colors present in an image. You can generate a color palette that harmonizes perfectly with the colors in the image, resulting in stunning designs that capture the essence of your image.

To extract and use color from the image:

1. Navigate to Theme Settings > Colors.
2. Click the Extract from Image button and select the image.
3. A pop-up will appear that displays the extracted color from the image. To proceed further, click Extract & Continue.
4. In the next step, click on any color to see and select the extracted color.
5. Click Done.

AI Generated Theme Colors

With 'AI Gen Theme,' simply describe the desired color theme for your app, such as 'Tiger in the Jungle' or 'Kids bedtime story,' and watch as a comprehensive color scheme tailored to your needs magically appears.

Video guide

If you prefer watching a video tutorial, here's the one for you:

Typography & Icons

This section puts you in complete control of your app's text styling. With options to add responsive and custom fonts, you can ensure your app looks unique and consistent across all screen sizes. Moreover, you can also add custom icons to your app, allowing you to create unique and visually appealing user interfaces.

Define Text Styles (Typography/Fonts)

To change the font family at the project level, open the Theme Settings (from the navigation menu) > Typography & Icons, click on the button below the Primary Font Family or Secondary Font Family, and search and select the new font.

info

The Primary Font Family is the font that you will use the most throughout your app. The Secondary Font Family is the font that you will use to serve slight variation or contrast to the primary font.

You can customize the following properties of each text style:

• Font Size - Use this to specify the size of the text.
• Letter Spacing - Use this to set the space between characters.
• Italic - Checkbox for enabling Italic font style.
• Font Weight Choose the font weight among Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.
• Color - Set the color of the text using either the color picker or by specifying a Hex value.
• Font Family - You can change the Font Family for any style from here. Click here to set the font family from Google Fonts or choose from the uploaded Custom Fonts. You can also choose whether this style is a Primary or Secondary Font Family.

Adding responsive text styles

When developing a mobile app, it's important to consider the different platforms on which it will run. You might notice that the text looks smaller on platforms with higher screen resolution, such as tablets, web, or desktops. This can impact the user experience and make your app difficult to read. To solve this issue, you can add responsive text that adjusts the font size based on the platform.

See how the texts are displayed with and without responsive font style:

With responsive Text

Without responsive text

You can add the responsive style by following the instructions below:

1. Open the Theme Settings (from navigation menu) > Typography & Icons.
2. Click on the Make Responsive button.
3. Now, all the styles are available under the three tabs. Mobile, Tablet, and Desktop. Modify each style under the different platform tabs that you are supporting.
4. Run the app and see how the texts are displayed by changing the platform.

Adding Custom Fonts

Adding Custom Fonts to your app makes it stand out from others. This section allows you to upload your own fonts. You can upload the custom font files of types .ttf, .otf, and .woff. Once the font is uploaded, you can use it directly from the widget or add it to the text style section to create a general theme.

info

Before you upload the Custom Fonts, make sure you have permission to use the font in your application.

To add the Custom Fonts:

1. Open the Theme Settings (from navigation menu) > Typography & Icons.
2. Scroll down to the Custom Fonts section.
3. Click on the + Add Font button.
4. Enter the Font Family Name and click the Upload File(s) button.
5. Select and upload your font.
6. Click Add Font. The newly added font will be displayed.
7. To use a custom font directly in a widget, move to the property panel, click on the already applied font family, select the Custom Fonts tab, and then choose the font.
8. To use a custom font for a common text style, open the Text Styles section, click on the already applied font family, select the Custom Fonts tab, and then choose the font.

If you prefer watching a video tutorial, here's the one for you:

Adding Custom Icons

Adding Custom Icons to your app helps you build the brand identity. Before you add the Custom Icons in FlutterFlow, you need to generate them from any icon generation site (like fluttericon and iconmoon) and export them using appropriate settings.

info

Make sure you have permission to use the icons in your application.

To add custom icons:

1. Head over to the iconmoon.
2. Import your custom icon (.svg) or select from the free icons set.
3. Select the Generate Font tab.
4. Click on the Settings button (gear icon) beside the download text on the bottom right side.
5. Enable Generate Dart class for Flutter.
6. Click on the Download button and then extract the downloaded file.

7. Open your FlutterFlow project, navigate to the Theme Settings (from navigation menu) > Typography & Icons.
8. Scroll down to the Custom Icons section.
9. Click on the + Add Icons button.
10. Click on the Upload Icon File button.
11. Select and upload .ttf file under the downloaded folder > fonts.
12. Now click on the Upload Icon Info button.
13. Select and upload the filename.dart under the downloaded folder (besides the fonts folder).
14. Click Add Icons.
15. To use a custom icon, add the Icon widget, move to the properties panel, and scroll down to the Icon section.
16. Click on the already selected icon, select the Custom Icons tab, and then select your icon.

If you prefer watching a video tutorial, here is the guide for you:

Theme Widgets

Creating a theme for widgets ensures that your app looks consistent and has a cohesive design. The Theme widgets can be reused, making it easy to update the styles of your app. If you decide to change any property of the widget, such as color scheme or fonts, you can update the theme widget instead of going through every widget individually. This can save a lot of time and effort, especially in larger projects.

For example, creating theme widgets for different types of buttons such as 'primary_button', 'secondary_button', and 'tertairy_button' with specific attributes like width, color, icon, border radius, and padding. Then, these widgets can be directly added to a page or applied to an existing widget.

Adding theme widgets

To add a theme widget to your app, you must create it and then use it on your page by dragging it from the Widget Palette or applying it to the existing widget.

Here's how you do it:

1. Open the Theme Settings (from the navigation menu) > Theme Widgets.
2. Click Create Widget button.
3. Enter the Theme Widget Name and then select the widget.
4. Create a theme for the widget using its properties available on the right side and then click Save.

5. You can also make any widget a theme widget by right-clicking and selecting Save as Theme Style Widget.

6. Now, you can add this widget directly from the widget tree or Widget Palette.

7. To apply this widget styling to an existing widget, select the widget, move the Properties Panel > Widget Styling > click Theme Style Unset > select the theme widget.

warning

After applying theme widget styling, any previously set properties will be overridden except the properties with Set from Variable. However, you are free to modify the existing widget properties as you like.

Video guide

If you prefer watching a video tutorial, here's the one for you:

FAQs

How is the theme widget different from creating a template and component?

The Theme Widget allows you to customize the visual appearance of a single widget, whereas templates consist of multiple widgets that create a unique UI layout with a specific purpose. On the other hand, components are fully-featured custom widgets that combine multiple widgets and actions to complete a task.