Design System
A design system is a guideline to create a consistent UI/UX across an 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:
Open the Theme Settings (from the navigation menu) > Design System.
Click Create Design Library.
Enter the Design Library Project Name.
Now you can configure the App Details, App Assets, NavBar & AppBar, and Theme Settings.
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).
To use the design system, open your project and navigate to Theme Settings > Design System.
Click on the No Design System Selected.
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.
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.
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:
Open the Theme Settings (from the navigation menu) > Design System.
Click the Import Figma Theme button. This will open a new popup.
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.
Click Import Figma Theme.
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.
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.
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.
Replace any existing style with the new one and click Save & Finish.
Finally, click Finish & Close.
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 that 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:
Thumb Color: This changes the color of the draggable portion of the scrollbar, often called the "thumb".
Thickness: This increases width (in a vertical scrollbar) or height (in a horizontal scrollbar).
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).
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.
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 would refer to the top and bottom spacing, and in a horizontally scrolling list, it would refer to the left and right spacing.
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 would refer to the left and right spacing, and in a horizontally scrolling list, it would refer to the top and bottom spacing.
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.
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.
FAQs
Last Updated Date: April 11, 2024
Last updated
