Using Jetpack Compose to Create Apps From Figma UI Sketches
summary
Lunchbox pulls JSON from Figma API and parses it with Moshi into lightweight structures, then renders UI with Jetpack Compose by mapping layer IDs to composables. An annotation processor generates a when/jump-table to wire dynamic components (click handlers, view models, lists) into static Figma layouts; collection views feed typed item data into repeated templates. The demo shows runtime Figma edits, horizontal/vertical lists, Google Maps Android view interop, and working click state—enough to run CI-driven, server-side UI updates.
AI-written summary · about
chapters (11)
- 0:00Introduction and setup
- 1:14Problem and solution overview
- 3:40Figma API and Compose basics
- 6:51Rendering text from Figma
- 7:34Auto Layout and linear layouts
- 11:45Custom layout implementation
- 17:26Adding interactive buttons
- 23:28Handling lists and data flow
- 32:37Live demo and Figma changes
- 36:26Capabilities and limitations
- 38:54Acknowledgments and Q&A
related talks
01h 12mJetpack Compose — live coding declarative UI
29mSuper fast Jetpack Compose with Relay
31mDesigning Media Friendly Jetpack Compose Components
33mA page out of Server driven UI on Android
41mA page out of Server driven UI on Android
32mJetpack Compose — Next Gen Kotlin UI Toolkit for Android
44mUnleashing the Power of Jetpack Compose: Revolutionizing Android UI Development
01h 00mJetpack Compose - Next Gen Kotlin UI Toolkit for Android