Tkinter Designer - Create Beautiful Tkinter GUIs by Drag and Drop.

Overview

Tkinter Designer

GitHub contributors GitHub stars GitHub repo issues

Tkinter Designer is created to speed up and beautify Python GUI Experience. It uses well know design software called Figma. Which makes creating Tkinter GUI in Python a piece of cake.

Tkinter Designer uses Figma API to analyse the design file and creates the respective code and files needed for the GUI. Even Tkinter Designer's GUI is created using Tkinter Designer.

Help

☄️ Advantages of Tkinter Designer

  1. Drag and Drop Interfaces
  2. Takes far less time than creating code manually.
  3. Ability to create more beautiful Interfaces.

📐 How it works ?

The only thing the user needs to do is Design a Interface with Figma and then paste the Figma file URL and API token into Tkinter Designer.

It will automatically generate all the code and images required to create the GUI in Tkinter.

Help

🛠 How to use ?

This pdf contains all the information about installing and using Tkinter Designer.

Cick here for the PDF

🍀 Examples

The possibilities are endless with Tkinter Designer. But here are couple of GUIs which can be perfectly replicated in Tkinter Designer. (The following are not my creations)

1.Help

2.Help

Figma Design Checklist (Also mentioned in the PDF)

I have mentioned these in the PDF but i'll mark them down here :-

  1. Buttons - Should be named Button (In Figma)

  2. When creating button add a Rectangle behind actual button with color same as Background color.

  3. Entry - Should be named TextBox (In Figma)

  4. Text - Every text in the design would be created as text.

  5. Rectangles - Should be named Rectangle (In Figma)

  6. Background - Should be named Background (In Figma)

  7. Before converting the file to code using Tkinter designer check if X & Y coordinates of the frame should be 0.

📝 Contact

If you want to contact me you can reach me at [email protected]

📄 License

This project uses MIT License.

