Visual Copilot Converts Figma Mocks to React Fast and Accurately

Рет қаралды 79,248

Күн бұрын

Пікірлер: 121

@ВладиславВитковский-п8н 10 ай бұрын

This mock-up is veeery simple, first of all. And come one guys, already one year ago it was able to create working apps by photo. I do not underestimate AI and it will be able to write code ( and that is 20% of my working day), but if we are talking about complexity and real problem solving it is nowhere nearer to replace even a copywriter or content creator (at least for now😂). And I will let myself a chance to predict the future of it and say that it’s going to reach it plato in a year or two. Soon we won’t be frustrated but happy that it is here .

@tebesvet Ай бұрын

Yeah, you're completely right. These tools create garbage code not possible to maintain and scale. Also, I'm pretty sure Pagespeed Insights scores would be around 20% if you build a website with an AI tool.

@_jeff.medeiros 9 ай бұрын

Your script was the thing I actually liked the most, nice content Jack!

@darenbaker4569 10 ай бұрын

This is awesome sharing this tomorrow with the team, thanks so much.

@Dylan_thebrand_slayer_Mulveiny 10 ай бұрын

Figma is so damn good. We replaced Photoshop with it years ago and it's made our development process SO much better.

@lutfiikbalmajid 4 ай бұрын

who use photoshop nowadays? we replaced Photoshop to Figma, and Illustrator & PPT with Canva 😅

@tebesvet Ай бұрын

The video is not about Figma.

@Dylan_thebrand_slayer_Mulveiny Ай бұрын

@@tebesvet You need to read the title of the video again.

@tebesvet 20 күн бұрын

@@Dylan_thebrand_slayer_Mulveiny you need to re-read it as well.

@Dylan_thebrand_slayer_Mulveiny 20 күн бұрын

@@tebesvet "Visual Copilot Converts Figma Mocks to React Fast and Accurately" Do you not see the word Figma in that title?

@anisdragan 10 ай бұрын

Hi Jack, fantastic work, Your explanation and insights were really helpful. I noticed a slight issue with some background noise, particularly noticeable on the right audio channel during quieter moments. It's a minor thing but thought to mention it in case it's helpful for future videos. Thanks for the great content!

@jherr 10 ай бұрын

Thanks!

@JF7SWE 10 ай бұрын

This is actually pretty good. The issue with most tools that generate code is the semantic aspect of it but the "Quality" mode is actually alright. Gives you a good starting point.

@axelsomerseth 4 ай бұрын

Great content. I will try it out next week. It will help me a lot with the HTML of a platform that I am building

@last.journey 9 ай бұрын

You would still have to turn it into dynamic code and that is the point actually

@ujolmaharjan2010 10 ай бұрын

Omg I'm currently converting figma mockup to react on my current job.😅

@jherr 10 ай бұрын

It's free! Give it a go!

@romansernato6526 10 ай бұрын

looks like a good solution for nocode like bs enthusiasts

@mostafahamid9479 10 ай бұрын

nice one, really handy

@letmeplaygames2466 10 ай бұрын

great video thanks

@sharqyyem 10 ай бұрын

Amazing job as always 👏 thanks for sharing. Can make it generate components if it was created in Figma.

@jherr 10 ай бұрын

Yeah, that's the whole point. You could generate block by block to create components. Or do whole pages as I did here. Your call.

@Thassalocracy 10 ай бұрын

I'm surprised Steve Sewell hasn't thumbs up-ed this video yet 😅

@darkmift 6 ай бұрын

Use skeleton loaders its better UI and you don't need to worry about manipulating the resources.

@VLADICA94KG 8 ай бұрын

Can you create a video on setting up the terminal to look like yours? It is useful and advanced. Thanks for the great content!

@thith_thin 10 ай бұрын

Super cool 🎉

@nickname123321 10 ай бұрын

Great, time to look for a new job.

@jherr 10 ай бұрын

Nah. Still tons do to AFTER the conversion. And the conversions are never perfect with any of the tools I've tried.

@davestockley8174 10 ай бұрын

they took ma jeeeeerb

@jherr 10 ай бұрын

My guess is that there is a lot more to your job than laying out HTML and CSS.

@davestockley8174 10 ай бұрын

True true. But it's all billable hours

@anubisai 10 ай бұрын

@@davestockley8174 trash approach to life

@gmailuser5780 9 ай бұрын

