Visual Copilot Converts Figma Mocks to React Fast and Accurately
Вставка
- Опубліковано 6 лип 2024
- 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 - Наука та технологія
This is awesome sharing this tomorrow with the team, thanks so much.
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.
Your script was the thing I actually liked the most, nice content Jack!
Figma is so damn good. We replaced Photoshop with it years ago and it's made our development process SO much better.
who use photoshop nowadays? we replaced Photoshop to Figma, and Illustrator & PPT with Canva 😅
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 .
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
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!
Thanks!
nice one, really handy
what a nice forest view from windows of your home)
great video
thanks
Can you create a video on setting up the terminal to look like yours? It is useful and advanced.
Thanks for the great content!
Super cool 🎉
Thanks, cool!
Jack, what's your go to eccom stack? Have you ever thought about a video series on the JackStack EccomPack to make a FatStack?
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.
Thanks Jack for this video!!
what is the cli auto complete tool??
Fig.
You would still have to turn it into dynamic code and that is the point actually
Amazing job as always 👏 thanks for sharing.
Can make it generate components if it was created in Figma.
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.
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?
looks like a good solution for nocode like bs enthusiasts
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?
you could use it at a micro level to generate the code and then refactor that code into a library component.
🕶Keep up Jack
Omg I'm currently converting figma mockup to react on my current job.😅
It's free! Give it a go!
The script not work for me :(
TypeError: Cannot read properties of null (reading '1')
🎉🎉🎉
rly like those shoes wtc
nice content, what theme do you use sir??
Night Wolf [black] wth Jetbrains Mono
@@jherr thankss
Adobe came out with this like 10 yrs ago with jsx scripting language in photoshop
The colour theme looks pretty good.
What's it call ?
Night Wolf Black with JetBrains Mono.
@@jherr Thanks
Do you think development is a good career for young people, would it be viable in the near future?
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.
I'm surprised Steve Sewell hasn't thumbs up-ed this video yet 😅
I will wait till some app does everything for me
Great, time to look for a new job.
Nah. Still tons do to AFTER the conversion. And the conversions are never perfect with any of the tools I've tried.
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
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
```
Fast for slicing 😂😂😂❤
Hello dear Jack,
How can contact you directly , I have some question and need consultant .
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.
@@jherr it is OK. ❤
figma is awesome
probably works the best with regular react, tried to convert my mobile app figma into react-native components and only poop came out
i don't think it's made for that, at the moment.
they took ma jeeeeerb
My guess is that there is a lot more to your job than laying out HTML and CSS.
True true. But it's all billable hours
@@davestockley8174 trash approach to life
Use skeleton loaders its better UI and you don't need to worry about manipulating the resources.
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)
this thing is gonna replace devs soo
Seems like it's best for building basic components with it, to get a baseline and help with the boring stuff.
Keep telling yourself that. Our jobs are at risk 100%
@@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.
@@djcardwellai they really aren't, unless you're piss poor at your job.
@@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
Where does Web dev go?
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.
@@jherr You'll do it just once and AI will copy it instantly. You can only be so creative every time...
@@jherr since when has building UI been grunt work... this stuff scares the crap out of me.
@@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.
To using 3rd party and SaaS solutions
is it free?
The fast mode is free, the Quality mode is pay for.
Oh no! We are done! AI will take our jobs now :(
AI will be designing and coding 60-70% of the work in 2-3 years.
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.
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.
This is UA-cam, not X/ Twitter. You don't need to be a bluecheck Elon reply guy here.
@@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
@@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
@@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?
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.
That's why I went on to talk about componentization as something that is left for the UI developer to do.
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.