Design systems have become the cornerstone of consistent and scalable app development. The creation of such a system is not without its hurdles, especially when working with a powerful framework like Flutter—which was the case for the CA24 Mobile banking app by Credit Agricole Bank Polska. From establishing design tokens to ensure consistent font and color usage throughout the app to embracing Flutter's inherent extensibility for widget customization, this article delves into the intricate process of building a cohesive design system for a large-scale Flutter project.
Establishing the Design Tokens
Fonts and Colors
Flutter's flexibility allows developers to define reusable design tokens, such as fonts and color schemes, in a coherent manner. The CA24 Mobile app utilized around 40 colors, all sourced from Figma and validated for brand compliance and contrast. Colors were managed through structures like CAColor and CAColorSchemeData, ensuring readability across light and dark themes, as well as variations between retail and business account themes.
Text Styles and Custom Classes
The design system also prioritized text styles, creating custom classes like CATextStyles with private constructors to manage the application's various typographic elements. This level of customization extended to other design elements such as box shadows, curves, and animation durations, ensuring a uniform appearance across the app.
Leveraging Atomic Design in Flutter
Adopting Brad Frost's Atomic Design methodology, the team at Efigence systematically constructed the UI from the ground up, starting with reusable atoms like icons and progressing to molecules and organisms that form significant, context-rich UI components. Such meticulous crafting of the design system allowed for the creation of easily identifiable and meaningful interface segments, fostering both visual coherence and functional clarity.
Navigating Ambiguity and Decision-Making
During development, ambiguity often led to conflicting interpretations of component functionalities. To avoid confusion and maintain clarity, the team established an Architecture Decision Log, updating specifications and documentation in Figma and code comments immediately after decisions were made.
Future-Proofing Components
Anticipatory design played a crucial role in ensuring the system's longevity. Forethought in design, such as preparing for dark mode implementation before specifications were even finalized, saved considerable time and resources. Additionally, incorporating flexibility into components allowed for adaptability to future changes without extensive refactoring.
Streamlining Navigation and Storybook Usage
Effective navigation within the design system was achieved with the aid of tools like Figma, which simplified locating component definitions and relevant details. Storybook significantly enhanced productivity, allowing for isolated widget development and component exploration, thus speeding up the design process.
Ensuring Effective Communication and Responsibility
Clear communication channels were essential in coordinating the efforts of designers and developers. The use of Markdown documentation and dedicated communication platforms like Teams ensured vital information circulation, while carefully delineated responsibilities within the design squad maintained order and efficiency in the codebase.
Tackling Technical Challenges Head-On
The project encountered various technical challenges, which necessitated careful tool selection. For instance, widgetbook was favored for its advanced features and collaborative capabilities, ultimately enhancing the workflow.
Summary: The Unified Vision
The cohesive creation of CA24 Mobile's design system required extensive coordination, an in-depth understanding of Flutter's capabilities, and a forward-thinking approach. The experience gleaned from this undertaking stands testament to the potential of well-constructed design systems to revolutionize app development in today's rapidly evolving digital landscape.
Overall, constructing a design system for a large Flutter project like the CA24 Mobile banking app involves meticulous planning, clear communication, and a deep understanding of both design and Flutter's capabilities. The end result is a library of reusable, consistent UI elements that can be easily navigated and adjusted for future development needs.
Tags: #Flutter, #DesignSystem, #MobileBankingApp, #AtomicDesign
https://leancode.co/blog/building-a-design-system-in-flutter-app