Convert Figma Design to Compose Code with Relay - DevFest Bandung 2022

Transcript

1. Convert Figma Design to Compose Code with Relay Ahmad Arif Faizin (@arif_faizin) Curriculum Developer, Dicoding Add Speaker Photo Here
3. What and Why?
4. Good UI
5. Hand-off Problem :(
8. “Relay is a new UI toolchain for better designer-developer collaboration”
9. Design to Code! 🤩
10. Speaker Image Placeholder Positive Things 1. The workflow is built with both designers and developers in mind 2. Constant collaboration to iterate and update more quickly 3. High-fidelity translation of layout & appearance (color, typography, shape, & flexible layout) 4. Dynamic data bindings and interaction design intent
11. Preparation
12. Relay for Figma Plugin https://www.figma.com/community/plugin/1041056822461507786/Relay-for-Figma
13. Relay for Android Studio Plugin
14. Relay Gradle plugin
15. Speaker Image Placeholder Figma Access Token 1. Go to Figma Settings 2. Personal access tokens section 3. Enter a token description, then token is generated. 4. In Android Studio, Go to Tools → Relay Settings. 5. Input Figma Access Token.
16. • Figma Plugin • Android Studio Plugin + Personal Access Token • Gradle Plugin
17. How-to
18. Create Figma Design
19. Open Plugins Right click → Plugins → Relay for Figma
20. Create UI Package Select component → Create UI Package
21. Add Other
22. Save version history
23. Import UI Package File → New → Import UI Package
24. Import UI Package File → New → Import UI Package
25. Ui Packages Include information about layout properties, font, image asset, and version
26. Speaker Image Placeholder Ui Packages Include information about • layout properties • font • image asset • version
28. Generated File If not directly show, Make Project or Rebuild Project
30. Call it!
31. Then, how to create dynamic data?
32. Content Parameter
33. Add Parameter Select component → Add parameter
34. Save version File → Save to version history… → Give name → Save
35. Update UI Package Right click on ui package → Update UI Package → Make project again to generate new code
36. Updated Generated code
37. Update Code with parameter
39. Resources • https://github.com/arifaizin/KedaiKopiCompose/tree/relay • https://developer.android.com/jetpack/compose/tooling/relay • https://relay.material.io/ • https://touchlab.co/under-the-hood-of-relay/ • Youtube : Building apps with Relay, Figma, and Jetpack Compose
40. What’s Next?
43. Instagram : @arif_faizin Medium : arifaizin.medium.com Hatur nuhun! Thank you!