Scribd
Upload
83 views24 pages

Tkinter Tuitorial

This document provides instructions for using the Tkinter Designer tool to automate GUI creation in Tkinter. The summary is: 1. Sign up on the website and click "New" to create a design file where you can add Tkinter elements like buttons, text boxes, and backgrounds using various tools. 2. Elements are organized in layers and must be named appropriately for the code to be generated correctly. You can group related elements together. 3. When the design is complete, get a URL and token to generate Python code that implements the designed GUI and can be tested by running the output file.

Uploaded by

Ivan Fadillah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views24 pages

Tkinter Tuitorial

This document provides instructions for using the Tkinter Designer tool to automate GUI creation in Tkinter. The summary is: 1. Sign up on the website and click "New" to create a design file where you can add Tkinter elements like buttons, text boxes, and backgrounds using various tools. 2. Elements are organized in layers and must be named appropriately for the code to be generated correctly. You can group related elements together. 3. When the design is complete, get a URL and token to generate Python code that implements the designed GUI and can be tested by running the output file.

Uploaded by

Ivan Fadillah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Tkinter Designer

Automate GUI Creation


Sign Up On igma.com
f
Click on ‘New’ & Select
‘Design File’
{
Tools

Controls
(Background Color, Size, etc.)
{

Layers
Everything you add on
Window will appear here.
1.

{
Naming Is Important ! Design Names Tkinter Elements
Select size
The code is converted on the basis of Button Or Button
Draw your own
name given to the elements in the
Design File. (Case Sensitive) Rectangle Rectangle

TextBox Entry
Names can be changed by double
clicking items in Layers Panel Background Canvas.Image()

1.

Create a Frame.
This will be Tkinter Window.
Select size
Or
Draw your own
{

Creating Background.
Background can be created by Using
Shapes and Images.
I am creating it using simple rectangle.
Note :
If you are using multiple shapes and
images. You need to group them
together by selecting all the elements
which are part of it and pressing Ctrl G
or CMD G.

Adding Text
Press ’T’ or Select text took from the
tools panel and add Text.

You don’t need to change it’s name.


Adding Entry (Text Box)


Change this Number to
Press ‘R’ for Rectangle tool. Add rounded corners

Create a Rectangle and change it’s


properties if you want.

And Name it “TextBox” To change colors


Adding Normal Rectangle


Press ‘R’ for Rectangle tool.

Create a Rectangle and change it’s


properties if you want.

And Name it “Rectangle”


Adding a Button
Press ‘R’ for Rectangle tool.

1. Create a rectangle for the button.


2. Make it rounded if you want.
3. Add Text on top of it (Optional)

Continued…

Adding a Button
Creating a button requires 1 Extra step.

1. Create a rectangle on top of the


button.
2. Move that rectangle below the
button.
3. Change the rectangle colour to
same as background colour.
4. Select all three and press Ctrl G /
Cmd G this will group them.
5. Name the group ‘Button’

Adding a Button
The group should look like this.

Final step.
Select Everything and set the
coordinates of X and Y to 0 on the from
the right side.

Now we are done


with designing.
Getting the URL.
1. Click on share (Top Right)
2. Click on copy link.

Paste it somewhere

Getting the token.

Paste it somewhere

Installing and Running

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


cd Tkinter-Designer/
pip3 install -r requirements.txt
python3 tkinter_designer.py

Generating Code.

Paste the token and URL in their respective


Fields. And select the output path. And click
On Generate.

Wait for the success message box to pop up.


Testing the generated code.

Go to the directory of output path and run


window.py.

Done !

Now you can customise


window.py to have a
custom behaviour

Troubleshooting -
Elements not Visible Or Misplaced -
Select everything on the canvas on Figma and make sure if X & Y Coordinates are set to 0.

Button having grey background -


Check if you have added a rectangle behind the button with background colour.

Elements are different -


Check the naming of the elements in Figma.

Window bigger than screen -


Select everything and reduce the size and adjust the elements again.

Files not generated -


Reopen Tkinter Designer and Check the token and URL.

Anything Else -
Create an issue by going to this link.

Thank you !
Leave a ⭐ if you liked.

You might also like