10.1 Steps to Export Design to Toolkit

This topic provides information on export design for the toolkit.

  1. Run the UI Toolkit.
    Once your Figma section is ready, launch the UI Toolkit.
    1. In the first step, Folder Creation, enter all necessary details of your design.
    2. Ensure that the toggle Import from Figma is set to Yes.

    Figure 10-1 Create a new module and component


    Description of Figure 10-1 follows
    Description of "Figure 10-1 Create a new module and component"

  2. Click Next to provide the Access Token, Page ID, and Component Node ID on the screen prompted.
  3. Generate Access Token.
    To generate an Access Token:
    1. Navigate to User Profile, click Settings, and then click Security Tab.
    2. Under Personal Access Tokens, create a new token.
    3. Specify the details such as Name and Duration.
    4. For Scope, select Read-only access for the following permissions:
      • Dev Resources
      • File Content
      • File Metadata
      • File Versions
      • Library Assets
      • Library Content
      • Team Library Content
      • Variables
      • Webhooks
    5. Copy the generated token and paste it into the Access Token field in the Toolkit.

    Figure 10-2 Generate new token


    Description of Figure 10-2 follows
    Description of "Figure 10-2 Generate new token"

  4. Click Generate token.
  5. Generate Page ID and Component Node ID.

    To generate the identifiers:

    1. Run the plugin in Figma.
    2. Click Export.
    3. Select the Figma section that contains the complete design.
    4. Select the main design and responsive designs (if applicable).
  6. Click Submit to generate the Page ID and Component Node ID.
  7. Copy and Paste IDs in Toolkit.

    Copy the Page ID and Component Node ID provided by the plugin.

    1. Paste them into the respective fields in the Toolkit interface.

    Figure 10-5 Import from Figma


    Description of Figure 10-5 follows
    Description of "Figure 10-5 Import from Figma"

  8. Click Import to import the design.
  9. Confirmation.
    1. If the import is successful, a confirmation message will appear.
      All components are successfully imported from the Figma design.
    2. If unrecognized components are detected, they will be listed in the right panel.

    Figure 10-6 Import from Figma - Confirmation


    Description of Figure 10-6 follows
    Description of "Figure 10-6 Import from Figma - Confirmation"

Parent topic: Export to Toolkit

10.1 Next Steps

After completing the import, proceed with the standard Toolkit workflow starting from Step 3: Layout Selection. For detailed guidance on subsequent steps, refer to the UI Toolkit documentation.