An alternative way to build mobile app UI on EVERY major framework (Flutter, React-Native, SwiftUI, and Kotlin).
Currently the app building process works as follows:
- Create or get a figma design
- Spend hours writing the UI code to render that Figma design
- Run the app and tweak the UI as you are building it
- If the design changes, the cycle repeats from #2.
This process is accepted, and when I spoke about it, I was told to "copy paste my old code" to move faster and I should stop complaining.
But I don't like step 2 in the process above.
What if we could go from design directly to UI.
That's what I'm exploring with this framework.
The idea is:
- Design your UI in a canvas tool such as Figma.
- Then, you import and use the specific components or screens by referencing their name in the the design tool.
- We render it pixel-perfect using an open-source rendering runtime.
- Full onboarding flow with ExpressionUI
- Partial View Composition: Dialog and app bar
- Partial View Composition: Bottom Navigation
- Single Component Build
- Full View Design
- Responsive UI: Mobile, Tablet, Desktop, Watch
- ExpressionUI working in SwiftUI
- ExpressionUI working in React Native
- Scrollable Views with Composition
If you're interested in helping I would appreciate that. There are currently examples in this repo for Flutter, React Native, SwiftUI, and Kotlin.
I'm currently doing the Flutter parts, I would love for react-native, iOS native, Android native and all of those to be developed / researched at the same time.
Please reach out on Twitter and I'll add you to our Discord if you'd like to help explore this idea.
- examples: is where the examples will go for each of the frameworks named examples-[framework]
- packages: is where the packages will go for each of the frameworks names expression-ui-[framework]
- resources: readme images and gifs
These tasks are all related to the visuals and exploring how we can actually make the user interface work as expected.
-
Creating checkable boxes (up to 5) and update state in code
-
Bottom sheets (shoud be the same as normal UI)
-
Creating a long scrollable list view
-
Dynamically update text
-
Sync state with animation UI
-
Building multiple views and navigating between them
-
Building responsive UI's - PR
-
Building a design system and composing
-
Performing interactive gestures (Swipes)
-
Managing text input - Done in platform code for now
-
Works with a screen reader- Attempted but rive's single widget is making this difficult. Work infeat/screen-reader
These tasks are all related to improving the dev experience, majority of them will probably be code generation using dart cli (not the build_runner package).
The goal would be to read the open-source rendering runtime by rive and use it to improve the developers experience.
- Automatic binding of click events and callbacks
- Type safe referencing of all states, animations, events and artboards