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:

💻 Let me be your mentor and become an industry-ready Android developer in 10 weeks:

Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!

Join this channel to get access to perks:

Join my Discord server:

You like my free content? Here you can buy me a coffee:

[croptv]

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

[anb]

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.

[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.

[vengateshm]

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

[jjhoninatansabadi]

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

[Mstudio]

Kinda cool for someone that just starts with compose

[ahmedaaoua]

that's why we use jetpack compose

[DeLL]

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

[umnikya]

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

[snotyak]

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.

[adiyogi-thefirstguru]

Please need a video about Android Interview roadmap for experienced.

[xomeluha]

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

[novaart]

Hey philip can u teach us figma in next vids

[ykalchev]

Thanks a lot man, another valuable content from you

[rajayush]

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

[kamanchomorgan]

please make video how to create widget using jetpack glance

[antaki]

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

[mikec]

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

[divyrajgida]

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

[blackndmild]

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