Issues
  • Refactor code base, add CLI and documentation

    Refactor code base, add CLI and documentation

    Changes

    • Large code refactoring, separating functionality into separate files
    • Added CLI for easier interaction with backend
    • Added documentation on using the CLI and running the generated code
    • Added templating with Jinja2 for more flexible code generation
    • Added type annotations where necessary to make code more legible
    • Added unique IDs for elements to allow for easier generation and referencing
    • Added classes:
      • FigmaParser - handles parsing Figma design data into FigmaElements
      • UserError - raises user errors to be printed or shown in a message box
      • Encapsulating Figma data structures:
        • FigmaFrame
        • FigmaElement
        • RectangleElement
        • ButtonElement
        • TextElement
        • TextEntryElement
        • ImageElement

    Future Work

    • Creating an installable package and uploading it to PyPi
    • Convert more of Figma's design capabilities to Tkinter
    enhancement 
    opened by jrobchin 53
  • Adds Packaging, build/test/release automation

    Adds Packaging, build/test/release automation

    Adds the required files to build and release a python package to pypi. Includes a github action workflow which should trigger a build when you go through the github UI to create a new release.

    I took the liberty of moving the tkdesigner and gui dirs into a common parent 'src'. I hope no one minds. If so it can be changed, it's just easier to configure packaging this way IMO.

    Added some documentation regarding the effort here and how you can test locally prior to accepting this PR.

    Happy to answer any questions about packaging in general, or the CI workflows. I'll point out a few key highlights and todos in the comments.

    Hope it helps! Thanks for inviting me to play!

    opened by jvendegna 47
  • Help

    Help

    How to Fix ? A key error occurs when the elements are named or grouped incorrectly. Before creating an issue, make sure that you have followed the instructions guide correctly.

    If the issue still persists, create an issue with the following details included.

    1. Error Message
    2. Link to the Figma File
    opened by GargAnshu9468 36
  • Images not working

    Images not working

    https://www.figma.com/file/E2TA4V9Ck3k2xZ06uXrMaa/Material-Design-Desktop-Kit-for-Figma-Free-Edition-Copy?node-id=0%3A1 So i have a image like this ^^, but when i run the designer it just doesnt creates this image

    opened by Vinyzu 30
  • Text Element: positional errors dependent on font size and dimensions of Figma text bounding box

    Text Element: positional errors dependent on font size and dimensions of Figma text bounding box

    Platform: Mac OSX 10.15.7, Python 3.9.5

    I see from the code that Figma must use the center of a text element as it's origin because you're doing this calculation in 'backend.py' to modify the X:Y cordinate when setting the position on the Tkinter Canvas:

            x, y = x + (width / 2), y + (height / 2)
    

    But depending on the font size and depending on the dimensions of the Figma bounding box, this results in an X:Y error in the generated code. I guess this is probably unique to Text elements as in Figma you can set the bounding box to greater than the space taken up by the actual text.

    Example where Figma Text bounding boxes are as small as possible without pusing the text onto new lines.

    Screenshot from Figma: Screenshot 2021-07-08 at 13 29 39

    Screenshot from generated window.py Screenshot 2021-07-08 at 13 31 47

    opened by neilbaldwin 29
  • List index out of range

    List index out of range

    When I generate the file , I get this error: Exception in Tkinter callback Traceback (most recent call last): File "C:\Users\----------\anaconda3\envs\NewsAndWiki\lib\tkinter\__init__.py", line 1892, in __call__ return self.func(*args) File "C:\----Path------\Tkinter-Designer\tkinter_designer.py", line 29, in btn_clicked backend.generate_code(token,URL, output_path) File "C:\----Path------\Tkinter-Designer\backend.py", line 220, in generate_code bg = get_color(element) File "C:\----Path------\Tkinter-Designer\backend.py", line 9, in get_color el_r = element["fills"][0]["color"]['r'] * 255 IndexError: list index out of range

    opened by parushb 27
  • File not generated

    File not generated

    Hi! I can't get the generated code but I get this error :

    Exception in Tkinter callback
    Traceback (most recent call last):
      File "/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/tkinter/__init__.py", line 1892, in __call__
        return self.func(*args)
      File "/Users/nima/Desktop/Tkinter-Designer/gui/gui.py", line 73, in btn_clicked
        designer.design()
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/designer.py", line 29, in design
        code = self.to_code()
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/designer.py", line 23, in to_code
        frame = Frame(window_data, self.figma_file, self.output_path)
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/figma/frame.py", line 30, in __init__
        self.elements = [
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/figma/frame.py", line 31, in <listcomp>
        self.create_element(child)
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/figma/frame.py", line 89, in create_element
        return Text(element, self)
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/figma/custom_elements.py", line 44, in __init__
        self.font, self.font_size = self.font_property()
      File "/Users/nima/Desktop/Tkinter-Designer/tkdesigner/figma/custom_elements.py", line 68, in font_property
        font_name = font_name.replace('-', ' ')
    AttributeError: 'NoneType' object has no attribute 'replace'
    
    
    

    This is my Figma link: https://www.figma.com/file/1PkBD3ubNQIQdRdGjz5EoM/Untitled?node-id=0%3A1

    opened by nimiology 25
  • KeyError: 'children'

    KeyError: 'children'

    Hi! I have a problem when i click generate. The error is: KeyError: 'children' I attached a photo with the error on imgur: https://i.imgur.com/2Ni8JrM_d.webp?maxwidth=760 My figma: https://www.figma.com/file/1HMX8V1VpfbCH2rava1wPs/Untitled?node-id=0%3A1

    opened by andreitulpan 25
  • Blank Screen without any elements

    Blank Screen without any elements

    How to Fix ?

    This issue happens due to Incorrect Naming

    Try to fix it by reading the instruction carefully.

    If the issue still persists, create an issue with the following details included.

    1. Error Message
    2. Link to the Figma File
    question 
    opened by misska1 18
  • The code created by Tkinter-Designer does not show the Design file I created in Figma

    The code created by Tkinter-Designer does not show the Design file I created in Figma

    I have created a Design file in Figma, following the steps of the Element Guide as described in https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md The created page (File URL) is https://www.figma.com/file/UEuqWZxlkkHvXGP5VC19Rl/File_01?node-id=0%3A1 I give this and my Token ID in 'tkinter_designer.py' and a 'window.py' file is created, as expected. When I run it, I see just an empty Tkinter window. I checked the file and it doesn't even contain the name "Alkis Piskas" which is stored as text in the Design file and which can be seen in the above mentioned File URL. Shouldn't the code be able to reproduce the content of the Design File?

    opened by AlkisPis 18
  • Need an API key from Pypi in repo secrets

    Need an API key from Pypi in repo secrets

    Someone needs to be responsible for receiving communications from pypi regarding package releases. Typically this is the repo owner or an active maintainer. You're also required to supply an api token when publishing a package. So we cannot publish a package without this.

    Discussion can take place here as to who if not ParthJadhav, but to close this out:

    • Sign up for a pypi account.
    • Create an API Key in your account settings
    • Store it in repo secrets as PYPI_API_TOKEN
    opened by jvendegna 17
  • all black screen

    all black screen

    I'm running from source code, apparently everything works. When I use "python gui.py" the tkinter window opens, but all black! I use windows, and I installed all the requirements.txt libs globally on my machine. link figma: https://www.figma.com/file/j3wZe6B6P2SnKkKhK40UH8/Untitled?node-id=0%3A1

    opened by ryanbsdeveloper 0
  • i can't change Rectangle color

    i can't change Rectangle color

    • the design in figma .

    • after tkinter designer commands and creating gui.py file .

    the problem is : i can't change Rectangle color , and the question is : can i use linear color and shadow and radius in Rectangle like in Button ?

    question 
    opened by Issam-seghir 0
  • Add additional templates

    Add additional templates

    I see you have two issue templates on your repo. As you know, issue templates are very helpful for a collaboration repo.

    We recommend creating a “Report Bug” and “Feature Request” issue template.

    Some suggested prompts/questions you can add to a “Report Bug” template are:

    • Briefly describe the bug
    • What is the expected behavior?
    • Please provide step by step instructions on how to reproduce the bug

    Some suggested prompts/questions you can add to a “Feature Request” issue template are:

    • Briefly describe your feature request
    • What problem is this feature trying to solve?
    • How do we know when the feature is complete?
    opened by ericdrosado 1
  • Update repo description

    Update repo description

    Other than GitHub Topics, your description will be the primary way of catching the users eyes. I'm not familiar with Tkinter, so the current description doesn't resonate with me. If you would like to attract other users I would recommended updating your description a bit. Ask yourself:

    • In one sentence, how do I convey what my repo does?
    • What type of users am I interested in attracting to my repo?
    • If I was a user, what words or phrases might spark my interest?
    opened by ericdrosado 2
Releases(v1.0.4)
Owner
Parth Jadhav
Parth Jadhav
Project made in Qt Designer + Python, for evaluation in the subject Introduction to Programming in IFPE - Paulista campus.

Project made in Qt Designer + Python, for evaluation in the subject Introduction to Programming in IFPE - Paulista campus.

Paola Rodrigues 2 Apr 13, 2022
Generate multifunctional GUIs from classes

magic-class In magicgui you can make simple GUIs from functions. However, we usually have to create GUIs that are composed of several buttons, and eac

null 16 Apr 2, 2022
guietta - a tool for making simple Python GUIs

guietta - a tool for making simple Python GUIs

Alfio Puglisi 1.9k May 16, 2022
build GUIs from python functions, using magic.

magicgui: build GUIs from functions, using magic. ?? Docs Installation magicgui uses qtpy to support both pyside2 and pyqt5 backends. However, you mus

napari 198 May 11, 2022
Tkinter-ATM - Python GUI case made with Tkinter

tkinter-ATM Python GUI case made with Tkinter The task of this case was to creat

null 2 Jan 13, 2022
Weather-API-GUI-Tkinter - A weather tool made using tkinter which works by fetching query city weather using an API

Weather-API-GUI-Tkinter ☁️ ❄️ version- 1️⃣ . 0️⃣ . 0️⃣ This repo contains a weat

SasiVatsal 4 Apr 22, 2022
Tkinter calculetor - Tkinter calculetor with python

Tkinter_calculetor required to run py file pip install tkinter

Yasir Arafat 0 Feb 7, 2022
Advanced GUI Calculator with Beautiful UI and Clear Code.

Advanced GUI Calculator with Beautiful UI and Clear Code.

Mohammad Dori 2 Mar 11, 2022
Dress up your code with a beautiful graphical user interface !

Dresscode Dress up your code with a beautiful graphical user interface ! This project is part of the Pyrustic Ecosystem. Look powered by the cyberpunk

null 21 Nov 23, 2021
My Git GUI version made in Python and Tkinter.

Description My Git GUI version made in Python and Tkinter. How to use Basically, create a folder in your computer, open the software, select the path

Matheus Golzio 4 Oct 10, 2021
System Tray Icon for PySimpleGUI (the tkinter version). Adds a system tray icon by using pystray and PIL

psgtray Add a System Tray Icon to your tkinter port of PySimpleGUI. Installation via pip Installation is via pip: python -m pip install psgtray or if

PySimpleGUI 25 May 10, 2022
A calculator made using Python and Tkinter

Abacus Abacus is a calculator used to compute expressions with the operators of Addition, Subtraction, Multiplication and Division. It is named after

null 1 Dec 30, 2021
Py3editor - A text editor written in Python and Tkinter

Py3Editor My text editor written in Python and Tkinter! Contains a basic set of

JaydenDev 1 Mar 5, 2022
TkArt - A repository created to explore geometry and art creation using TkInter

tkArt A repository created to explore geometry and art creation using TkInter, a

Jayant Sogikar 1 May 18, 2022
Basic calculator using Tkinter GUI

Basic calculator using Tkinter GUI

Rogerio Penchel 17 Jan 9, 2022
Tukaan is the new framework that aims to replace Tkinter

Tukaan is the new, pythonic and colorful (like a keel-billed toucan) framework that aims to replace Tkinter. It has everything (on my computer, not at GitHub) that you need to develop cross-platform GUIs.

Tukaan 55 May 27, 2022
Json IDE made with Python tkinter!

JIDE Json IDE made with Python tkinter! Download: https://github.com/LouisTheXIV/JIDE/releases/tag/v0.1 Features In JIDE everything is customisable do

n0 7 May 14, 2022
A Python Tkinter based Inventory managment System

Inventory Management System Using Python Tkinter Introduction Inventory managemrnt system is an open source platform for manage business. It has a com

Amit Kumar Datta 2 Oct 14, 2021