Can I upload my own designs?

Find out more about uploading mockups, wireframes, and designs

Crowdbotics now supports direct upload from Figma. If you used Figma to design your screens, you can now use those to generate React Native code within the Crowdbotics platform. 

There are two ways to import your Figma designs: 

1. Through the Create Wizard:

From the Create App wizard, select “Import From Design”. You’ll be prompted to provide the Figma URL, which will populate the list of pages available in the file. Select a page name from the dropdown, then press Import. When the app is created, a module will be created for each frame in the indicated page. This process may take multiple minutes.

2. The second way to import your Figma designs is through the Storyboard Tool.

From the Storyboard Tool, click Modules (on the right), then under the arrow next to "Create a Module" you can choose to import your designs. 

You will then see the below screen.

From here you will need to copy & paste the URL for your Figma design.

On Figma, make sure that the permission of the file is set to “anyone with the link can view this file”. If that doesn’t work, or if you do not want to make your file public, you can reach out to engineering@crowdbotics.com and we can help.

This will populate the list of pages available in the file. You then select a page from the dropdown options. From the next dropdown (titled "Frame Name"), select which frame name you’d like to import as a single module or select “All" for all of your frames.

Finally, press Import. Importing a single frame usually takes less than a minute.

You can also view the code for each module in the Code Editor. Note that in order to use the code editor, you must first accept the GitHub invitation sent to your email. 

Take a look at the video below for more: