Quick Start Guide

This tutorial provides a minimal, step-by-step guide to generating your first Tkinter GUI from a Figma design.

Step 1: Create a Design in Figma

Before using Tkinter Designer, you need a GUI design in Figma.

  1. Sign up for a Figma account at figma.com.
  2. Create a new Design File.
  3. Inside the file, create a Frame. This Frame will become your main Tkinter window.
  4. Add elements to your Frame like rectangles, text, and images. For this quick start, create a simple rectangle and name it Button. Naming is crucial for the tool to recognize elements.

For a complete guide on how to structure your Figma file and name your elements correctly, please refer to the Figma Design Guide.

Step 2: Get Figma Credentials

Tkinter Designer needs two pieces of information to access your design.

1. Personal Access Token

  1. Log into Figma, go to Settings from the main menu.
  2. In the Account tab, scroll down to the Personal access tokens section.
  3. Enter a name for your token (e.g., "TkinterDesignerToken") and press Enter.
  4. Your token will be generated. Copy this token immediately and save it somewhere secure. You will not be able to see it again.

2. Figma File URL

  1. Open your Figma design file.
  2. Click the Share button in the top-right corner.
  3. Click Copy link.

Step 3: Generate Code with the CLI

The Command-Line Interface (CLI) is the quickest way to generate your GUI code.

Open your terminal or command prompt and run the tkdesigner command with your File URL and Token. Replace the placeholders with your actual credentials.

# Format: tkdesigner <FILE_URL> <TOKEN> -o <OUTPUT_PATH>
tkdesigner "https://www.figma.com/file/YOUR_FILE_ID/Your-Design-Name" "YOUR_FIGMA_TOKEN" -o ./my-first-app
  • FILE_URL: The URL you copied from Figma.
  • TOKEN: Your Personal Access Token.
  • -o ./my-first-app: This optional flag specifies the output directory.

Step 4: Explore the Output

Tkinter Designer will create a build directory inside your specified output path (./my-first-app/build). Inside, you will find:

  • gui.py: The Python script for your Tkinter GUI.
  • assets/: A directory containing all the image assets required for your GUI, such as the image for your button.

Step 5: Run Your New GUI

Now, you can run your newly created application.

  1. Navigate into the build directory:

    cd my-first-app/build

  2. Execute the Python script:

    python gui.py

Your Tkinter window should appear, displaying the GUI you designed in Figma. Congratulations, you've successfully used Tkinter Designer!