Export

Exporting to Android (Jetpack Compose)

Generate a Kotlin Compose project with Scaffold screens, a NavHost, and a Material 3 theme derived from your wireframe palette.

🤖 Export7 min read

What gets generated

📄

Composable screens

One .kt file per wireframe page, each a @Composable function wrapped in a Scaffold.

🧭

NavHost

A NavGraph.kt file with all routes derived from your canvas page-link connections.

🎨

Material 3 theme

Theme.kt with a ColorScheme built from your project's colour palette.

🔧

build.gradle

Pre-configured with Compose BOM, Navigation Compose, and Material 3 dependencies.

How to export

Open Export panel

In the builder top bar click Export → Android (Compose).

Set package name

Enter your Android package name (e.g. com.acme.myapp). This is used in all generated Kotlin files.

Select pages & download

Tick the pages to include and click Download .zip. Open the folder in Android Studio — it imports as a standard Gradle project.

Run on emulator

Press ▶ Run in Android Studio. The app launches with your wireframe screens navigable via the links you drew on canvas.

Generated file structure

File tree

app/src/main/java/com/acme/myapp/
├── MainActivity.kt
├── ui/
│   ├── theme/
│   │   ├── Theme.kt        ← Material 3 colour scheme
│   │   └── Type.kt         ← Typography scale
│   ├── navigation/
│   │   └── NavGraph.kt     ← NavHost with all routes
│   └── screens/
│       ├── HomeScreen.kt
│       ├── LoginScreen.kt
│       └── ProfileScreen.kt

Example generated screen

Kotlin — HomeScreen.kt

@Composable fun HomeScreen(navController: NavController) { Scaffold( topBar = { TopAppBar(title = { Text("Home") }) } ) { padding -> Column( modifier = Modifier .padding(padding) .fillMaxSize() .padding(24.dp), verticalArrangement = Arrangement.Center ) { Text( text = "Design faster, ship sooner", style = MaterialTheme.typography.headlineLarge ) Spacer(modifier = Modifier.height(16.dp)) Button( onClick = { navController.navigate("signup") }, modifier = Modifier.fillMaxWidth() ) { Text("Get started") } } } }

Element mapping

WireFlow canvas elements map to Compose composables as follows:

Text / Heading → Text(style = MaterialTheme.typography.*)
Button → Button or OutlinedButton
Input → OutlinedTextField
Image placeholder → Box with grey background + Icon(Icons.Default.Image)
Card / Rectangle → Card
Navbar → TopAppBar inside Scaffold
Bottom tab bar → NavigationBar in Scaffold's bottomBar slot

💡

Material 3 dynamic colour: If you enable Dynamic colour in export settings, Theme.kt will use dynamicLightColorScheme on Android 12+ and fall back to your wireframe palette on older versions.

⚠️

Minimum SDK: The generated project targets API 24 (Android 7.0) with Compose. If you need to support lower APIs, adjust minSdk in build.gradle and remove Compose — it requires API 21 minimum.