Locofy Livestream: Design best practices

[@HacooonaMatata]

Love to be the part of this community ❤

[@locofy_ai]

We hope the livestream helps you optimise your design and accelerates your design to code workflow.

[@taunado]

Thanks. Please create more workflow walkthrough videos for Locofy design practices.

[@taunado]

As well as more Figma files with the DOs and DONTs - very helpful :D

[@locofy_ai]

We will be creating similar content in the coming weeks. Please follow our youtube channel or join our discord community for the latest updates: discord.com/invite/r6UDBhEQ4s

[@taunado]

Maybe the next tool to build is Figma project convertor that uses AI to structure the divs and CSS correctly to be ready for conversion. It's good to know how to do it, but wow it will be a huge time saver for AI to clean up the project and convert.

[@locofy_ai]

We already have a design optimizer step that does clean it up. However, it's good to know how to manually do it as well. The reason is Responsiveness is subjective. And we might not do it exactly how you want.

[@HacooonaMatata]

How I can convert heavy components like a profile photo on which you hover you get a variant 2 which have a edit button and when you click the variant 3 its opened and I can upload another photo

[@innovatorshome]

You can do interaction with hover and click option i.e. with loco plugin and change the variant and export the code

[@locofy_ai]

You can use Locofy Classic and make use of our child layers feature to have the edit button show on hover. You will however need to manually extend the code to add the file upload logic
You can view our documentation here: locofy.ai/docs/classic/design-structure/example/child-layers/

[@m_tron99]

Great video. Any plans to support Nativewind?

[@locofy_ai]

We have noted your request but at the moment this isn't on our roadmap.

[@elpablitorodriguezharrera]

51:58 can you show us how to actually edit the responsiveness in locofy?

[@locofy_ai]

You can change the flex direction to column from the Styling & Responsiveness review for the parent of the two cards making them stack vertically instead of horizontally on smaller screen sizes. If you have any further questions your can reach out to us on our Discord Server: discord.gg/r6UDBhEQ4s

[@tech_prince]

my locofy doesn't have lightning beta version

[@locofy_ai]

Please note that Locofy Lightning is supported only for Web Frameworks like React, HTML, Next, Vue and Gatsby. We do not support Locofy Lightning for React Native yet.

[@innovatorshome]

if you make an bad design then locofyai make the design even worst. so keep focus on figma basics

[@locofy_ai]

LocoAI optimises your design but in some cases if the design is poor you may need significant review to fix the design issues so we recommend you follow some of these design best practices. This will not only make your design better but it will also significantly improve the code generated allowing you to accelerate your design to code workflow