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
   

   View Slide

2. View Slide

3. What and Why?
   

   View Slide

4. Good UI
   

   View Slide

5. Hand-off Problem :(
   

   View Slide

6. View Slide

7. View Slide

8. “Relay is a new UI toolchain for better
   designer-developer collaboration”
   

   View Slide

9. Design
   to Code!
   🤩
   

   View Slide

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
    

    View Slide

11. Preparation
    

    View Slide

12. Relay for
    Figma Plugin
    https://www.figma.com/community/plugin/1041056822461507786/Relay-for-Figma
    

    View Slide

13. Relay for
    Android Studio
    Plugin
    

    View Slide

14. Relay Gradle plugin
    

    View Slide

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.
    

    View Slide

16. ● Figma Plugin
    ● Android Studio Plugin + Personal Access
    Token
    ● Gradle Plugin
    

    View Slide

17. How-to
    

    View Slide

18. Create
    Figma Design
    

    View Slide

19. Open Plugins
    Right click → Plugins
    → Relay for Figma
    

    View Slide

20. Create
    UI Package
    Select component →
    Create UI Package
    

    View Slide

21. Add
    Other
    

    View Slide

22. Save
    version history
    

    View Slide

23. Import
    UI Package
    File → New → Import
    UI Package
    

    View Slide

24. Import
    UI Package
    File → New → Import
    UI Package
    

    View Slide

25. Ui Packages
    Include information about
    layout properties, font, image
    asset, and version
    

    View Slide

26. Speaker Image
    Placeholder
    Ui Packages
    Include information about
    ● layout properties
    ● font
    ● image asset
    ● version
    

    View Slide

27. View Slide

28. Generated File
    If not directly
    show, Make Project
    or Rebuild Project
    

    View Slide

29. View Slide

30. Call it!
    

    View Slide

31. Then, how to create dynamic data?
    

    View Slide

32. Content
    Parameter
    

    View Slide

33. Add Parameter
    Select component →
    Add parameter
    

    View Slide

34. Save version
    File → Save to version
    history… → Give name → Save
    

    View Slide

35. Update
    UI Package
    Right click on ui
    package → Update UI
    Package → Make project
    again to generate new
    code
    

    View Slide

36. Updated Generated code
    

    View Slide

37. Update Code
    with parameter
    

    View Slide

38. View Slide

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
    

    View Slide

40. What’s Next?
    

    View Slide

41. View Slide

42. View Slide

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

    View Slide