The Figma import feature provides the ability to use Figma designs to jumpstart application development.
To use the Figma import feature, select Figma Import Wizard in the toolbar:
To download the Figma project assets, the wizard will need the team ID of a Figma team and the project it is associated to, and an access token giving the wizard permission to read from the team repository.
From within the Figma web page or desktop application, you can copy your team ID information by right clicking on the desired team under the ‘Teams’ section on the left hand side and selecting ‘Copy Link’. This goes in the ‘Figma Team Link/ID’ field of the wizard.
You then need to create an access token for your project. Instructions for creating an access token can be found here. The only scope required for the token is read access on file content. Configure the expiration date as appropriate for your needs. Once you have the token, copy it into the ‘Access Token’ field.
You can control how the import is executed by changing the import options. Import text layer as Storyboard render extensions will create text render extensions for text instead of images.
This could result in small minor inconsistencies with the original file due to font conversion. Wrap text in render extensions will indicate to the model to treat text as wrapped within its bounding box. The default behaviour will assume all text is on one line. Strip Storyboard naming conventions and Convert Underscores to Camel Case will sanitize the names of objects in the model as described. Ignore unused images will automatically delete any images that are unused by the final generated model.
Select whether to import into an existing project or into a new project. Once the Figma file is imported the application opens in the Storyboard editor. The layer information is maintained, and the layers created as part of the model are automatically included in the Application View as children of the screen(s) that they were associated with.
After specifying the Figma design to import, click ‘Next’ to navigate to the content selection page. The content selection page lists all the Figma pages that are part of the selected design and allows you to select which pages you want to include to form the initial screen set.
After the relevant content is selected, click ‘Next’ to navigate to ‘Font Mappings’ page where you can map missing or unknown fonts referenced by the Figma design to known fonts from the filesystem or from the default list.
When you have selected your fonts, click ‘Finish’. Your application model is then created and opened in the Storyboard editor.