- 214
- 446 035
Locofy
Registrace 24. 05. 2021
Welcome to Locofy's CZcams channel! 🚀
Turn your Figma designs into code in 1 click with Locofy Lightning, powered by Large Design Models!
Leveraging advanced AI, we make design-to-code seamless and efficient for both developers and designers.
Our channel offers tutorials, tips, and insights to maximize your use of Locofy Lightning. Whether you're a pro developer or a creative designer, our content empowers you in UI/UX development.
Enjoy walkthroughs, feature highlights, community stories, and updates. Stay ahead in digital design with us!
Subscribe for the latest in #LocofyAI, and revolutionize your design-to-code process.
Try Locofy Lightning now: locofy.ai
Turn your Figma designs into code in 1 click with Locofy Lightning, powered by Large Design Models!
Leveraging advanced AI, we make design-to-code seamless and efficient for both developers and designers.
Our channel offers tutorials, tips, and insights to maximize your use of Locofy Lightning. Whether you're a pro developer or a creative designer, our content empowers you in UI/UX development.
Enjoy walkthroughs, feature highlights, community stories, and updates. Stay ahead in digital design with us!
Subscribe for the latest in #LocofyAI, and revolutionize your design-to-code process.
Try Locofy Lightning now: locofy.ai
Dev Update: Automatically Identify 22 Additional Tags!
We added 22 additional tags to our AI models. Check it out!
Join our Discord: discord.com/invite/r6UDBhEQ4s
View our Documentation: locofy.ai/docs/lightning
Join our Discord: discord.com/invite/r6UDBhEQ4s
View our Documentation: locofy.ai/docs/lightning
zhlédnutí: 314
Video
Import Custom Components from GitHub
zhlédnutí 296Před měsícem
In this video we show you how to import your custom component library from your GitHub repo Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: www.locofy.ai/docs/custom-components/import-from-github/
Import Custom Components from Storybook
zhlédnutí 132Před měsícem
In this video we show you how to import your custom component library from a public Storybook. Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: www.locofy.ai/docs/custom-components/import-from-storybook/
Import Custom Components from a Codebase
zhlédnutí 422Před měsícem
Major new update. We now allow you to import your component libraries. We can now use your components, rather than generating new code! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: www.locofy.ai/docs/custom-components/overview/
Tips and Tricks - Responsive Footers
zhlédnutí 182Před 2 měsíci
In this video, we show how you can quickly make your footers responsive! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Tips and Tricks - Responsive Designs with Fill Container and Max Width
zhlédnutí 169Před 2 měsíci
In this video, we show how to use Fill Container with Max Width to make your designs responsive using Locofy Lighting! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Tips and Tricks - Responsive Images
zhlédnutí 102Před 2 měsíci
In this video, we show how to make your images responsive! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Design Best Practices for React Native
zhlédnutí 417Před 2 měsíci
In this video, we go over some design tips and tricks for React Native and Locofy! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Tagging your React Native Bottom Tabs
zhlédnutí 126Před 2 měsíci
In this video, we show how you tag your React Native Bottom Tabs! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Dev Update - Tour of Locofy Builder
zhlédnutí 324Před 2 měsíci
In this video, we will take you on a tour through the key features of the Locofy Builder! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Dev Update - Design to Code, Incremental Updates
zhlédnutí 301Před 3 měsíci
In this video, we show how you easy it is to now do Incremental Updates, when converting your Design to Code. Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Tips and Tricks - Edit Multiple Component Instances at Once!
zhlédnutí 130Před 3 měsíci
In this video, we show how you can create easily edit multiple Components at once using Locofy Lighting! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Dev Update - Creating, Updating, and Deleting Components
zhlédnutí 127Před 3 měsíci
You can now Create, Update, and Delete Components directly inside the Locofy plugin! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
Dev Update - React Vite
zhlédnutí 115Před 3 měsíci
Locofy now supports React Vite! Join our Discord: discord.com/invite/r6UDBhEQ4s View our Documentation: locofy.ai/docs/lightning
BuildShip & Locofy Livestream: Create Apps Fast with Low-Code and AI
zhlédnutí 962Před 3 měsíci
BuildShip & Locofy Livestream: Create Apps Fast with Low-Code and AI
Tips and Tricks - Learn to create Accordions with Locofy Lightning
zhlédnutí 347Před 3 měsíci
Tips and Tricks - Learn to create Accordions with Locofy Lightning
Tips and Tricks - Adding New Media Queries
zhlédnutí 144Před 3 měsíci
Tips and Tricks - Adding New Media Queries
Tips and Tricks - New Feature: Component Creation in the Locofy Plugin!
zhlédnutí 348Před 3 měsíci
Tips and Tricks - New Feature: Component Creation in the Locofy Plugin!
Live stream Breakdown: Design best practices - Removing Overlapping Layers
zhlédnutí 235Před 3 měsíci
Live stream Breakdown: Design best practices - Removing Overlapping Layers
Live stream Breakdown: Design best practices - Good Layer Names
zhlédnutí 99Před 3 měsíci
Live stream Breakdown: Design best practices - Good Layer Names
Live stream Breakdown: Design best practices - Using Borders instead of Line Seperators
zhlédnutí 86Před 3 měsíci
Live stream Breakdown: Design best practices - Using Borders instead of Line Seperators
Live stream Breakdown: Design best practices - Using Min/Max Height/Width to Improve Responsiveness
zhlédnutí 118Před 3 měsíci
Live stream Breakdown: Design best practices - Using Min/Max Height/Width to Improve Responsiveness
Live stream Breakdown: Design best practices - Adding Wrapper Frames
zhlédnutí 90Před 3 měsíci
Live stream Breakdown: Design best practices - Adding Wrapper Frames
Live stream Breakdown: Design best practices - Use Paragraph Spacing Instead of New Line
zhlédnutí 121Před 3 měsíci
Live stream Breakdown: Design best practices - Use Paragraph Spacing Instead of New Line
Live stream Breakdown: Design best practices - Using the same Layer Structure for Components
zhlédnutí 86Před 3 měsíci
Live stream Breakdown: Design best practices - Using the same Layer Structure for Components
Center Aligning Elements to improve Responsiveness | Design best practices | Live stream Breakdown
zhlédnutí 85Před 3 měsíci
Center Aligning Elements to improve Responsiveness | Design best practices | Live stream Breakdown
Live stream Breakdown: Design Tips and Tricks - Flattening Complex Backgrounds
zhlédnutí 126Před 3 měsíci
Live stream Breakdown: Design Tips and Tricks - Flattening Complex Backgrounds
Design to Working Youtube Clone with no code!
zhlédnutí 405Před 3 měsíci
Design to Working CZcams Clone with no code!
Locofy Livestream: Design best practices
zhlédnutí 532Před 4 měsíci
Locofy Livestream: Design best practices
Great tutorial! but I wondering, how you create sticky header position?
Can I make a close button for the drawer, if so how?
Where do we get that hamburger icon, what i got from a plugin does not get recognised by locofy while developing
You will need to add a hamburger icon which is hidden initially on Figma. This will need to be done manually
I bet You are Vietnamese:))
Hello. How did you manage to adjust the style of input (floating label) when making the input field interactive?
You can choose to tag the inner text as input allowing you to effective convert any design to code. You can also create a floating label is required.
Thank you! Can you also add animation's on the buttons? so yeah how?
In React native we do not support any animations at the moment
Fantastic, Can I do this with Web, create Routing - Navigating between Pages?
Yeah you can create navigation in web as well using Figma Prototype with "navigate to" action
Fantastic tutorial! It will be great to have the figma file for the tutorial as well..
You can view our Design for this video here: www.figma.com/community/file/1140675081699037964/locofy-sample-project-fickleflight-mobile
Hello Can I run the react native code on my phone
After you have exported the code you can create an APK which can be installed on your phone.
does is support conversion to react native yet?
We have Locofy Lightning for React Native on our roadmap but you can still use Locofy Classic for React Native at the moment
I have watched this tutorial a few times and it seems that the most important elements about responsiveness are not truly clear.. It will be nice if you do another tutorial on navigation and spend a little bit more time on the design process.. on how to prep the design for different screens, specifically the header element..
I found this tutorial.. it covers pretty much everything you need to know about. navigation and responsive design: czcams.com/video/mcROyX3hQ6g/video.html
You can view the best design practices we recommend for optimal code conversion: www.locofy.ai/docs/tutorials/design-best-practices/ You can also view our UI kit having already optimised headers: www.figma.com/community/file/1167732372256619132/locofy-ui-kit-100-free-components-with-code-embedded
please make a backend video for creating an app like multi vendor eCommerce application , make admin portal , vendor portal and customer application
Thank you. We have noted your request
very cool!
Thank you
Can you make the github repo public please?
This is absolutely bonkers. Will be trying asap. :)
Thank you, Do give us a try and share your feedback with us
Uff! esto se pone potente, esta característica es buenísima.
Thank you
Will this be like the react expo?
We support both Expo and React Native CLI. You can select your preference from the project settings on the builder before export.
Create Component is not showing.
Request you to join our Discord Server and message LocoSid regarding this, he will be able to assist you. You can join our discord from here: discord.gg/r6UDBhEQ4s
Could you please share the link to the design used in Figma?
You may access the design here: www.figma.com/community/file/1170288495364885012/create-a-blog-app-with-locofy-ai-prismic-io
Is it really validate the form? according to the email and password? I don't see any validation logic on the code
Hi, the input fields get a validation from the type selected. Please note that the extended business logic for validation will need to be added manually post exporting the code
it doesn't help at all!!!!!!!!!!!!!!!!!!!
Request you to join our discord server and ping LocoSid so he can assist you with the problems you are facing. You can join our discord from here: discord.com/invite/r6UDBhEQ4s
How to you create dropdown menu with selected option, i try using the dropdown feature but it is not working
You can add a few option in the dropdown menu and preselect a value from those option. If you are still facing an issue, request you to join our discord server and ping LocoSid. You can join our discord from here: discord.com/invite/r6UDBhEQ4s
Very cool! Please give me a student permit.
@MatheusSilva-qm3ph Locofy is in Free Beta and you can use it by signing up
Very good video, congratulations! Questions: Can you make a video on how to use locofy with framaer? And how does locofy work with PWA applications? Thanks.
Thank you for your suggestion
please keep improving ur software
We will. You may view our new design to code solution: czcams.com/video/WyWkf_5472o/video.html
How can i switch from one tab to another in dashboard is this possible?
In this video we do not support the other tabs. But it is possible to generate code for it using Locofy.
Amazing 😮
Thank you
✋ *Promo SM*
Thank you
Everything is agreed, but could you please create a duplicate layer version with responsive design completed in the Lightning version? is it coming with a responsive version (duplicated layer version), or do need to create it again with responsiveness in the Lightning version?
At the moment we do not have plans to create a duplicate version of the layer but we have noted your request for it.
Thanks, but please bring it ASAP; my tasks are delayed because of this. 😅 I am Recreating the responsive version from the completed version. That’s why
I got one question? Hey james you just add hover effect for one listing items and it is working for all? You made the component on builder right? But it is already working on the preview screen? Does changes made in the builder also sync in preview?
In Locofy Lighting you can create components in the preview. Also with regard to the hover effect, when you are editing a layer that is a components we not allow you to edit a property for all instances and thus the hover works for all of them. Currently not all changes made in the builder sync to the plugin.
So you mean when we regenerate the code it just regenerate the changes we made right?
Thats correct. We no longer regenerate the full code but instead update only the design changes. Do give it a try and share your feedback with us. Thank you
Very good. One question, is it possible to use locofy with projects created with relume? Thanks
At the moment we do not support relume but we have noted your request for it
do you have z promo code to join them?
We are currently in free beta and you can sign up and use the plugin at your convenience. Figma plugin link: www.figma.com/community/plugin/1056467900248561542/locofy-lightning-figma-to-code-in-1-click-free-beta
Take my money
We are currently in Free Beta so you can use the Locofy to optimise your design and generate high quality code. Should you need some assistance in optimising your design file you can follow the best design practices mentioned here: www.locofy.ai/docs/tutorials/design-best-practices/
Please help
Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s
Hi dear locofy i get a troublesome question when deploy to vercel. It fail and show"No Output Directory named "dist" found after the Build completed." How?
Hi, can you please reach our to LocoSid on our discord server: You can join our discord from this link: discord.com/invite/r6UDBhEQ4s
This looks amazing. Congratulations and all the best
Thank you
Locofy is an astounding tool and deserves it. Hopefully when pricing hits it can still be accessible to third world countries too. It`s really a tool that helps development of business everywhere. Please consider the pricing for non-USD earners with love ;)
Thank you, we have noted your suggestion for accessibility and pricing.
Please upload the file> in description
We will be publishing this file to the Figma community soon.
will it work will all figma design or just with auto layout ?
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/
what happens to all my interactive components created in Figma, all ditched, right
Should you create figma components we convert them to code components. We do not support Figma Variants at the moment but will add support for it soon. With respect to the interactions, at the moment we pick up the following interactions from the Figma Prototype: navigate, scroll, open overlay and open link. We will also extend support for the other interaction next quarter.
@@locofy_ai but Figma variants are the basis of any component.
I can't get it to work with tabbed sections, any advice?
At the moment we do not support creating tabbed section directly through locofy. You can connect with LocoSid on our discord and he can assist you with this. You can join discord from this link: discord.com/invite/r6UDBhEQ4s
this bullshit of a widget disregards all the complex work made on Figma interactive components and we have to create new interactions. What point is this?
At the moment we pick up the following interactions from the Figma Prototype: navigate, scroll, open overlay and open link.
@@locofy_ai there are tons of interactions that can be made on Figma besides those. So a UI designer has to do all interactions again on React, what is point of this?
This is complete bullshit, so my interactive components built in Figma are reduced to zero and I have to create new interactions? Locofy can shove this widget up is ass, thank you.
what if I created complex components in Figma, they are all tossed aside, right?
Should you create figma components we convert them to code components. We do not support Figma Variants at the moment but will add support for it soon.
@@locofy_ai Figma variants are the basis of any component. If you dont support variants whats the point?
Hi. Please share GitHub link of the code in the description.
underated video of responsive design( after i have compared for several video i watched)
Thank you
'Alright!'
Thank you