Using the GUI

Tkinter Designer comes with its own graphical user interface to make the code generation process simple and intuitive.

Launching the GUI

To start the Tkinter Designer GUI, navigate to the project's root directory in your terminal and run the following command:

# If you cloned the repository
cd Tkinter-Designer-master
python gui/gui.py

If you installed via pip and do not have the source code, you will need to download the source or use the CLI method.

The GUI window will appear:

Tkinter Designer GUI

GUI Fields Explained

The interface has three input fields and one main action button.

  1. Token ID

    • Purpose: This field is for your Figma Personal Access Token.
    • How to get: Follow the instructions in the Quick Start Guide to generate a token from your Figma account settings.
    • Action: Paste your token here.

  2. File URL

    • Purpose: This is the URL of the Figma design file you want to convert.
    • How to get: Open your design in Figma, click the "Share" button, and then "Copy link".
    • Action: Paste the full URL here.

  3. Output Path

    • Purpose: This field specifies the directory where the generated project files will be saved.
    • Action: Click the button with the folder icon to the right of the entry field. A file dialog will open, allowing you to browse and select a destination folder.

Generating the Code

Once you have filled in all three fields, click the Generate button.

Tkinter Designer will then: 1. Connect to the Figma API using your token. 2. Fetch the design data from your file URL. 3. Process the data, download image assets, and generate the Python code. 4. Save the files to a new build subdirectory within your chosen Output Path (e.g., C:/Your/Output/Path/build).

After the process is complete, a success message will pop up, confirming the location of your generated files. You can then navigate to that directory to run your new application.