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

Convert Figma Design to Compose Code with Relay...

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. 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
  3. 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.
  4. Speaker Image Placeholder Ui Packages Include information about • layout

    properties • font • image asset • version
  5. Update UI Package Right click on ui package → Update

    UI Package → Make project again to generate new code