what a nice forest view from windows of your home)

@zb4238 10 ай бұрын

🕶Keep up Jack

@jamesfoley4426 10 ай бұрын

Jack, what's your go to eccom stack? Have you ever thought about a video series on the JackStack EccomPack to make a FatStack?

@jherr 10 ай бұрын

Good question. I don't really have one. I looked at Saleor a while back, and Shopify of course. Normally the choice is already made. If I do merch it'll probably be either the merch vendor or Stripe.

@durgeshjhalwa6639 9 ай бұрын

🎉🎉🎉

@alltechneedscom7658 10 ай бұрын

Adobe came out with this like 10 yrs ago with jsx scripting language in photoshop

@tebesvet Ай бұрын

I've just tried out this plugin (Builder io) and another one (Figma to Code) on a relatively simple Figma design. To be honest the results were awful. Figma to Code was completely useless as it hardcoded lots of values with Tailwind JIT notation. I'm not even sure it would speed up the development process somehow because most of the code would need to be thrown away and written from scratch. These tools make a bad precedent though making employers believe that writing HTML/CSS is super simple work that even a robot could do.

@JustThinkingAboutIt-i5k 5 ай бұрын

When I design in Figma, I create mobile, tablet and desktop frames. I may use one component for say ‘pricing’ and it has 3 variants. I use modes and variables to make the right variant work for each frame size i.e. mobile, tablet, desktop. How do I use Visual Copilot to use my responsive work in Figma?

@lukasoliveira73 7 ай бұрын

figma is awesome

@samsuriahmad2128 10 ай бұрын

Fast for slicing 😂😂😂❤

@yuur1440 10 ай бұрын

