FireJet
p/firejet
Figma to Tailwind Workflow, Reinforced with GPT-4 Vision
Stephen Alvin
FireJet β€” Figma to Tailwind Workflow, Reinforced with GPT-4 Vision
Featured
38
β€’
Clean, readable, and responsive code generation, reinforced with GPT-4 Vision to achieve production-ready code. Start your 14-day free trial now! Notable features include semantic element detection, auto fixing designs and intelligent Tailwind rounding.
Replies
Stephen Alvin
Hey fellow hackers! πŸ€— We've been developing our Figma to code plugin, πŸ”₯FireJet, lovingly for the past two years. The reason why we started in the first place is because we found that while there are several figma to code plugins already out there, the code quality that they produced was never up to par. The three aspects that we've been religiously focusing on over the past two years were: 1. Code readability 2. Pixel Perfection 3. Responsiveness To achieve the above, we've added two major features - GPT 4 vision and Engine 2. πŸ€– GPT 4 Vision: OpenAI has recently launched their vision API, which is able to provide more context for better code generation. Transformer models have always been extremely capable at producing nice to read code - and it's something we've always wanted to add into FireJet. The problem is that when it edits the code, it often messes up the design. However, now with the Vision API, we are able to make modifications to the generated code to make it cleaner, more readable and responsive, which is why we've added it as a feature to augment the code output from FireJet. ⚑Engine 2: However, even with GPT 4 vision we reached a ceiling when it came to code quality, which is the same ceiling every other figma to code plugin faced - a garbage in, garbage out situation. A lot of the time, Figma designs are very nice, but when put through Figma to code plugins, they would produce horribly nested, absolute positioned elements This is because most Figma to code converters rely on the structure of the user's figma design. The problem with that when creating figma designs, the focus is on speed and beauty, rather than on perfect nesting for outputting to code To overcome this problem, we developed a proprietary algorithm based on chess engines, which we believe separates us far for the rest in terms of code quality. (You can read more about it at https://www.firejet.io/blog/What...) (Okay but feel free to flame me at philip@firejet.io if it doesn't work perfectly) Hope you guys like it! Let us know if you have any feedback or comments!
Yeo Eng Heng
Good stuff guys. Good luck
Stephen Alvin
@yeo_eng_heng Appreciate it :)
Marius Colacioiu
Nice job! Firejet team made quite some progress since last time I've used the product! Congrats!
Stephen Alvin
Thanks @colmarius !
Amit Kumar Singh
Congrats Stephen and Philip! for your launch πŸš€ these new features are seriously amazing. Great Product πŸŽ‰
Stephen Alvin
@amit_kumar_singh4 Thanks for your encouragement Amit!
Rami - Browsingbuddies.com
In the future when A.I. owns the entire development cycle nobody will care if the code is maintainable so things like Tailwind support won't be needed.
Stephen Alvin
@kingromstar Some day in the future! For now, let's all enjoy the time saved with low-code tools 😁
Daryll Wong
Congrats to Stephen and Philip! Amazing product!! 😎
Stephen Alvin
@daryllman Thanks Daryl!
Kelvin Htat
AI enhancement for code generated from Figma design is amazing!! Good stuff and congrats guy on the launch! πŸš€
Stephen Alvin
@kelvinhtat Glad you understood that Kelvin. I was worried people would think we are just a GPT wrapper
Victor Aris
Good stuff, congrats on the launch!
Stephen Alvin
Thanks @vikiyur !
Chris
Congratulations on the launch!! It seems really useful.
Stephen Alvin
@chris77 Thanks Chris! Hope it helps!
Tiong Shan Kai
Congratz team! Amazing work! Could you share a little about how ChatGPT vision incorporates with Engine 2? :)
Philip Wee
@shankaikai So engine two is able to produce a largely pixel perfect output - but it lacks things like whether it should be a button, form or something else. What GPT 4 vision is able to do is add those additional buttons, plus sometimes its able to refactor the code to make it easier to read. The reason why it being GPT4 + vision is important is because without the vision context, GPT tends to mess up the original design instead of improve it
princeton poh
Wow! A better algo based on Chess engine. Would be great to see a live comparison between this and the other figma-code soln. Keep up the good work!
Stephen Alvin
@princeton_poh Hi Princeton! Thanks for the suggestion! Will definitely make a video on that πŸ˜„
Lim HngYi
Cool stuff! Keep it up :)
Stephen Alvin
@hngyi Thanks for the encouragement! Feel free to try it out!
Ghost Kitty
Comment Deleted
Stephen Alvin
@servelogy_technologies Thanks Toshit! Looking forward to your launch as well!
Tanjir Rahman
Incredible journey, team FireJet! πŸš€ The dedication to code quality, readability, and responsiveness, coupled with the integration of GPT 4 Vision and Engine 2, truly sets FireJet apart. Excited to see this revolution in Figma to code plugins! πŸ”₯
Stephen Alvin
Happy to hear that @tanjirrahman. We'll continue working hard to deliver and improve on our code quality πŸš€πŸš€πŸš€
Fibaly Group
Wow! @stephenalvin97, your FireJet is amazing! This Figma to Tailwind Workflow augmented with GPT-4 Vision looks like it's going to make a big splash in the market πŸš€ Congratulations on the launch, and I wish you all the success in your endeavors!
Stephen Alvin
@fibaly_group Thanks! Appreciate the support :)
Jessica Lee
Congratulation on the successful launch of Firejet on Product Hunt ! I can't wait to try and provide you my feedback!
SeanChinJunKai
Wow this product seems amazing! How does it compare with other Figma to Code plugins?
Stephen Alvin
Excellent question @seanchinjunkai. We're working on a code comparison report as we speak!
Sveinn Fannar
We have been using FireJet and it’s been super useful! Looking forward to try out the new features!
Stephen Alvin
@sveinnfannar Another power user! Do let me know if you have any suggestions :)
Xinyi Tay
Amazing stuff! Really exciting features and can’t wait to integrate it with my development workflow.