Import your Figma Designs to Symplr Studio

​

Overview

Bringing your Figma designs into Symplr Studio allows you to seamlessly transform static UI designs into a structured, interactive application blueprint. Instead of rebuilding screens manually, Symplr intelligently interprets your design and converts it into screens, components, and a foundation for your app’s logic and navigation. This guide walks you through how to import your Figma designs and prepare them for further development within Symplr.

​

What are we going to build?

We are building an app from Figma design:

1. Build all the screen available in the Figma
2. Navigate to other screen

​

Prerequisites

Before you begin, ensure you have the following:

• Access to a Figma design file with a valid shareable link
• A Symplr account with appropriate permissions
• Stable internet connectivity

​

Importing Figma Files into Symplr

Importing a Figma file is the first step in using Symplr. This process allows the platform to access your design assets and prepare them for code generation. Steps to Import Figma File: Step 1: Copy the Figma File URL Open your Figma design and copy the shareable file URL. Step 2: Launch the Symplr Application Log in to your Symplr account and navigate to the Home page. Click on the “Import from Figma” button to begin the import process. Step 3: Provide the Figma URL Paste the copied Figma URL into the input field and click “Continue”. Ensure that the URL is valid and accessible. Step 4: Configure Application Settings
A configuration pop-up will appear. Provide the following details:

• App Name: Enter a unique name without spaces
• Theme: Select the preferred application theme
• React Native Version: Choose the appropriate version based on your project requirements
• Package Name: Define the application package identifier

After entering all required details, click “Continue.” Step 5: Initiate Import Process Symplr will begin importing the selected Figma file and processing its design elements.This may take a few moments depending on the size and complexity of the design. Step 6 Review Imported Screens Once the import is complete, Symplr will display a Storyboard View showing all imported screens. Carefully review the following:

• Screen hierarchy and structure
• Component grouping and layout
• Navigation flow between screens\

Step 7: Validate Design Mapping Ensure that all elements have been correctly mapped and no components are missing or misaligned.If necessary, make adjustments in your Figma file and re-import to improve accuracy.

​

Build & Run the Application

After generating and downloading the code, Symplr enables you to build and run the application directly within the platform, allowing you to validate functionality before deployment.  Steps to Build and Run the App: Step 1: Navigate to Build & Run Section From the top-right corner of the symplr interface, click on “Build & Run App.” This section allows you to compile and execute your application. Step 2: Initiate the Build Process Click on the “Build” button to start compiling the application. The system will begin processing the generated code and preparing it for execution. Step 3: Monitor Build Progress Wait for the build process to complete. The system may display progress indicators during this step.
Step 4: Run the Application Once the build is successful, it will proceed to run the application within the Symplr environment.

​

Problems?

If you encounter any issues while using Symplr, first ensure that all steps in the guide have been followed correctly and that your configurations (such as Figma setup, app definitions, or workflows) are properly defined. If the issue persists, you can:

• Reach out to the Symplr Support Team for further assistance