How to use Tkinter Designer

May 11, 2026 · View on GitHub

Translations

Table of Contents

  1. Getting Started

    1. Install Python
    2. Install Tkinter Designer
    3. Make a Figma Account

  2. Formatting Your Figma Design

    1. Reference
    2. Element Guide

  3. Using Tkinter Designer

    1. Personal Access Token
    2. Getting your File URL
    3. Using The CLI
    4. Using The GUI

  4. Troubleshooting



Getting Started [Top]

1. Install Python

Before using Tkinter Designer, you'll need to install Python.

Tkinter Designer supports Python 3.9 and newer.

Later in this guide, you will use the Package Installer for Python (pip), which may require you to add Python to your system PATH.


2. Install Tkinter Designer

Three options:

  1. pip install tkdesigner

  2. Install Poetry

    • poetry new <gui_project_name> && cd <gui_project_name>
    • poetry add tkdesigner
    • poetry install

  3. To run Tkinter Designer from the source code, follow the instructions below.

    1. Download the source files for Tkinter Designer by downloading it manually or using GIT.

      git clone https://github.com/ParthJadhav/Tkinter-Designer.git

    2. Change your working directory to Tkinter Designer.

      cd Tkinter-Designer

    3. Install the necessary dependencies by running

      • pip install -r requirements.txt
        • In the event that pip doesn't work, also try the following commands:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • If this still doesn't work, ensure that Python is added to the PATH.

    This will install all requirements and Tkinter Designer. Before you use Tkinter Designer you need to create a Figma File with the below instructions.

    If you already have created a file then skip to Using Tkinter Designer Section.

  4. Docker users can build and run the CLI with:

    docker build -t tkdesigner .
docker run --rm -v "$PWD:/work" tkdesigner "$FILE_URL" "$FIGMA_TOKEN" -o /work

3. Make a Figma Account

  1. In a web browser, navigate to figma.com and click 'Sign up'
  2. Enter your information, then verify your email
  3. Create a new Figma Design file
  4. Get started making your GUI



Formatting Your Figma Design [Top]

1. Reference


Naming is Important

Figma Element NameTkinter Element
ButtonButton
LineLine
TextName it anything
RectangleRectangle
TextAreaText Area
TextBoxEntry
ImageCanvas.Image()
ButtonHover (EXPERIMENTAL)Button shown on hover
CheckButton or CheckBoxCheckbutton
RadioButton or RadioRadiobutton
ComboBoxttk.Combobox
ListBoxListbox
Toggle or ToggleButtonToggle-style Checkbutton
Tablettk.Treeview table
TabView, Tabs, or Notebookttk.Notebook tab view

The code generated by Tkinter Designer is based on the names of elements from your Figma design and, as such, you need to name your elements accordingly. In Figma, rename your elements by double-clicking them in the Layers panel.

If an element is not one of the native Tkinter elements above, Tkinter Designer now attempts to export it as an image instead of replacing it with a black rectangle. This helps preserve vectors, smoothed corners, icons, and grouped artwork.


2. Element Guide


  1. First, create a Frame that will serve as your Tkinter Window.

  2. Adding Images

    • Images can be created using shapes and/or images
    • If you use multiple shapes/images, you must group them together by selecting them all and pressing CTRL/⌘ + G
    • After that name the element or group as "Image".

  3. Text (Normal Text)

    • Use the T key to activate the text tool, then add text as desired
    • Text does not have to be renamed for use in Tkinter Designer
    • Explicitly press the Return Or Enter Key to move to the next line.

  4. Entry (Single-Line User Input)

    • Activate the Rectangle tool with R
    • Adjust the Rectangle to your liking
    • Make sure the Rectangle is named "TextBox"

  5. Text Area (Multi-Line User Input)

    • Activate the Rectangle tool with R
    • Adjust the Rectangle to your liking
    • Make sure the Rectangle is named "TextArea"

  6. Rectangle

    • Activate the Rectangle tool with R
    • Adjust the Rectangle to your liking
    • Make sure the Rectangle is named "Rectangle"

  7. Normal Button

    • Add rectangle to serve as a button in your GUI
      • Optional: Add text for the button
    • Select the button(Rectangle), and any optional text, then group them with CTRL/⌘ + G
    • Name the group "Button"

Refer to this video if you face any problem



  1. Rounded Button
    • Add rectangle to serve as a button in your GUI
      • Optional: Add text for the button
    • Make it rounded by adding corner radius by selecting the rectangle and adding corner radius from the right side. Read more on it
    • Create a Rectangle with same size of your button. Don't make it rounded.
    • Change the Rectangle's color to match the Background
    • Now move the newly created rectangle below the main button(Rectangle).
    • Select the button, Rectangle, and any optional text, then group them with CTRL/⌘ + G
    • Name the group "Button"

Refer to this video if you face any problem



  1. Button with Hover Effect (EXPERIMENTAL)
    • Duplicate the Button you created in the previous step
      • You can duplicate the Button by selecting the button group and pressing CTRL/⌘ + D
    • Rename the duplicate button to "ButtonHover"
    • Place the duplicate button above the original button
    • Make sure it's on the same position as the original button
      • x and y coordinates should be the same
    • Make changes to the duplicate button for the hover effect
      • For example, change the color

Refer to this video if you face any problem



Using Tkinter Designer [Top]

Required Inputs

There are some inputs you'll need to collect to be able to use the TKinter Designer.

1. Personal Access Token

  1. Log into your Figma account
  2. Navigate to Settings
  3. In the Account tab, scroll down to Personal access tokens
  4. Enter the name of your access token in the entry form and press Enter
  5. Your personal access token will be created.
    • Copy this token and keep it somewhere safe.
    • You will not get another chance to copy this token.

2. Getting your File URL

  1. In your Figma design file, click the Share button in the top bar, then click on 🔗 Copy link

Tip: If you want to generate only one specific frame, select that frame before copying the link. Tkinter Designer will use the node-id in the Figma URL when it is present.

Using the CLI

Using the CLI is as simple as installing the package and running the CLI tool.

From PyPi

You can use the below command as test by replacing FILE_URL & FIGMA_TOKEN by your data. If you haven't got the token and link then refer to Required Inputs Section.

pip install tkdesigner

tkdesigner $FILE_URL $FIGMA_TOKEN

Wrap the Figma URL in quotes when pasting the literal URL into a shell:

tkdesigner "https://www.figma.com/design/FILE_KEY/Name?node-id=1-2&t=..." "$FIGMA_TOKEN"

If you do not want to place the token directly in the command, set it in FIGMA_TOKEN and pass only the URL:

FIGMA_TOKEN="your-token" tkdesigner "$FILE_URL"

To generate a class-based Tkinter app instead of a top-level script, add --template class:

tkdesigner --template class $FILE_URL $FIGMA_TOKEN

To generate a single app with Back/Next navigation across multiple Figma frames, use --template pages:

tkdesigner --template pages $FILE_URL $FIGMA_TOKEN

To apply a ttk theme in the generated app, pass --theme with a theme name available in your Tk installation:

tkdesigner --theme clam $FILE_URL $FIGMA_TOKEN

From Source

To use CLI from the source code you need to clone the repository and then follow the below instructions.

You can use the below command as test by replacing FILE_URL & FIGMA_TOKEN by your data. If you haven't got the token and link then refer to Required Inputs Section.

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN

# To learn more about how to use the cli, pass the --help flag
$ python -m tkdesigner --help

Output

By default, the GUI code will be written to build/gui.py. You can specify the output path by using -o Flag and providing the path.

To run the generated GUI, cd into the directory you built it to (e.g. build/) and run it just as you would any Tkinter GUI.

cd build
python3 gui.py

You can also import build/gui.py from another Python file to attach your own commands without editing generated code. The generated script only starts mainloop() when it is run directly.

Using the GUI

Open Tkinter Designer before doing the following steps


  1. Open TKinter Designer GUI by
cd Tkinter-Designer
cd gui
python3 gui.py
  1. Paste your personal access token into the Token ID form in Tkinter Designer
  2. Paste the link into the File URL form in Tkinter Designer
  3. Click the Output Path form to open a file browser
  4. Choose an output path and click Select Folder
  5. Press Generate

The output files from Tkinter Designer will be placed in your chosen directory, inside a new folder called build. Congratulations, you have now created your Tkinter GUI using Tkinter Designer!



Troubleshooting [Top]

  • Elements not visible? Misplaced?

  • Button has an unintended gray background?

    • Make sure you have added a Rectangle behind your button element, and that its Fill color is the same as the Background's

  • Incorrect elements?

  • Window is larger than the screen?

    • Reduce the size of your elements in Figma

  • Files not generating?

    • Restart Tkinter Designer
    • Double-check the token and URL
    • Quote the Figma URL if you run the CLI from a shell
    • Add -f if you want to clear and regenerate an existing non-empty build directory
    • If you see a Figma API quota or rate-limit message, wait for your Figma quota to reset or use a token with available quota
    • Make sure your design has a Frame
    • If your file has many frames, select the target frame in Figma before copying the URL

  • Fonts look different?

    • Tkinter can only use fonts installed on the computer running the generated app
    • Tkinter Designer writes the Figma font family into generated text widgets, but each user's OS may fall back if that font is unavailable

  • Something else?