Tag: CarbonDesignSystem

Understanding the Importance of a Design System in Brand Consistency

Consistency Across Products

Design systems serve as comprehensive guides to maintain visual and functional harmony across various products of a brand. Without a design system, products built at different times, by different teams, and for different purposes can result in a disjointed appearance that can confuse users and dilute brand recognition.

Benefits of Design Systems

Time Savings and Efficiency

Using a design system can significantly accelerate the development process. By having a predefined set of design rules and components, teams can avoid starting from scratch for each project, ensuring faster and more efficient product development.

Decreased Errors

The standardization inherent in design systems can lead to a reduction in errors. With less variability, there's a decreased chance of design inconsistencies, leading to a more polished and professional end product.

Increased Satisfaction

Not only do design systems benefit the end-users by providing them with a coherent experience, but they also boost the satisfaction of the development and design teams. Clear guidelines and reusable components make the development process smoother and more enjoyable.

React Native and Design Systems

Applying a design system in React Native development brings the unique advantage of consistency across both iOS and Android platforms. This approach promotes a uniform app experience regardless of the device, enhancing the brand's coherent visual communication.

Specific Tools and Solutions

  • Storybook and Zeplin are collaboration applications that can facilitate the transition from designs to React Native code.
  • IcoMoon, Jest, and Styled-components are other tools that can be integrated within a React Native design system.
  • Patch-package and React-native-shadow address platform-specific difficulties, such as implementing custom shadow effects on Android devices where React Native's built-in capabilities fall short.
  • React-native-svg allows for the use of scalable vector graphics within React Native applications, essential for incorporating custom designs.

Documentation and Example Apps

To ensure that developers can make the best use of a design system, comprehensive documentation and example applications are crucial. These resources provide clear instructions on how to use the components and preserve design integrity.

Limitations in React Native

While React Native streamlines the development process, it does have its own set of challenges when it comes to design systems:

  • Dependency on Third-party Packages: Projects often rely on third-party packages, which can introduce complications if they are not well-maintained or fall out of compatibility with new updates.
  • Visual Regression Tests: Tools like Loki help with visual regression testing in React Native, which is essential for maintaining consistency, but can add complexity to the development workflow.
  • Complicated Charts: Implementing complex charts in React Native sometimes requires specific packages like victory-native, which might not always align perfectly with the design system.

Design Systems Beyond React Native

Netguru's experience extends beyond React Native to design systems implemented in React for web applications. Having the web and mobile platforms share the same design system fortifies the brand's consistency, ensuring that all components behave uniformly across different media.

The Power of a Design System

A design system is an invaluable tool for any organization looking to establish and maintain a strong, consistent brand identity. It simplifies the development process, reduces errors, and ensures that all products resonate with the brand's ethos, regardless of the platform.

Tags: #DesignSystem #BrandConsistency #ReactNative #MobileDevelopment #WebDevelopment

https://www.netguru.com/blog/design-systems-in-react-native

Building a Robust Design System for Flutter Mobile Banking Apps

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

Carbon for React Native: A Guide to the Carbon Design System

Carbon Design System is an open-source design system created by IBM for digital products and experiences. It provides a collection of reusable components, guided by clear standards, that can be assembled together to build applications.

What is Carbon for React Native?

Carbon for React Native is an extension of the Carbon Design System tailored specifically for mobile application development using React Native. It enables developers to use Carbon's design philosophy and components within their mobile apps, ensuring consistency and efficiency in design.

Key Features of Carbon for React Native

Carbon for React Native offers several key features for developers who want to implement the Carbon Design System in their React Native applications:

  • Pre-built Components: A set of ready-to-use components that can be easily integrated into React Native applications.
  • Customizable Themes: Support for light and dark themes, with the ability to customize colors to fit your brand.
  • Icon Library: A comprehensive set of icons provided by '@carbon/icons', suitable for mobile interfaces.

Getting Started with Carbon for React Native

To start using Carbon for React Native, you should first install the package using a package manager like npm or Yarn:

npm install -S @carbon/react-native
# or
yarn add @carbon/react-native

For iOS applications, you need to run pod install inside the ios directory of your React Native project.

Additionally, you'll need to ensure the following dependencies are installed and up to date:

  • @carbon/themes
  • @carbon/icons
  • @carbon/icon-helpers
  • react-native-svg
  • react-native-webview

Recommended Settings and Configuration

Carbon for React Native recommends certain configuration settings, such as adding the font assets to the react-native.config.js file and setting android:windowSoftInputMode="adjustPan" in your Android app to improve user experience.

Usage: React Native Components and Theming

The Carbon for React Native package makes using components straightforward. For instance, to use a Button component, you would import and implement it as follows:

import { Button } from '@carbon/react-native';

<Button kind="primary" text="My Button" onPress={() => {}} />;

The system also includes functions to work with themes and colors:

import { getColor } from '@carbon/react-native';

const styles = StyleSheet.create({
  example: {
    padding: 16,
    color: getColor('textPrimary'),
    backgroundColor: getColor('background'),
  },
});

Overriding Themes and Contributing

Carbon for React Native allows developers to override the default themes to customize color schemes and fonts according to their branding needs. Developers can also contribute to the system by following the Carbon Design System's contributing guide.

Licensing and Community

Carbon for React Native is released under the Apache-2.0 license, ensuring that it can be freely and reliably used in commercial projects. Furthermore, developers are welcome to the community and are encouraged to contribute. There is a continuous integration (CI) workflow in place to ensure that all contributions meet the required standards. Additionally, developers can chat and collaborate on Discord.

In summary, Carbon for React Native is a powerful tool for implementing the Carbon Design System in mobile applications, providing a wide range of components, customization options, and community support to create cohesive and user-friendly designs.

Tags: #CarbonDesignSystem, #ReactNative, #OpenSource, #UIComponents, #MobileDevelopment

https://github.com/carbon-design-system/carbon-react-native