Visual Copilot Converts Figma Mocks to React Fast and Accurately

  Рет қаралды 76,310

Jack Herrington

Jack Herrington

Күн бұрын

Let's try out Visual Copilot to turn Figma mocks into React on NextJS.
Figma mock: www.figma.com/file/BB4xE8gevC...
Downloader script: gist.github.com/jherr/14cf314...
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 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

Пікірлер: 111
@JF7SWE
@JF7SWE 6 ай бұрын
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.
@_jeff.medeiros
@_jeff.medeiros 6 ай бұрын
Your script was the thing I actually liked the most, nice content Jack!
@darenbaker4569
@darenbaker4569 6 ай бұрын
This is awesome sharing this tomorrow with the team, thanks so much.
@anisdragan
@anisdragan 6 ай бұрын
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
@jherr 6 ай бұрын
Thanks!
@user-ku2sn1wz1c
@user-ku2sn1wz1c 6 ай бұрын
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 .
@axelsomerseth
@axelsomerseth 29 күн бұрын
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
@Dylan_thebrand_slayer_Mulveiny
@Dylan_thebrand_slayer_Mulveiny 6 ай бұрын
Figma is so damn good. We replaced Photoshop with it years ago and it's made our development process SO much better.
@lutfiikbalmajid
@lutfiikbalmajid Ай бұрын
who use photoshop nowadays? we replaced Photoshop to Figma, and Illustrator & PPT with Canva 😅
@VLADICA94KG
@VLADICA94KG 4 ай бұрын
Can you create a video on setting up the terminal to look like yours? It is useful and advanced. Thanks for the great content!
@mostafahamid9479
@mostafahamid9479 6 ай бұрын
nice one, really handy
@sharqyyem
@sharqyyem 6 ай бұрын
Amazing job as always 👏 thanks for sharing. Can make it generate components if it was created in Figma.
@jherr
@jherr 6 ай бұрын
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.
@last.journey
@last.journey 6 ай бұрын
You would still have to turn it into dynamic code and that is the point actually
@gmailuser5780
@gmailuser5780 6 ай бұрын
what a nice forest view from windows of your home)
@letmeplaygames2466
@letmeplaygames2466 6 ай бұрын
great video thanks
@jamesfoley4426
@jamesfoley4426 6 ай бұрын
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
@jherr 6 ай бұрын
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.
@user-oo9vi4cz2l
@user-oo9vi4cz2l 5 ай бұрын
Thanks Jack for this video!! what is the cli auto complete tool??
@jherr
@jherr 5 ай бұрын
Fig.
@thith_thin
@thith_thin 6 ай бұрын
Super cool 🎉
@user-tg3nd6me9l
@user-tg3nd6me9l Ай бұрын
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?
@romansernato6526
@romansernato6526 6 ай бұрын
looks like a good solution for nocode like bs enthusiasts
@gorbulevsv
@gorbulevsv 6 ай бұрын
Thanks, cool!
@muhammaddanielzuhad649
@muhammaddanielzuhad649 6 ай бұрын
nice content, what theme do you use sir??
@jherr
@jherr 6 ай бұрын
Night Wolf [black] wth Jetbrains Mono
@muhammaddanielzuhad649
@muhammaddanielzuhad649 6 ай бұрын
@@jherr thankss
@ujolmaharjan2010
@ujolmaharjan2010 6 ай бұрын
Omg I'm currently converting figma mockup to react on my current job.😅
@jherr
@jherr 6 ай бұрын
It's free! Give it a go!
@zb4238
@zb4238 6 ай бұрын
🕶Keep up Jack
@alltechneedscom7658
@alltechneedscom7658 6 ай бұрын
Adobe came out with this like 10 yrs ago with jsx scripting language in photoshop
@pavanbhat92
@pavanbhat92 6 ай бұрын
The colour theme looks pretty good. What's it call ?
@jherr
@jherr 6 ай бұрын
Night Wolf Black with JetBrains Mono.
@pavanbhat92
@pavanbhat92 6 ай бұрын
@@jherr Thanks
@TheTenThousandThings
@TheTenThousandThings 6 ай бұрын
rly like those shoes wtc
@yuur1440
@yuur1440 6 ай бұрын
The script not work for me :( TypeError: Cannot read properties of null (reading '1')
@Thassalocracy
@Thassalocracy 6 ай бұрын
I'm surprised Steve Sewell hasn't thumbs up-ed this video yet 😅
@durgeshjhalwa6639
@durgeshjhalwa6639 6 ай бұрын
🎉🎉🎉
@darkmift
@darkmift 2 ай бұрын
Use skeleton loaders its better UI and you don't need to worry about manipulating the resources.
@Crevulus
@Crevulus 6 ай бұрын
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
@jherr 6 ай бұрын
you could use it at a micro level to generate the code and then refactor that code into a library component.
@bruv1029
@bruv1029 6 ай бұрын
Do you think development is a good career for young people, would it be viable in the near future?
@jherr
@jherr 6 ай бұрын
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.
@ChronicleContent
@ChronicleContent 6 ай бұрын
I will wait till some app does everything for me
@samsuriahmad2128
@samsuriahmad2128 6 ай бұрын
Fast for slicing 😂😂😂❤
@hermann95
@hermann95 6 ай бұрын
Seems like it's best for building basic components with it, to get a baseline and help with the boring stuff.
@djcardwellai
@djcardwellai 6 ай бұрын
Keep telling yourself that. Our jobs are at risk 100%
@hermann95
@hermann95 6 ай бұрын
@@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
@nickwoodward819 6 ай бұрын
​@@djcardwellai they really aren't, unless you're piss poor at your job.
@Rensoku611
@Rensoku611 6 ай бұрын
​@@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
@nickname123321
@nickname123321 6 ай бұрын
Great, time to look for a new job.
@jherr
@jherr 6 ай бұрын
Nah. Still tons do to AFTER the conversion. And the conversions are never perfect with any of the tools I've tried.
@saeedkhazalvand4821
@saeedkhazalvand4821 6 ай бұрын
Hello dear Jack, How can contact you directly , I have some question and need consultant .
@jherr
@jherr 6 ай бұрын
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
@saeedkhazalvand4821 6 ай бұрын
@@jherr it is OK. ❤
@draco-qr7ye
@draco-qr7ye 6 ай бұрын
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
@adlerspencer 5 ай бұрын
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 ```
@waleedsharif618
@waleedsharif618 6 ай бұрын
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)
@davestockley8174
@davestockley8174 6 ай бұрын
they took ma jeeeeerb
@jherr
@jherr 6 ай бұрын
My guess is that there is a lot more to your job than laying out HTML and CSS.
@davestockley8174
@davestockley8174 6 ай бұрын
True true. But it's all billable hours
@anubisai
@anubisai 6 ай бұрын
​@@davestockley8174 trash approach to life
@anaslaraki
@anaslaraki 6 ай бұрын
this thing is gonna replace devs soo
@lukasoliveira73
@lukasoliveira73 4 ай бұрын
figma is awesome
@phoneywheeze9959
@phoneywheeze9959 6 ай бұрын
is it free?
@jherr
@jherr 6 ай бұрын
The fast mode is free, the Quality mode is pay for.
@Zechey
@Zechey 6 ай бұрын
probably works the best with regular react, tried to convert my mobile app figma into react-native components and only poop came out
@jherr
@jherr 6 ай бұрын
i don't think it's made for that, at the moment.
@greendsnow
@greendsnow 6 ай бұрын
Where does Web dev go?
@jherr
@jherr 6 ай бұрын
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
@greendsnow 6 ай бұрын
@@jherr You'll do it just once and AI will copy it instantly. You can only be so creative every time...
@davestockley8174
@davestockley8174 6 ай бұрын
@@jherr since when has building UI been grunt work... this stuff scares the crap out of me.
@jherr
@jherr 6 ай бұрын
@@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
@IvanRandomDude 6 ай бұрын
To using 3rd party and SaaS solutions
@user-ld1de1mc4h
@user-ld1de1mc4h 6 ай бұрын
Oh no! We are done! AI will take our jobs now :(
@m-ok-6379
@m-ok-6379 6 ай бұрын
AI will be designing and coding 60-70% of the work in 2-3 years.
@djcardwellai
@djcardwellai 6 ай бұрын
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
@nickwoodward819 6 ай бұрын
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
@mattweihl 6 ай бұрын
This is KZfaq, not X/ Twitter. You don't need to be a bluecheck Elon reply guy here.
@Rensoku611
@Rensoku611 6 ай бұрын
​@@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
@nickwoodward819 6 ай бұрын
@@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
@djcardwellai 6 ай бұрын
@@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
@reefgb77 6 ай бұрын
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
@jherr 6 ай бұрын
That's why I went on to talk about componentization as something that is left for the UI developer to do.
@humbertoventura1344
@humbertoventura1344 Ай бұрын
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.
13 Figma To React Converters Ranked
16:02
Jack Herrington
Рет қаралды 24 М.
Transform Figma to code with Visual Copilot
56:57
Builder
Рет қаралды 13 М.
Backstage 🤫 tutorial #elsarca #tiktok
00:13
Elsa Arca
Рет қаралды 39 МЛН
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 1,3 МЛН
They RUINED Everything! 😢
00:31
Carter Sharer
Рет қаралды 26 МЛН
Make Your Web Design Responsive Using Variables | Figma Tutorial
15:39
DesignWithArash
Рет қаралды 52 М.
You must try this Visual Editor for building React JS Apps
9:34
Adrian Twarog
Рет қаралды 187 М.
Figma Tutorial: Must-Have Figma AI Plugins for Designers
8:19
Design With Hannah
Рет қаралды 13 М.
I Tried Every AI Coding Assistant
24:50
Conner Ardman
Рет қаралды 704 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 453 М.
No const! How NOT To Give A JavaScript Talk
10:28
Jack Herrington
Рет қаралды 59 М.
Introducing Visual Copilot - Design to Code in a Click
11:22
Builder
Рет қаралды 188 М.
Unbelievable AI Tool Converts Figma to Code🔥
17:46
Tech With Tim
Рет қаралды 281 М.
Are Your React Components Too BIG?
12:20
Jack Herrington
Рет қаралды 22 М.
This VS Code AI Coding Assistant Is A Game Changer!
14:27
codeSTACKr
Рет қаралды 139 М.
MacBook Air Японский Прикол!
0:42
Sergey Delaisy
Рет қаралды 251 М.
ТОП-5 культовых телефонов‼️
1:00
Pedant.ru
Рет қаралды 15 М.
TOP-18 ФИШЕК iOS 18
17:09
Wylsacom
Рет қаралды 721 М.
Девушка и AirPods Max 😳
0:59
ОТЛИЧНИКИ
Рет қаралды 16 М.