Flutter Design Guidelines

Recently, I started looking for a designer to align some design guidelines.

Icons

There are many icons in the app, and there are many default system icons. Many built-in material icons are also very beautiful, but in order to have a brand feeling, we decided to use our own icons. In the past, when developing native, we usually used PNG to place icon resources in different resolution folders. In Flutter, we can refer to Material Icons, convert all SVG icons into a TTF file, which is called an icon font. This can not only avoid the problem of resolution but also be compatible with the system’s Icon component when called. TTF also has its limitations, which require monochrome. If it is multicolor or third-party, consider using SVG directly, such as token icons often used in web3 products.

Colors

Colors are a very important module in the UI layer. If colors are not coordinated, the overall UI experience will be greatly reduced. Colors can be divided into several categories:

1. Colors with states, where states refer to normal disable press, etc.
2. Series of colors, such as grey1 to grey7
3. Text colors, such as primary, secondary, tertiary
4. Component colors, such as container, card, tab, button All of these must be defined and cannot be hard-coded in the code, nor can new colors be used casually. At the same time, apply the colors to the Flutter theme instead of using them directly.

Hierarchy

The hierarchical relationship between page elements should be determined at the beginning. Scaffold is the lowest level, and then there is the app bar/navigation bar/card, etc.

Text styles

Abstract the text styles used in the scene, and do not manually specify font weight/font size/font color each time it is used. Instead, use styles such as headline, display, title, body, label, subtitle, button, etc. Designers can put these styles in Figma comments.

Spacing

Confirm the values of padding and margin in specific scenarios with the designer at the beginning. If you sometimes see something not quite accurate, such as 9px, you should know to use the standard 8px instead of using whatever value.

Animation

Animations can be divided into several types:

1. GIF, not recommended
2. Video animation, also not recommended
3. Frame animation, similar to GIF, also not recommended
4. Code implementation animation, recommended, but consider the cost
5. Rive animation used on Flutter, recommended (not recommended to use Lottie on Flutter because of performance issues)