The script not work for me :( TypeError: Cannot read properties of null (reading '1')

@hermann95 10 ай бұрын

Seems like it's best for building basic components with it, to get a baseline and help with the boring stuff.

@djcardwellai 10 ай бұрын

Keep telling yourself that. Our jobs are at risk 100%

@hermann95 10 ай бұрын

@@djcardwellai I can only comment on the stuff that I see right now, and that's definitely not threatening. The future might look different, of course.

@nickwoodward819 10 ай бұрын

@@djcardwellai they really aren't, unless you're piss poor at your job.

@Rensoku611 10 ай бұрын

@@nickwoodward819that's cope... even if you're good at your job you're still at risk in the long term because AI will keep improving exponentially for many years to come

@m-ok-6379 10 ай бұрын

AI will be designing and coding 60-70% of the work in 2-3 years.

@bruv1029 10 ай бұрын

Do you think development is a good career for young people, would it be viable in the near future?

@jherr 10 ай бұрын

As with any career you have to adapt constantly. So if you are willing to do that, then I do think there are careers in tech long term.

@pavanbhat92 10 ай бұрын

The colour theme looks pretty good. What's it call ?

@jherr 10 ай бұрын

Night Wolf Black with JetBrains Mono.

@pavanbhat92 10 ай бұрын

@@jherr Thanks

@ZlatkoIliev-s4j 10 ай бұрын

Oh no! We are done! AI will take our jobs now :(

@Zechey 10 ай бұрын

probably works the best with regular react, tried to convert my mobile app figma into react-native components and only poop came out

@jherr 10 ай бұрын

i don't think it's made for that, at the moment.

@draco-qr7ye 9 ай бұрын

Hi I use the windows system and I cannot run the script with the given command is there any specific command for windows THank you cat src/app/page.tsx | node scripts/download-images.js | pbcopy

@adlerspencer 9 ай бұрын

MODEL UBUNTU ```bash cat src/app/page.tsx | node scripts/download-images.js | xclip -selection clipboard ``` MODEL WIN POWERSHELL (Not Tested) ```powershell Get-Content .\src\app\page.tsx | node .\scripts\download-images.js | Set-Clipboard ```

@Crevulus 10 ай бұрын

Is this tool useful for generating code from component library designs? I quite often get designs with, for example, a button that can have a hover state, optional icon, optional text, disabled state etc. Does anyone know if this tool can generate code/styling based on those facets?

@jherr 10 ай бұрын

you could use it at a micro level to generate the code and then refactor that code into a library component.

@saeedkhazalvand4821 10 ай бұрын

Hello dear Jack, How can contact you directly , I have some question and need consultant .

@jherr 10 ай бұрын

My DMs on Twitter and Discord are open, but please do me a favor and start the conversation with "I'm so and so from the comments, wanted to talk with you about consulting." If you hit me up with just "Hello", I'm unlikely to answer.

@saeedkhazalvand4821 10 ай бұрын

@@jherr it is OK. ❤

@waleedsharif618 10 ай бұрын

Why dont you just take photo of your Figma design and give that image to ChatGpt 4 and ask it to make it website and give html and css for it (i did it and it works very fast and was accurate)

@greendsnow 10 ай бұрын

Where does Web dev go?

@jherr 10 ай бұрын

To actually develop the actual code that runs the page, connects to the services, does the responsive work, internationalization, etc. This just gets a lot of the grunt work out of the way. And maybe not even all the grunt work if the design is tough.

@greendsnow 10 ай бұрын

@@jherr You'll do it just once and AI will copy it instantly. You can only be so creative every time...

@davestockley8174 10 ай бұрын

@@jherr since when has building UI been grunt work... this stuff scares the crap out of me.

@jherr 10 ай бұрын

@@davestockley8174 since when has "building UI" consisted of simply copy and pasting CSS values from Figma into VS Code? that's just a tiny fraction of "building UI" and I'm happy to see it automated since it can make it way faster to build UIs. "Building UI" to mean means way more than just styling some divs, it means adding interactivity, making it data driven from services, adding internationalization, accessibility, animations, routing, the list goes on and on. The demo pages that I showed here are only 20% done at best, probably less since the responsiveness is good, but probably far from what the customer would actually want. So, yeah, I consider that first part of copy and pasting values from Figma to VS Code trying to make it as close to "pixel perfect" as possible very much grunt work.

@IvanRandomDude 10 ай бұрын

To using 3rd party and SaaS solutions

@djcardwellai 10 ай бұрын

Let's be honest, if AI keeps progressing at this rate it won't be long before we all have to look for new careers. At the end of the day, we are paid problem solvers, and it's okay if we have to solve new problems. I'm actually excited for it. Also, it's time for us to accept that the Cyber Truck is real. As much as we all wanted to pretend like it would never happen and that Elon is a scam, turns out we were wrong. It's easy to doubt, harder to believe.

@nickwoodward819 10 ай бұрын

you've not used AI for any significant coding have you? it's a useful tool, it's no where near a replacement for devs. also, the cybertruck has been "real" for fucking ages. it's the fact that it's a joke that's the problem.

@mattweihl 10 ай бұрын

This is KZbin, not X/ Twitter. You don't need to be a bluecheck Elon reply guy here.

@Rensoku611 10 ай бұрын

@@nickwoodward819 Common mistake: OP is talking about the future, not the present. AI in the future (less than 7 years from now) will definitely replace the vast majority of software engineers becaue it's a pretty easy job for an AI to do. We're not nurses or air conditioner repairmans. Software engineering is one of the areas with highest exposure to automation

@nickwoodward819 10 ай бұрын

@@Rensoku611 I understand what the OP was talking about, he said "if it progresses at this rate it won't be long before we all have to look for new careers", and I replied that it's "nowhere near a replacement for devs" - the implication being that it *will* be long because people have underestimated what it takes to write quality code. And LLMs by their very nature are not a suitable replacement for software engineers writing that code. They're not accurate or consistent enough, and who knows if they ever will be. They're a useful tool for suggestions, but not something I'd let stink up my code base without checking every line. And it's not going to be something embraced by project managers either. No one is risking their neck on an LLM with even the faintest chance of hallucinating

@djcardwellai 10 ай бұрын

@@nickwoodward819 at least you've progressed to calling it a useful tool. About a year ago you were telling yourself it is a joke. Sounds like you're pretty butt hurt about the cyber truck delivery event tomorrow. Which part of the cyber truck is a joke?

@reefgb77 9 ай бұрын

Cool ai tool but too much garbage HTML. This render is huge, foiled with HTML tags (what's the idea of using react without custom components), unreadable, not reusable, looks like spaghetti code in vanilla. But the idea behind it is good.

@jherr 9 ай бұрын

That's why I went on to talk about componentization as something that is left for the UI developer to do.

@humbertoventura1344 5 ай бұрын

Locofy is a piece of shit. It shows the design adaptive on its simulator but on Xcode its all mess up. I can't belive they actually made a crappy plugin and call it a good.