Skip to content

Latest commit

 

History

History
327 lines (224 loc) · 10.6 KB

instructions.md

File metadata and controls

327 lines (224 loc) · 10.6 KB
Raw

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

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.


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
Line Line
Text Name it anything
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()
ButtonHover (EXPERIMENTAL) Button shown on hover

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



  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

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

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

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

  • Something else?