Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Ahmad Arif Faizin

December 10, 2022
Tweet

More Decks by Ahmad Arif Faizin

Other Decks in Programming

Transcript

  1. Convert Figma Design to Compose Code with Relay Ahmad Arif

    Faizin (@arif_faizin) Curriculum Developer, Dicoding Add Speaker Photo Here
  2. None
  3. What and Why?

  4. Good UI

  5. Hand-off Problem :(

  6. None
  7. None
  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
  27. None
  28. Generated File If not directly show, Make Project or Rebuild

    Project
  29. None
  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

  38. None
  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?

  41. None
  42. None
  43. Instagram : @arif_faizin Medium : arifaizin.medium.com Hatur nuhun! Thank you!