Visual Copilot Converts Figma Mocks to React Fast and Accurately

Let's try out Visual Copilot to turn Figma mocks into React on NextJS.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
00:54 Converting Figma To React
03:50 Integrating Into NextJS
13:00 What's Left After the AI
15:10 Outroduction

[JFSWE]

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.

[ВладиславВитковский-пн]

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 .

[_jeff.medeiros]

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

[anisdragan]

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!

[darenbaker]

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

[Dylan_thebrand_slayer_Mulveiny]

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

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

[last.journey]

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

[axelsomerseth]

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

[ujolmaharjan]

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

[VLADICAKG]

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

[romansernato]

looks like a good solution for nocode like bs enthusiasts

[jamesfoley]

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

[JustThinkingAboutIt-ik]

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?

[sharqyyem]

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

[창완-fm]

Thanks Jack for this video!!
what is the cli auto complete tool??

[Thassalocracy]

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

[alltechneedscom]

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

[darkmift]

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

[gmailuser]

what a nice forest view from windows of your home)