Getting Started [Top]
Before using Tkinter Designer, you'll need to install Python.
- Here is a link to the Python downloads page.
- Here is a helpful guide to installing Python on various operating systems.
Later in this guide, you will use the Package Installer for Python (pip), which may require you to add Python to your system PATH.
Three options:
-
pip install tkdesigner
-
Install poetry
poetry new <gui_project_name> && cd <gui_project_name>
poetry add tkdesigner
poetry install
-
To run Tkinter Designer from the source code, follow the instructions below.
-
Download the source files for Tkinter Designer by downloading it manually or using GIT.
git clone https://github.com/ParthJadhav/Tkinter-Designer.git
-
Change your working directory to Tkinter Designer.
cd Tkinter-Designer
-
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.
-
- In a web browser, navigate to figma.com and click 'Sign up'
- Enter your information, then verify your email
- Create a new Figma Design file
- Get started making your GUI
- The next section covers required formatting for Tkinter Designer input.
Formatting Your Figma Design [Top]
Figma Element Name | Tkinter Element |
---|---|
Button | Button |
Line | Line |
Text | Name it anything |
Rectangle | Rectangle |
TextArea | Text Area |
TextBox | Entry |
Image | Canvas.Image() |
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.
-
First, create a Frame that will serve as your Tkinter Window.
-
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".
-
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.
-
Entry (Single-Line User Input)
- Activate the Rectangle tool with R
- Adjust the Rectangle to your liking
- Make sure the Rectangle is named "TextBox"
-
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"
-
Rectangle
- Activate the Rectangle tool with R
- Adjust the Rectangle to your liking
- Make sure the Rectangle is named "Rectangle"
-
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"
- Add rectangle to serve as a button in your GUI
Refer to this video if you face any problem
- 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"
- Add rectangle to serve as a button in your GUI
Refer to this video if you face any problem
Using Tkinter Designer [Top]
There are some inputs you'll need to collect to be able to use the TKinter Designer.
- Log into your Figma account
- Navigate to Settings
- In the Account tab, scroll down to Personal access tokens
- Enter the name of your access token in the entry form and press Enter
- 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.
- In your Figma design file, click the Share button in the top bar, then click on 🔗 Copy link
Using the CLI is as simple as installing the package and running the CLI tool.
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
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
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
- Open TKinter Designer GUI by
cd Tkinter-Designer
cd gui
python3 gui.py
- Paste your personal access token into the Token ID form in Tkinter Designer
- Paste the link into the File URL form in Tkinter Designer
- Click the Output Path form to open a file browser
- Choose an output path and click Select Folder
- 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?
- Please make sure that your Figma File has its elements named correctly. * See Formatting Your Figma Design, §1
-
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?
- Make sure you have named your elements correctly in Figma
-
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
- Make sure your design has a Frame
-
Something else?