Learn how to import Figma designs into usable code in your Crowdbotics project.
The Figma Import tool allows you to import designs as usable React Native code into your project to quickly get a prototype together.
Importing Designs with Figma
To start using the Figma Import, head over to the Storyboard. From there, click on "Modules."
The Crowdbotics storyboard after clicking modules.
A menu will pop up. Beside the button called "Create A Module", there is a downward facing arrow. Click this and then click on "Import Design"
Menu prompting you to "Import Design."
From here, you will be given a form that asks for a URL to import your designs from. Once you copy and paste your Figma file into the first field of the form, the Page and Frame Name dropdowns will populate based on your Figma file.
Import menu before adding a Figma link.
And here's the import menu fully populated with a Figma file, Page Name, and Frame Name.
Choose the Page and Frame you desire, then hit "Import." Your designs will be imported, and a separate module (accessible under "Screens" in your frontend code) will be created for each frame in the currently selected page of your Figma design file. If any components are not supported, they will be omitted from the import.
After that, your newly imported designs will be viewable on the Storyboard. They will also be added to your repository, under "Screens."
2 newly installed screens (right), imported from Figma .
Setting Your App's entry point to a Figma Screen
Now that you've imported some designs, you may want to use one of them as the first screen users see when they load your app. By default, your app's initial entry point--the first screen that a user sees when they open the app--is set to be one of your installed modules. If you'd like to customize this, you can modify the code in your `modules/index.js` file. The value you want to change here is called initialRoute. In modules/index.js, it looks like this by default:
export const initialRoute = modules[0].title;
Instead of modules[0].title, you can change this value to the string name of either a specific module or Figma screen you would like to set as the entry point of your app.