11 Export to Toolkit

This topic provides information on Export to Toolkit.

This feature allows you to seamlessly convert your Figma design into a code-readable JSON structure. This JSON file contains all the component properties and layout details, making it easy for developers to use the design directly in their toolkit for further development and integration. Once, the design is complete, the designer should handover the design to the developer for exporting.

Note:

Ensure that the toolkit is running in the background before initiating the export process.
  1. Click the Drag and Drop file picker to open your file explorer. Then, navigate to the folder containing your main application files.

    Figure 11-1 Export to Toolkit


    Description of Figure 11-1 follows
    Description of "Figure 11-1 Export to Toolkit"

  2. In the app folder, select package.json and click OK to set the new JSON export path.

    Figure 11-2 Setting JSON export path


    Description of Figure 11-2 follows
    Description of "Figure 11-2 Setting JSON export path"

    The input field displays the selected path.

    Note:

    You can manually edit this path if any adjustments are needed.

    Figure 11-3 Edit JSON export path


    Description of Figure 11-3 follows
    Description of "Figure 11-3 Edit JSON export path"

  3. Choose the export mode that meets your design requirements after setting the file path.
    Four export modes are available, each designed for a specific purpose:
    1. Individual Page
    2. Transaction
    3. Widget
    4. After completing configurations