Locofy.ai | Figma design to React Native travel app in 19 mins with Locofy [Quick Build]
Vložit
- čas přidán 23. 07. 2024
- In this video you'll be learning how to go from a Figma mobile app design to a React Native travel app using Locofy.ai!
With Locofy.ai you can turn your Figma designs into React, React Native, HTML-CSS, Next.js or Gatsby code and ship 5-10x faster.
Get Locofy.ai (FREE Beta): www.locofy.ai/
Learn how to get started with Locofy.ai: guide.locofy.ai/getting-start...
Try it out yourself with our guided sample project: www.figma.com/community/file/...
Timestamps:
00:00 Introduction
00:38 Getting the Locofy Plugin
00:58 Introduction to Locofy Plugin - Tagging
02:54 Tagging a Material design input using React Native Paper library
04:17 Global layers vs Other layers
04:42 Setting up bottom tab navigation
06:14 Setting up drawer menu navigation
07:39 Setting up custom top tabs
08:46 Making scrollable content
09:48 Tagging your splash screen
10:08 Tagging your status bars
10:50 Syncing to Locofy Builder to view code
11:15 Introduction to Locofy Builder
11:55 Creating components and adding props for dynamic content
13:44 View and share live responsive prototype with collaborators
15:10 Exporting and running your code
17:59 Outro
![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 | Figma to React Native - Spotify Clone [Speedrun]](http://i.ytimg.com/vi/ADQNeM5BQ-0/mqdefault.jpg)
Absolutely amazing video. Straight to the point and easy to follow. Keep it up!
Thanks for your kind words. Happy building with Locofy.ai!
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!
Dang, Locofy will blow up 🔥
🔥
Maybe the best Figma plugin ❤🔥 Simply awesome!! We need Vue integration asap ! 😃
Vue is on the roadmap, do stay tuned!
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
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!
Looking for this, will try it
Awesome @yytambaya, let us know if you need any help getting started
You a Genius man. 🎉😂
Means a lot!
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.
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/
awesome
Thanks
How it will responde to incremental UI changes? New components to an existing page for example..., can you show an example connection with a open API? And another using a git workflow with github for incremental changes?
What will happen if I get the builded locofy app and put my logic to it and after a while a need to re-build a new locofy with new stuff in onde existing page, Will I loose all the implementation ( API Services and business logic?) , git will throw a 100 lines of diff?
Thanks for the video btw :)
Hey Matheus, great question! Our GitHub integration will allow you to push your locofy generated code to existing repos(that already have your previous UI code) and handle conflicts in the Locofy builder itself. Or, you can even push to another branch and create a PR and handle conflicts in Github. We have a video on the same: czcams.com/video/nnA4tfe4GDM/video.html
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.
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.
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
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!
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?
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
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
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
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
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.
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.
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!
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/
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!
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 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
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/
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/
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!
.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
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?
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.
does this work with a react native EXPO project?
Yep, we support both React Native CLI as well as Expo.
how do we connect the apis to this app.
Checkout this video on how you can extend the code and add APIs to it. czcams.com/video/I6phRCmYFvo/video.html&ab_channel=Locofy
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.
Wow, this is compatible with EXPO?
Hey @gerito, yes it is compatible with Expo, please let us know if you run into any issues
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 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
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?
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
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