This New AI Tool Codes your Figma Designs - Kombai

-- Today, we're going to check out a brand new AI tool that I discovered this morning. Before recording, I haven't actually used it before. I wanted to share my initial thoughts regarding this tool that will take your Figma designs and code them.

0:00 - Intro
0:57 - The Designs
2:51 - Design 1
4:25 - Design 2
5:10 - Design 3
6:33 - React Live Browser Preview 1
7:52 - React Live Browser Preview 2
9:39 - My thoughts

Let's get started!

#ai #uiux #uidesign

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Make sure to stick around near the end where I show a full layout's code at 7:52 and my thoughts thereafter. All in all, it's quite impressive but doesn't quite nail everything.

[reflectingwithry]

Do you have any tips or videos dealing with handing off designs to developers?

I work at a tech company where we build apps and it seems that every time a developer builds my not-so-complex layout, things aren’t quite right and I have to sit down 1 on 1 with them and help them correct their CSS. Is there a better way to hand things off so they get it right the first time?

[mahfuzurrahmanmunna]

Cool stuffs. But one thing i am worried about, I'm a Level 5 front-end developer (the level is from your previous vid) and an UI/UX designer, but the rapid advancement of AI in this field is making me anxious. Any advice to overcome this fear? Stick to my current path or consider something else? Or should I focus only one field.

Also Waiting for your advanced Front-end course !. Thanks in advance.

[frogman]

It appears there was a top layer div with a comment in html when you were in dev tools at 7:45 that says "used only for top most container for width" and then a fixed width of 1440px (the amount in Figma im assuming). So it was fixing that width, I wonder since they appear to be using solid code as a base if everything is then posititioned absolutely within this container, or if its assumed there will be some user work after to make it responsive UNDER this width? Interesting nonetheless!

[frankdrolet]

It's not even close to being usable for real, companies still need devs to check the code, add javascript, and make it responsive, adjust the SEO, accessibility, all the backend stuff

[vikingzeppelin]

I imagine you are suppose to train a Kombai model to remember what data you are most likely going to use and need. Ais take time to train with prompt engineering. I think the Ai watches us too. which can be good if it learns what i need and want.

[talielnussen]

I want to learn UI.

Can your course take me from 'no knowledge ' to 'really employable'?

Don't have the fee, but I'm saving for it

[snowandcoal]

Waiting for similar tool that creates or styles WordPress blocks and Webflow templates.

[kylepitocchelli]

Where do folks stand on tools like this and Framer using position absolute for so much of the layout?

[lmd]

looks super interesting but I couldnt get the app to load, just kept spnning

[jweb]

this is sort of scary as a react dev

update : lol the actual design, the easiest one it f'd up niceee lol

[patgodfrey]

It needs accessible content semantics. Maybe, if visual designers named every semantic Figma layer to HTML conventions then the output could go beyond div vomit. In the meantime, I envisage early adopters like entrepreneurs thinking this is ace now. The Internet will receive another helping of visual ableism.

On the other hand, it’s barely even an infant. Teach it to transcribe inclusive content semantics and maybe it’ll be useful.

Teach it to create an inclusive layout in Figma from a business and content brief, have reviewed and align it to an approved content system, then transcribe to inclusive live code, and we can cut out the people who usually mess up the Web 😂

Better yet, cut out Figma. With all the techniques, time, and and hacks designers consume when they may as well use that effort to learn to at least drag and drop semantic HTML.

No. Second thoughts. Let’s train the Ai to do it. We could all do with more time to binge Netflix 🎉

[crazykidscomedy]

Front end developers are watching and waiting 😢

[mahfuzurrahmanmunna]

First comment. Watching the video while commenting :D great vid till now 😁

[oyegokeamina]

The way youtuber are putting the fear of Ai in to our heart is like the way parents put the fear of God in their children. Ai will just take over human because we now have robots' pilot 😂 😂 so we the developer won't be the only one jobless

[edunjobiemmanuel]

I refuse to agree that AI is slowly taking over we techies