Troubleshooting Issues
Q. My designs are not responsive in the Locofy.ai preview.
By default, Locofy.ai just converts your designs to pixel-perfect frontend code without applying any styling and layout changes. To make it responsive, use Figma’s auto layout feature to make your designs responsive in Figma first and then you can use Locofy.ai to make it further responsive by controlling the styling and layout for different breakpoints.
Q. My Locofy.ai Builder is stuck on the loading screen.
If the Locofy.ai Builder is stuck in the loading screen, you can do 2 things to fix it:
- Go to your designs file and again sync your project with the Locofy.ai Builder.
- Create a new project in the Locofy.ai plugin and sync your designs with the new project
Q. I can’t see UI libraries option in the Locofy plugin
Locofy.ai only supports prominent UI libraries for React, Next.js, Gatsby and React Native. Currently, we do not support UI libraries for HTML/CSS projects
Q. Upon opening Storybook, I see a popup that says “Not Supported”
This popup appears because Locofy.ai does not support the version of Storybook you have installed in your codebase. Kindly update the Locofy.ai addon and if the error is still there, feel free to reach out to us.
Q. The React Native exported code looks different on different devices.
This happens because of absolute position. To make the items look the same across different devices, use auto layout of Figma to make it responsive.
Q. Why is the code in GitHub and Locofy Builder are different?
While the Locofy Builder has the ability to push the generated code to one of your GitHub repositories and handle conflicts, it does not sync back your GitHub code to the Builder. Locofy Builder only shows the code that is generated by Locofy.ai via your design files.
Q. After I run the project I see “csstype” package is missing.
This issue happens with our PNPM users and to avoid this, you need to manually run:
pnpm add csstypeQ. I only exported one screen but there are more than that in the Builder.
Whenever you link your elements in one frame to another, for example when you are adding an action, then when you sync that frame with the element, the other frame will also be synced with the Locofy Builder.
Q. Exported code has a lot of unnecessary CSS styles and divs.
Locofy.ai generates the code based on your design files. Therefore, the cleaner and organized your design file would be, the better the code quality would be. For this, we offer a Design Optimizer feature that you could use.