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.
Thanks for the video locofy looks amazing. I have two questions: For make animations or trigger when a button is clicked, that interaction must be done inside figma fist? - if i have a menu with a buttin to change partial part of the page , how i can do that? Any tutorial that cover this questions? Thanks so much.
For animations, you can use the advanced CSS properties under step 3. Locofy also has prebuilt effects you can use to trigger animations. Refer to this doc: www.locofy.ai/docs/tagging/animations/tagging-animations/
@@saurabhrajput2448 Hey Saurabh, thanks for trying Locofy! You can reach us any time at hello@locofy.ai, or join our Slack Channel at www.locofy.ai/join-slack for more real time support!
At the moment we do not have the final project file that you can view directly in the builder but you may sync our sample project from the design file available below www.figma.com/community/file/1140675081699037964/locofy-sample-project-fickleflight-mobile
Yes absolutely, we automatically read Figma constraints and autolayout settings to generate responsive flexbox code. Do ping us on our community channel if you need help with this!
tried converting a figma design with a lot of drop downs and drawers into simple html & css and i am yet to understand when it decides to flag some component as a drawer or not yet... will have no problem of tagging it as an audio -__- please make it make sense.
I am confused here, what did you do with the status bar? The part about status bar suddenly got cut out, did you remove it after exporting to builder because ios/android have default?
I followed your steps , trying to change page after press button but this did not work , press has no effect , any suggestions ? I am using figma installed app (mac)
Hi Fekri, thanks for reaching out - sorry that you're facing this issue. Could you please share your Figma file with us at hello@locofy.ai to investigate this?
Hi @unknown, you will need to create a React Native project from the projects dropdown to see the Global Tags. Please let us know if you need help with that
Hi Showbik, we are generating pixel-perfect UI code based on your Figma designs! We do read some prototype links - and you can further control navigation through bottom tabs, drawer menus as shown in the video
How did you make scrolling work in the Locofy live preview and in the simulation? It seems like it does it automatically in the video but it doesn't work for me? Is there a specific setting that is required?
Hey there, you can absolutely build a fully functional app. The code that is generated is production-ready UI code, and all you need to do is to add your logic layer via your code editor - this means that it will require some additional coding. Locofy will save you 80-90% of the time that you would usually take to develop your fully functional app.
Sorry you had to face this. We're working on a fix now. Please join our Slack community to get an update as soon as this is fixed: www.locofy.ai/join-slack
Hi Yun Wang, scroll view is available for React Native framework. For web frameworks like React, HTML/CSS, NextJS and Gatsby, you can simply apply "Scroll" property in Figma and we will automatically read that and generate a scrolling container for you. Do let us know if you need help with this!
ye jo ap n command run ki Mac k lye npm i , cd ios, pod install and npm run ios agr hame window m project open krna h emulator pr to konsi command run krni pregi kindly koi bta dy
Hi there, could you please reach out to us at hello@locofy.ai? We'd like to better understand to be of help. If you are new to React Native, you can also try using Expo which is easier to setup and run your simulation. Please check out this guide: guide.locofy.ai/using-expo-for-react-native
Hi Roman, this is currently not supported. Thanks for your suggestion, we're constantly adding new tags and will add camera open/file upload for React Native to our list of tags we plan to add
@@locofy_ai It wll be really incredible if you can do this. Locody is the best tool for me right now. It indeed speeds up the product design and development cycle 5x.
@@Dan-kt7hk Really amazing to hear that - we will keep you posted on this! Also, we're looking for projects to showcase and would love to learn more about what you're working on :) Please drop us an email at hello@locofy.ai if you're open to this!
Hi @thanhauco, it's on our roadmap but we're currently focusing on the existing frameworks that we already support! As of now, Vue is slated for Q2'2023
Hi @Motivation World, at the moment you can export code and add logic/integrate APIs in your code editor. In the next 1-2 months, we'll be letting you integrate APIs directly inside the Locofy Builder, so stay tuned!
Hi @swastikaggarwal221, currently video tag is not supported for React Native - we will be looking to add support for more tags in the upcoming few sprints!
@@swastikaggarwal221 For the moment, we suggest that after exporting the code, you can easily extend it to add your Video component. Here's a reference that we hope is useful for you: docs.expo.dev/versions/latest/sdk/video/
Hi Jagadeesh, we are still creating more guides for React Native which will be launched soon. In the meanwhile to unblock you, could you please invite hello@locofy.ai to your figma file so we can help to investigate this?
Hi there, could you please reach out to us at hello@locofy.ai? We'd like to better understand to be of help. If you are new to React Native, you can also try using Expo which is easier to setup and run your simulation. Please check out this guide: guide.locofy.ai/using-expo-for-react-native
Hi @Motivation World, due to overwhelming response for our Figma to React and React Native solutions, we will be building deeper for both of them in the coming quarter. But Flutter is on our roadmap and it's currently slated for Q1'23, do stay tuned!
can u help me please, why is always showing error code like this while running emulator error: could not find or load main class org.gradle.wrapper.gradlewrappermain caused by: java.lang.classnotfoundexception: org.gradle.wrapper.gradlewrappermain
Hi Yoghi, you can refer to this React Native set up documentation to install the required dependencies for your Mac/Windows/Linus environment reactnative.dev/docs/environment-setup Please refer to the tab for "React Native CLI Quickstart" We're also going to be creating some additional guides for React Native environment set up soon!
@@locofy_ai it still not work, if i'm making new project it works, but if i'm converting figma to locofy n follow the step, 100 error, is always show gradlewrappermain javalang blablabla
Hi @@yoghijulian6192, sorry that you're facing this - could you please email us the error log and the list of steps that you used to try and build the project? Also, please invite hello+debug@locofy.ai to your Locofy project in the Builder, so that we can export the code as well to check for any issues. Thanks for raising this and we're here to help
![Locofy.ai | Figma Design to Live Website with Locofy [Quick Build]](http://i.ytimg.com/vi/6UIfbJfz1jI/mqdefault.jpg)
![Locofy.ai | Figma Design to Live Website with Locofy [Quick Build]](/img/tr.png)
![Locofy.ai | Going from a Stocks Dashboard Figma Design to a Next.js app with Locofy.ai [Quick Build]](/img/n.gif)
this is the greatest thing that has ever been created. you have done amazing work. thank you. thank you so much.
Thanks for your encouraging words, David!
Maybe the best Figma plugin ❤🔥 Simply awesome!! We need Vue integration asap ! 😃
Vue is on the roadmap, do stay tuned!
this is too good to be true... mindblown :O
Thank you! Give it a try. Keep in mind it is beta and still might get a few things wrong. But we are actively improving it!
Absolutely amazing video. Straight to the point and easy to follow. Keep it up!
Thanks for your kind words. Happy building with Locofy.ai!
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?
Thanks for the video locofy looks amazing. I have two questions:
For make animations or trigger when a button is clicked, that interaction must be done inside figma fist?
- if i have a menu with a buttin to change partial part of the page , how i can do that? Any tutorial that cover this questions? Thanks so much.
For animations, you can use the advanced CSS properties under step 3. Locofy also has prebuilt effects you can use to trigger animations. Refer to this doc: www.locofy.ai/docs/tagging/animations/tagging-animations/
Locofy 🔥🔥🔥
Wil try definitely...
Any help and support for in case stuck in problem?!!!
@@saurabhrajput2448 Hey Saurabh, thanks for trying Locofy! You can reach us any time at hello@locofy.ai, or join our Slack Channel at www.locofy.ai/join-slack for more real time support!
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
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.
.very great tutorials, how can i have final project files to explore?
At the moment we do not have the final project file that you can view directly in the builder but you may sync our sample project from the design file available below
www.figma.com/community/file/1140675081699037964/locofy-sample-project-fickleflight-mobile
It seems awesome. Can we make responsive layout with this like content shrinks depends on size of screen?
Yes absolutely, we automatically read Figma constraints and autolayout settings to generate responsive flexbox code. Do ping us on our community channel if you need help with this!
@ashish srivastava Thanks for the support Ashish! Let us know if you have any feedback or questions
The Software in which user can Pay Happily, Loco when you make this Paid please always maintain good pricing so that all can use.
Thanks for your kind words! Point noted.
tried converting a figma design with a lot of drop downs and drawers into simple html & css and i am yet to understand when it decides to flag some component as a drawer or not yet... will have no problem of tagging it as an audio -__- please make it make sense.
Hey, thanks for trying out the plugin. We have covered how to create drawers on our doc: www.locofy.ai/docs/tagging/examples/tagging-a-drawer/
I am confused here, what did you do with the status bar? The part about status bar suddenly got cut out, did you remove it after exporting to builder because ios/android have default?
You can tag your status bar design as a Status Bar in the plugin. We omit Status bar designs in the final code, once you export and run it.
this is great ,
can you explain about
1. localization
2. and dark and light mode(how to do it)
At the moment we do not support the localization and generating light and dark mode but we have it in our roadmap for later this year.
I followed your steps , trying to change page after press button but this did not work , press has no effect , any suggestions ? I am using figma installed app (mac)
Hi Fekri, thanks for reaching out - sorry that you're facing this issue. Could you please share your Figma file with us at hello@locofy.ai to investigate this?
Hello budy, how are you ?
Can you explain how to make the search form?
Please refer to our doc here: www.locofy.ai/docs/export-and-deployment/examples/exporting-custom-form/
I can't find tag global layer. Only tag layers and drop and built Components menu... Would you help me?
Hi @unknown, you will need to create a React Native project from the projects dropdown to see the Global Tags. Please let us know if you need help with that
brother, so this plugin will convert ur figms prototype in exect same code for react native?
Hi Showbik, we are generating pixel-perfect UI code based on your Figma designs! We do read some prototype links - and you can further control navigation through bottom tabs, drawer menus as shown in the video
Why I can not add marginLeft and other styling properties when making custom styles ?
Hi @samrann sam, thanks for the suggestion - we're working on supporting these additional styling properties and will keep you posted on this
How did you make scrolling work in the Locofy live preview and in the simulation? It seems like it does it automatically in the video but it doesn't work for me? Is there a specific setting that is required?
If your design file is larger than the Locofy preview, then it automatically adds scroll.
So this is only for a prototype? You can't build a fully functional app that you can submit to the appstore?
Hey there, you can absolutely build a fully functional app. The code that is generated is production-ready UI code, and all you need to do is to add your logic layer via your code editor - this means that it will require some additional coding.
Locofy will save you 80-90% of the time that you would usually take to develop your fully functional app.
does locofy builder always take long to load the code or is there an issue from my side?
Sorry you had to face this. We're working on a fix now. Please join our Slack community to get an update as soon as this is fixed: www.locofy.ai/join-slack
Can I get help from you to start my app
Hi Tony, what do you need help with? We're here to be of support - could you send an email to us at hello@locofy.ai?
Why can't I see ‘scroll view’ when creating a web page?
Hi Yun Wang, scroll view is available for React Native framework. For web frameworks like React, HTML/CSS, NextJS and Gatsby, you can simply apply "Scroll" property in Figma and we will automatically read that and generate a scrolling container for you.
Do let us know if you need help with this!
Wow, this is compatible with EXPO?
Hey @gerito, yes it is compatible with Expo, please let us know if you run into any issues
does this work with a react native EXPO project?
Yep, we support both React Native CLI as well as Expo.
ye jo ap n command run ki Mac k lye npm i , cd ios, pod install and npm run ios agr hame window m project open krna h emulator pr to konsi command run krni pregi kindly koi bta dy
Hi there, could you please reach out to us at hello@locofy.ai? We'd like to better understand to be of help. If you are new to React Native, you can also try using Expo which is easier to setup and run your simulation. Please check out this guide: guide.locofy.ai/using-expo-for-react-native
Any ideas on how can I tag a camera open button or file upload button?
Hi Roman, this is currently not supported. Thanks for your suggestion, we're constantly adding new tags and will add camera open/file upload for React Native to our list of tags we plan to add
@@locofy_ai It wll be really incredible if you can do this. Locody is the best tool for me right now. It indeed speeds up the product design and development cycle 5x.
@@Dan-kt7hk Really amazing to hear that - we will keep you posted on this! Also, we're looking for projects to showcase and would love to learn more about what you're working on :) Please drop us an email at hello@locofy.ai if you're open to this!
how do we connect the apis to this app.
Checkout this video on how you can extend the code and add APIs to it. ua-cam.com/video/I6phRCmYFvo/v-deo.html&ab_channel=Locofy
can we convert figma to Vue? I really need it for our proj soon
Hi @thanhauco, it's on our roadmap but we're currently focusing on the existing frameworks that we already support! As of now, Vue is slated for Q2'2023
Can we add logic and integrate api using locofy plugin?
Hi @Motivation World, at the moment you can export code and add logic/integrate APIs in your code editor.
In the next 1-2 months, we'll be letting you integrate APIs directly inside the Locofy Builder, so stay tuned!
I want to add a video in mobile app , I used a react native option in locofy but its not showing me the video option in tagging
Hi @swastikaggarwal221, currently video tag is not supported for React Native - we will be looking to add support for more tags in the upcoming few sprints!
@@locofy_ai okk ..
@@swastikaggarwal221 For the moment, we suggest that after exporting the code, you can easily extend it to add your Video component. Here's a reference that we hope is useful for you: docs.expo.dev/versions/latest/sdk/video/
Hi, Splash screen preview is not getting generated in my case. ,can we have any reference on how to tag splash screen with Locofy?
Hi Jagadeesh, we are still creating more guides for React Native which will be launched soon. In the meanwhile to unblock you, could you please invite hello@locofy.ai to your figma file so we can help to investigate this?
@@locofy_ai invited.
You a Genius man. 🎉😂
Means a lot!
buhat sy error aarhy thy is lye pouch rha kindly koi bta dy
Hi there, could you please reach out to us at hello@locofy.ai? We'd like to better understand to be of help. If you are new to React Native, you can also try using Expo which is easier to setup and run your simulation. Please check out this guide: guide.locofy.ai/using-expo-for-react-native
excellent explanation about the tool
Thanks a lot, Venkata! We would love to invite you to join our Slack community: www.locofy.ai/join-slack
awesome
Thanks
Can we convert figma designs into flutter?
Hi @Motivation World, due to overwhelming response for our Figma to React and React Native solutions, we will be building deeper for both of them in the coming quarter. But Flutter is on our roadmap and it's currently slated for Q1'23, do stay tuned!
@@locofy_ai appreciate
Dang, Locofy will blow up 🔥
🔥
Looking for this, will try it
Awesome @yytambaya, let us know if you need any help getting started
This is awesome.
Btw, does locofy plugin has auto save for progress?
Hey Mohamed, just to understand better, what kind of auto save are you referring to?
@@locofy_ai nvm, its actually saving my progress in the figma plugin
@@locofy_ai what if i want my nav bar to stick on the top?
Are you referring to your header? Tag it as a header and it will stick to the top of your mobile app. Let us know if you need help with this!
can u help me please, why is always showing error code like this while running emulator error: could not find or load main class org.gradle.wrapper.gradlewrappermain caused by: java.lang.classnotfoundexception: org.gradle.wrapper.gradlewrappermain
Hi Yoghi, you can refer to this React Native set up documentation to install the required dependencies for your Mac/Windows/Linus environment
reactnative.dev/docs/environment-setup
Please refer to the tab for "React Native CLI Quickstart"
We're also going to be creating some additional guides for React Native environment set up soon!
@@locofy_ai it still not work, if i'm making new project it works, but if i'm converting figma to locofy n follow the step, 100 error, is always show gradlewrappermain javalang blablabla
Hi @@yoghijulian6192, sorry that you're facing this - could you please email us the error log and the list of steps that you used to try and build the project?
Also, please invite hello+debug@locofy.ai to your Locofy project in the Builder, so that we can export the code as well to check for any issues.
Thanks for raising this and we're here to help
Hi, after downloading the zip file from Locofy Builder. Downgrade the react-native package on package.json to 0.68.something
Works like a charm