Generate Entire App Code

With WiseGPT, developers can effortlessly convert a Figma file into functional web or mobile application code directly within VS Code, boosting productivity and streamlining workflow. Here’s how to do it:

1

Select Generate Entire App Code option

After you have logged in with WiseGPT, select the Generate Entire App Code option.

2

Connect your Figma account

To connect your Figma account and enable direct access to your designs, navigate to the Connect your Figma account section on the right side of the WiseGPT interface, and click Connect Figma. This will prompt you to authenticate and link your Figma account with WiseGPT.

Once you have successfully connected your Figma account, the screen will display Connected to Figma. You can now close this tab and return to VS Code to continue the process.

3

Add your Figma account and URL details

Your connected account will be displayed in the Figma account field. If you wish to link another Figma account with WiseGPT, click Connect another account, and then paste your Figma URL into the designated field as shown below.

After filling in the necessary details, click Proceed to initiate the integration process with WiseGPT.

4

Initialize your new application project

To begin setting up your new application, enter a name for your application in the Name your Application field, and select the desired framework from the Framework dropdown menu. These initial settings are crucial for defining the core attributes of your application from the ground up.

5

Configure your application

React

After selecting your preferred framework (React.js, Next.js, or HTML), configure your application for the selected framework:

1. React.js Configuration:

• Programming language: Select either JavaScript or TypeScript.

• Bundler: Choose from CRA, CRACO, Webpack, or Vite.

• Design system: Select either Tailwind CSS or Chakra for styling.

2. Next.js Configuration:

• Programming language: Select either JavaScript or TypeScript.

• Design system: Select either Tailwind CSS or Chakra for styling.

3. HTML Configuration:

• Design system: Select either Tailwind CSS or CSS for styling.

Ensure you complete all required fields to properly initialize your project based on the selected framework and then click Configure project. Sample app configurations setup for React:

Flutter

After choosing Flutter as your framework, select an appropriate state management library from the State Management dropdown menu to manage the state of your application efficiently. Available options include None (Only UI), GetX, RiverPod, Provider, and BLoC.

After selecting your preferred framework and state management, finalize the setup by clicking on the Configure project button. This will complete the initialization of your new Flutter application based on the specified settings.

6

Select Figma screens for code generation

React

Select the Figma screens you want to extract for your Web application by checking the boxes next to each desired screen. You can select individual screens or click Select All to choose all available screens.

Once you have selected all the necessary screens, click Proceed with (no. of screens) screens to continue with the code generation process.

Wait while WiseGPT retrieves and processes your selected Figma designs. This process should only take a few seconds, as indicated by the progress bar.

Flutter

Select the Figma screens you want to extract for your Flutter project by checking the boxes next to each desired screen. You can select individual screens or click Select All to choose all available screens.

Once you have selected all the necessary screens, click Proceed with (no. of screens) screens to continue. This process lets you specify which design elements will be included in your application.

Wait while WiseGPT retrieves and processes your selected Figma designs. This process should only take a few seconds, as indicated by the progress bar.

7

Review selected screens for generating code

React

Review the selected Figma screens to ensure they are correct. Once you have confirmed your selection, click Generate code of (no. of screens) Screens to proceed with generating the code for your Web application.

WiseGPT will now generate the code for your selected Figma screens. Please wait until the progress reaches 100% completion.

Flutter

Review the selected Figma screens to ensure they are correct. Once you have confirmed your selection, click Generate code of (no. of screens) Screens to proceed with generating the code for your Flutter application.

WiseGPT will now generate the code for your selected Figma screens. Please wait until the progress reaches 100% completion.

8

Review the generated code and save your project

React

Review the generated code files and the README.md document to understand the project structure and guidelines. Once you are satisfied with the review, click Save project to finalize and save your Web application project.

Flutter

Review the generated code files and the README.md document to understand the project structure and guidelines. Once you are satisfied with the review, click Save project to finalize and save your Flutter application project.

The entire process of generating your app code is now complete. Your application is ready for further development and customization.