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.
⌘I