​
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.

​
Component Support

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

​
Mobile Platform Features

​
iOS Platform Specifics

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

​
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

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

​
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

​
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.