Introducing Locofy Lightning - Design to Code in 1-click, powered by LocoAI

LocoAI leverages our in-house Large Design Models (LDMs), trained on millions of designs & apps to convert your designs into high-quality, production-ready frontend code in just 1-click:
✅ AI-powered responsiveness and interactivity: LocoAI will optimise your designs, making them responsive & interactive in just a single click
✅ More readable, scalable, and modular code: Generate reusable code components with props automatically, and get readable and scalable code with our AI-powered Smart Class Naming
✅ Real-time preview and easy customisation: Review the generated code alongside your designs and revise the decisions made by the AI to fine-tune the code
Join our Discord: / discord
View our Documentation: locofy.ai/docs...
Learn how to convert your Figma design to React or HTML/CSS Code: www.locofy.ai/..., www.locofy.ai/...

[@raitasorin]

Ya Da Best on this Blue Planet

[@dmitriyrazmyslovich2670]

This is absolutely bonkers. Will be trying asap. :)

[@locofy_ai]

Thank you, Do give us a try and share your feedback with us

[@senju31]

Am I dreaming? I can't believe something like this exists.

[@locofy_ai]

Thanks, would love for you to try out Locofy Lightning and give us feedback.

[@cathy98866]

Super cool, can't wait to use it

[@locofy_ai]

Can't wait for you to try it either! Please let us know how it goes!

[@mailsiraj]

Quite an impressive demo - the polish of the overall UI and the presentation is excellent.
1. How to create a full-stack app with this? Say if I have a data model defined in Prisma or I want to connect to an API, how do I do this?
2. After the first code generation, later if I want to edit the design and I have done some changes to the code in VScode - how does the merge/sync process work

[@locofy_ai]

1. Locofy will take care of the UI, It does create components and properties. We also support data binding: www.locofy.ai/docs/export-and-deployment/data-binding/
2. You have two options, Locofy has its own code merge directly in Locofy builder. Or you can push the changes to a new branch, and merge using whatever workflow is best for you!

[@megaroeny]

This looks amazing. Congratulations and all the best

[@locofy_ai]

Thank you

[@DanieleManca1983]

Just watched this clip, amazing updates, I look forward to trying them out. I have one question though, in order for the process between Figma design to Locofy lightning to be as smooth as possible, I recall on the clip something was mentioned about the Figma designs not having to have unnecessary layers and/or frames, so what would be the best way to produce the Figma designs, for the most seamless design to code workflow with Locofy? If there were any videos or articles about this would be awesome.

[@locofy_ai]

Our docs cover most of this. Over the coming weeks we will be adding full tutorials rather than just overviews! www.locofy.ai/docs/

[@DanieleManca1983]

@@locofy_ai great, will be checking out the docs more thoroughly then.

[@danielaoliveira8281]

This is wonderful!

[@locofy_ai]

Thank you!

[@boltbet7436]

If you want to tweak SOMETHING 😂 gotta Love it !

[@locofy_ai]

We are happy to see that you like Locofy Lightning.

[@joshua_chris_ofurunna]

Nice!

[@locofy_ai]

Glad you liked it!

[@lastspoil5547]

Do this work for Adobe XD, Zeplin, Sketch, PSD, and Figma design files?

[@locofy_ai]

Locofy Lightning is only supported for Figma design files at the moment

[@postman2237]

I already tried it beta version. The important thing is how to set up Figma (Layer, Constrain, Autolayout) to achieve that result. Do you have any tips or guidelines? If you do, could you please send me the link? My company is ready to buy your products.

[@locofy_ai]

We have an upcoming session to showcase design best practices for high quality code. You can register from here: t.co/1RADsqRcTF

[@mahamudmunna5000]

will it work will all figma design or just with auto layout ?

[@locofy_ai]

It will work with any figma design but for optimal results we recommend that you following the best design practices and make your design autolayout. You can view our documentation for the best design practices: www.locofy.ai/docs/tutorials/design-best-practices/

[@kayrules2]

does is support conversion to react native yet?

[@locofy_ai]

We have Locofy Lightning for React Native on our roadmap but you can still use Locofy Classic for React Native at the moment

[@senju31]

Does this also work with Adobe XD?

[@locofy_ai]

Locofy Lightning is not supported in Adobe XD

[@kishansharma5417]

I have a figma design can you convert it

[@locofy_ai]

You can try out our plugin which helps convert design to code in a single click.
You can find out plugin here (www.figma.com/community/plugin/1056467900248561542
)