13 Figma To React Converters Ranked
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
👉 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
0:00 Introduction
1:06 Copy Cat
1:33 Figma to React From Quest
2:04 Figma To HTML
3:26 Auto HTML
4:33 Figma To Code
4:51 Locofy Free
6:15 Dhi Wise
10:20 Anima
11:13 Visual Copilot
12:14 v0 From Vercel
13:52 Screenshot To Code
15:06 Does This Replace UI Developers?
This video was sponsored by Brilliant. - วิทยาศาสตร์และเทคโนโลยี
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
I've tried most in the top 3. I find hand-coding faster than working with the janky output. You'll save more time by having your design team build Figma files with some consistency and logic right now. It's a good start, but we're way off from these tools being actually helpful imo.
Doesn't it generate at least a somewhat good template that you can then customize to make it how you want?
I like screenshot-to-code. will give it a try 👍👍
Great video - thank you!
pretty informative, thanks a lot)
Thank you for your insightful videos that not only highlight the distinctions between various options but also provide valuable information about the available choices. I'd like to address two specific points in regard to this video:
1. There is a notable difference between converting an image and converting directly from Figma. Figma, with its built-in positioning, components with attributes, variables etc... provides additional value if you use them. Some tools are specifically designed to excel in translating Figma layouts and components into React components complete with props.
2. I tested one of the tools that was rated high with a more intricate layout involving elements like avatar, badge and custom buttons and was very disappointed with the results, they were far from the original design. Contrarily, lower-rated tools showcased remarkable better results, very close to the original design.
Consequently, I believe that evaluating the best Figma converter tool should encompass testing with a more complex design and directly from Figma. Unless an image converter tool demonstrates proficiency in identifying components and attributes, making it versatile across various design tools (no need for Figma specifically).
Love this. It makes 0-50 quick. Then the devs need to adjust the code to fit the style and the brand to go from 50-100.
Exactly. I don’t see why folks are so stressed about this.
@@jherr they're worried for no reason imo. History shows that any time a new technology comes, more jobs are created. Yes, old jobs are not the same but they're adapted into new ways.
ty man!
This is actually pretty cool. It should help speed up development. They also said that WordPress was going to replace developers and designers but all it did was help streamline the process for them. Remember, business owners don't have the time to make websites and then fix them when they break. Even if a tool comes out that can create a website in React with one button press...they still have to be savvy enough to fix and adjust things on the site.
Can you do something similar for React Native?
Exactly, these perhaps are some good starting points but far from a complete solution. I imagine it will be there someday, but certainly not yet. Take advantage of these tools if they make you more productive. Thanks Jack 👍. By the way, are you near San Diego or Carlsbad? I just remember going to Walmart labs in Carlsbad a few times for some meetups. Have a great week! 💪
I went down to Carlsbad a couple of times when I worked at Walmart Labs. I'm up in Portland, OR.
I think those absolute position is caused by not structured properly! If you use auto layout you will get flex output
Anima, Screenshot To Code, Visual Copilot, they were all able to create responsive layouts. So that doesn't track for me.
I am the creator of one of the Plugins you showed (AutoHTML) and I feel like I need to clarify things a little here. 😉
I understand, that how you are using it, it does not produce clean code as the design is not structured well. But the intention of the plugin is solely to translate Figma’s layout structure to something that serves as a good starting point not production ready code. I am working partly as Designer and Frontend Dev and for me this works quite well: I am preparing everything with auto layout and components inside Figma which is way faster than coding and I get very predictable output (no random AI magic) which I can then easily refactor. I do understand that some people are looking for something else but its just unfair to compare tools that follow a completely different motivation 😅
what about vectorise a screenshot and use visual copilot ?\
Should we pay to get that openAI key or is it free for developers ?
I don't work for OpenAI, but It's based on usage. I used it a LOT last month (not for this but for another project) and the total bill for the month was $3. My guess is that if you convert a bunch of times that the total bill will be less than a penny.
My company hired me out of my bootcamp to make HTML &CSS layouts. Im curious whatll happen if i end up making my time like 60% faster. Very curious indeed.
Still, i hate making layouts. I have bigger fish to fry.
😵💫 what does he like the most at the end ?
Screenshot to Code
Copycat said "meow" to the header. For prototypes "might" work... nothing like coding the logic by real human hands.
I wish I had your optimism about AI replacing us. We're just 1 year from chatgpt release and less then a year from gpt-4 api release. You're saying it already does 20% of your work. If we extrapolate the exponential growth, very soon, it's gonna do more than 100%.
Not sure how it could ever do "more than 100%". But what I can tell you is that none of these are close to creating production ready code out of the box unless it's crazy simple. And even then, it won't support light/dark mode, or use existing components, or anything else.
I liken it to cars. The first mass produced car was 1908, and I'm sure there were folks even then who said; "Some day these things are going to drive themselves and then there won't be jobs driving them anymore." It's 115 years later and we are just starting, maybe, to have experimental self driving cars doing very limited things. The first 80% of the problem is relatively easy, the other 20% is damn near impossible. So what if an AI can do 80% of the translation of an image into HTML. It'll be a long time before it gets to 100%, and even then it'll be a whole lot longer before it does the other 80% of the work of building a working stable web application.
@jherr By "more then 100%" I mean more then 100% of what human can do. Really hope you're right! :)
@@jherrI think it's also near impossible to delegate all the work to Ai because just describing the functionality of something already takes some time. Describing the functionality of a complex website probably comes close to writing an entire book. My work flow changed entirely this year and I am basically only writing comments for Github Copilot or Commands for ChatGPT, but I still have to type a whole lot
Have you tried figma to webflow? I was never happy with figma plugins, they seem unfinished and time consuming.
I'm sorry if it isn't about the video but I would like to ask what VS code theme you use.
sex-and-wiskey colors extension
I use Night Wolf [black] and JetBrains Mono.
@@jherr Thanks
Thanks for reviewing available solutions! To me, it seems like they all are bad and you'll spend much more time trying to adapt the generated code when you could have spent twice less time just implementing it. Ah well, maybe in the future it'll be good enough.
I think it depends on the complexity of the design, how much responsive change there is, and the individuals skill level. I'm "ok" with CSS layout and such, so it's handy for me as a starting point. For folks who are really good at it my guess is that it's not helpful to them.
Great for prototyping.. would really be something else if these AI tools didnt use tailwind and instead produced vanilla css
Is figma as contagious as ligma?
No, but more contagious than zigma and digma.
Die wise? Not the best name for a tool that is not even educational
It's Dhi-Wise, Dhi, a Sanskrit word for smart
@@ShubhangiGupta-oh4fd sanskrit is a type of food
Locofy is dreadful, I've used it personally and it created a mess.
I heard from the Locofy folks that they are putting out a major new release soon. If it's a huge improvement then I'll do a video on it. I want to give all these projects a fair shake.
@@jherr would be waiting for that. Thanks Jack.
you don't know how to use it
@@Rudeuxxx I think you've never used it before
@@Rudeuxxx Possibly, but I don't recall a learning curve on the later tools. I just dragged and dropped an image on v0 and it worked, same thing with screenshot to code. I'm happy to learn stuff, I just 1) need to be prompted as to what I need to learn and 2) there has to be some additional benefit for me learning it, beyond what other tools do without the learning curve.