Convert Figma Designs to Jetpack Compose Code With This FREE Plugin 😱

Google's new Relay plugin for Figma takes your design's UI components and generates Jetpack Compose components for them, so you don't need to code them on your own. In this video I'll show you how this works.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/...
💻 Let me be your mentor and become an industry-ready Android developer in 10 weeks:
pl-coding.com/...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/...
Join this channel to get access to perks:
/ @philipplackner
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/phi...
You like my free content? Here you can buy me a coffee:
www.buymeacoff...

[@croptv7093]

Designers will not do these manipulations for us, and devs usually does not have write acces to figma design. Will look forward for updates.

[@zakishaikh2223]

at the moment you can copy screen you want to convert to compose in a new fig file and make changes.

[@anb4351]

Android studio should also include some sort of drag drop into compose, similar to xml. It really speed things up and is easier to visualize design.

[@SanusiAdewale]

Trust me you won't use it. As an iOS dev, we drag and drop with UIKit (androids xml), we can also drag and drop with SwiftUI (androids Jetpack Compose) but I've not seen any iOS developer dragging and dropping with SwiftUI

[@ubersticks]

Relay is friggin' magic... very cool and I hope for success. I too have reservations for now -- Relay is in alpha and is autogenerating code for relatively new Compose (which itself is just now settling down to stability), so that seems like a very brittle combination!
Using Figma+Relay for isolated UI components like a button makes sense, but the more complicated nested layouts like an entire Screen seem scary - the odds increase that you will need to perform some simple change or optimization to the Compose hierarchy (adding 'remember', state hoisting, etc.). That might be a quick and easy Kotlin change, but you should not edit the generated code. It could be difficult or impossible to change this back in Figma.

[@vengateshm2122]

Nice. From android dev summit you can summarize dev updates in your style.

[@jjhoninatan55sabadi]

The idea is nice... But the reality it's better to build a component by our own. The generated code it's not so good

[@jayshartzer844]

It's useful as a starting point and getting the attributes out. Plus the UX designers are forced to dimension their spacing correctly

[@jjhoninatan55sabadi]

@@jayshartzer844 agree. I hope it get better, to make it sealable and editable by devs

[@welovfree]

And also adds a lot probabilities for miscommunications between developers and designers. I think it seems like a lot of work to achieve something "simple".

[@Eyyuphan439]

That's rigth.

[@santyas]

What about that after 7 months?

[@DeLL116]

I'm getting negative feels about the generated code. Same thing with the constraint layout generated code. I always manually modified it.

[@ahmedaaoua4233]

that's why we use jetpack compose

[@M60studio]

Kinda cool for someone that just starts with compose

[@xomeluha5837]

Hi Phillip thanks for reading our mind. By the way is there any plugin to convert it into XML too.

[@umnikya7874]

I only saw 2 minutes and already put like, Philipp Lackner is quality waranty))

[@rajayush2524]

Is there some plugin that can do it in adobe xd as well ??

[@raghu1077]

Great video. Philip

[@PhilippLackner]

Glad you enjoyed it

[@snotyak7922]

This didn't work for my team. Our designs are somewhat complex, though if you have something as simple as two labels side-by-side and need text to be custimizable, Relay messes this up because Figma doesn't have a notion of widgets being constrained to edges of other widgets, so what happens here is Relay generates a Composable with two Labels in a coordinate system. This means when the left-most text is longer than it was in the Figma design, it will overlap the label adjacent to it. At the moment, it's much easier for us to just port the design manually.

[@whatsinaname1305]

cheers

[@novaart2297]

Hey philip can u teach us figma in next vids

[@ykalchev]

Thanks a lot man, another valuable content from you

[@adiyogi-thefirstguru5144]

Please need a video about Android Interview roadmap for experienced.

[@KaungPyaeSoneAung123]

waiting for this so longggg

[@sovrinfo]

Great video. Thanks!

[@riemer87]

Danke dir - very helpful!

[@hellosagar]

Thanks for sharing :)

[@kamanchomorgan9655]

please make video how to create widget using jetpack glance

[@mikec4220]

@PhillipLackner - what about a bottom navigation bar with animated icons?

[@mustafaammar551]

VERY COOL 👍👍👍👍
Thank you BRO

[@antaki93]

Thank you for the video. But writing code is much easier than all these actions. And I get an error while a build...

[@abhishekoza1240]

Which android studio theme are you use?

[@divyrajgida9683]

it's showing me ' Not a JSON Object: null ' in gradle build

[@dijanamatkovic3623]

You saved me with this 😅

[@danilsveticov6196]

Thanks

[@blackndmild246]

when i attempt to import my code over to android studio i am met with an SVG error, does anyone know how to solve this issue

[@Alex1tmacthebestnba]

is it possible that some tool or script exists for non composable projects?

[@mr.bubble1657]

Btw what's is your theme name ? I really love it but kind find it

[@PhilippLackner]

Xcode dark

[@jeromemarras1608]

ui-packages doesn't appear after clicking on 'Finish

[@ChocoByte]

Same issue

[@ntikomathaba2662]

Genius!

[@t0uchme]

Alot of efforts for basic stuff and like someone else said it's scary to use for complex designs and not good for back and forth between figma and android studio

[@jorgeandresdiaz0]

Do you have an available promo code for your Android course?

[@PhilippLackner]

currently not :)

[@KingFalla]

why is it such a long process to do? should be simple. not many people will like to use this

[@bro_chenzox]

Adobe will say soon how it's cool🤣

[@sabuvarghesethomas]

Wow

[@JagdishOnYT]

First comment: From Nepal guru

[@ahmetfarukcuha7793]

revoluation

[@maximooze3196]

Just liking the vid. 🫡