Skip to main content

Platform-specific configuration

FlowX.AI UI Designer provides platform-specific configuration and styling for components across Web, iOS, and Android platforms. Understanding platform differences and capabilities is essential for creating optimal user experiences.

Platform overview

Supported platforms

Web

Full Feature Support
  • Complete navigation area functionality
  • Zones with headers and footers
  • Wizard and single-page navigation
  • All UI component types supported

iOS

Mobile-Optimized
  • Basic navigation areas
  • Screen title configuration for navigation bar
  • Scrollable property for root card components
  • Platform-specific property overrides

Android

Mobile-Optimized
  • Basic navigation areas
  • Screen title configuration for navigation bar
  • Platform-specific property overrides
  • Material design considerations

Web platform features

Full Navigation Support: Web platform provides the most comprehensive navigation features.
Web-Exclusive Features:
  • Zones with headers and footers
  • Complete navigation hierarchy
  • Advanced navigation patterns
Zones with headers and footers are exclusively accessible in web configurations. They are not supported as navigation areas for mobile development.

Component support

Full Component Library: Web platform supports all UI component types without restrictions.

Mobile platform features

iOS platform specifics

  • Screen Configuration
  • Component Adaptations
iOS-Specific Properties:Screen Title: Set the screen title used in the navigation bar on mobile devices (available only when the card element is set as the root)Scrollable Property: Define the desired behavior of the screen, specifying whether it should be scrollable or not (default: true)
{
  "screenTitle": "User Profile",
  "scrollable": true
}

Android platform specifics

Android-Specific Features:Screen Title: Set the screen title used in the navigation bar on mobile devices (available only when the card element is set as the root)Material Design Considerations: Android components adapt to Material Design principles where applicable
Android Ecosystem:
  • Multiple screen sizes and densities
  • Different Android versions
  • Manufacturer-specific customizations
  • Hardware capability variations

Platform override system

Configuration hierarchy

1

Generic Settings

Base Configuration: Properties available cross-platform (Web, Android and iOS), serving as the default for all platforms.
2

Platform Overrides

Specific Customizations: Override generic settings for individual platforms to optimize user experience.
3

Preview and Testing

Visual Validation: Preview changes across platforms, keeping in mind that iOS and Android previews are estimates.

Implementing overrides

To configure platform-specific overrides:
1

Access Platform Settings

From the UI Designer navigation panel, select the Settings tab, then select the desired platform (Web, iOS, or Android).
2

Add Override

Click the ”+” button (next to β€œOverrides”) and select the type of override:
  • Properties: Override component properties (e.g., Title, Subtitle, Helper text)
  • Expressions: Override hide/show conditions
3

Configure Value

Enter the platform-specific value that differs from the generic setting.
4

Import/Export

Use the import/push functionality to share overrides between platforms when appropriate.

Available override types

  • Property Overrides
  • Expression Overrides
Common Property Overrides:
  • Title: Shorter titles for mobile displays
  • Subtitle: Platform-appropriate subtitles
  • Helper Text: Context-specific help information
  • Labels: Adapted for platform conventions
Example Use Case: Web title β€œComplete Application Process” β†’ Mobile title β€œComplete App”

Platform limitations and constraints

Component availability

Component TypeWebiOSAndroidNotes
Containerβœ…βœ…βœ…Full support across platforms
Cardβœ…βœ…βœ…Mobile has additional screen title property
Customβœ…βŒβŒWeb-only component
Form Elementsβœ…βœ…βœ…Full support with platform adaptations
Navigation Areasβœ…βš οΈβš οΈLimited on mobile (no headers/footers)
⚠️ = Limited functionality or platform-specific constraints
❌ = Not supported on platform
Limitations:
  • No zones with headers and footers on mobile
  • Limited navigation types (no wizard mode on mobile)
  • Simplified navigation hierarchy
  • Basic navigation areas only
Workarounds:
  • Use card-based layouts for mobile organization
  • Implement navigation through UI actions
  • Leverage platform-specific screen titles
Challenges:
  • Different navigation capabilities across platforms
  • Varying screen sizes and interaction methods
  • Platform-specific design conventions
Solutions:
  • Use generic settings as baseline
  • Apply strategic platform overrides
  • Test across all target platforms
  • Design for the most constrained platform first

Platform-specific best practices

Web platform optimization

Navigation Design

Leverage Web Capabilities:
  • Use full zone navigation with headers/footers
  • Implement wizard navigation for complex flows
  • Take advantage of larger screen real estate
  • Use single-page forms with card organization

Layout Strategy

Web-Specific Layouts:
  • Utilize horizontal space effectively
  • Implement complex grid layouts
  • Support both single-page and wizard navigation
  • Consider desktop interaction patterns

Mobile platform optimization

1

Screen Space Management

Mobile Constraints:
  • Smaller screen sizes require condensed content
  • Use shorter titles and labels
  • Prioritize essential information
  • Consider thumb-friendly interaction zones
2

Platform Integration

Mobile-Specific Features:
  • Configure screen titles for navigation bars
  • Set appropriate scrollable behavior (iOS)
  • Consider platform design conventions
  • Test on actual devices when possible
3

Content Adaptation

Mobile Content Strategy:
  • Use platform overrides for mobile-optimized text
  • Simplify complex interactions
  • Ensure touch targets are appropriately sized
  • Test with realistic content lengths

Testing across platforms

Preview limitations

Important: The preview generated in the UI Designer for iOS and Android platforms is an estimate meant to help you visualize how it might look on a mobile view. Actual device testing is recommended for production applications.

Testing Strategy

UI Designer Testing:
  • Use platform tabs to switch between Web, iOS, and Android views
  • Compare layouts and content across platforms
  • Validate platform overrides are applied correctly
  • Check navigation behavior differences
Cross-Platform Content:
  • Verify text fits within mobile constraints
  • Test with longest expected translations
  • Ensure critical information is visible on all platforms
  • Validate platform-specific features function correctly
Feature Validation:
  • Test navigation flows on each platform
  • Verify platform-specific components work as expected
  • Validate hide/show expressions across platforms
  • Test conditional styling behavior

Migration and maintenance

Platform updates

Override Management: Settings overrides can always be imported/pushed from one platform to another, making it easier to maintain consistency while allowing for platform-specific optimizations.

Maintenance best practices

1

Regular Testing

Test your interfaces across all target platforms regularly, especially after making changes to generic settings or platform overrides.
2

Documentation

Document platform-specific decisions and overrides to help team members understand the rationale behind platform differences.
3

Consistency Monitoring

Regularly review platform overrides to ensure they still serve their intended purpose and maintain overall design consistency.
Understanding platform-specific considerations helps you create interfaces that work well across all target platforms while taking advantage of each platform’s unique capabilities and respecting their constraints.