Skip to content

instructions.md

Latest commit

 

History

History
223 lines (167 loc) · 8.21 KB

instructions.md

File metadata and controls

223 lines (167 loc) · 8.21 KB

How to use Tkinter Designer

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. File URL
    3. Test Your Generated Code

  4. Troubleshooting



Getting Started [Top]

1. Install Python

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

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

Once you have Python installed, you can download Tkinter Designer from the official repository.

On the right-hand sidebar, click the latest release and, under Assets, choose tkinter_designer.exe. After the executable has downloaded, you are ready to run the program!

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

  1. Download the source files for Tkinter Designer

  2. Unzip the source files to a directory on your system

  3. Open a terminal/command prompt in this directory

    • You can navigate to this folder using the cd command.
    • You can also use an IDE with a built-in terminal, such as Visual Studio Code.

  4. 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.

  5. You can run Tkinter Designer by running python tkinter_designer.py


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 Name Tkinter Element
Button Button
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.


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



Using Tkinter Designer [Top]

Open Tkinter Designer before doing the following steps.


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.
  6. Paste your personal access token into the Token ID form in Tkinter Designer

2. File URL

  1. In your Figma design file, click the Share button in the top bar, then click on 🔗 Copy link
  2. Paste the link into the File URL form in Tkinter Designer

3. Test Your Generated Code

  1. In Tkinter Designer, click the Output Path form to open a file browser
  2. Choose an output path and click Select Folder
  3. Press Generate

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



Troubleshooting [Top]

  • Elements not visible? Misplaced?

    • Please make sure that your top-level Frame is positioned with its X and Y coordinates at (0, 0)
      • Check the right side bar, under Design

  • 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
    • Make sure your design has a Frame

  • Something else?