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.

Comments
  • 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
  • changing design, regeneration, and overwrites

    changing design, regeneration, and overwrites

    I'm pleased to see the work on tkdesigner, and plan to recommend it to some friends. There is one issue I would like advice on, or perhaps a small change to request.

    As it is now, the idea seems to be that after the gui.py is generated, one modifies that code to add functionality. The problem is that if one later wishes to change the design and regenerate, then the added functionality is lost. Is there a good way to deal with this?

    If not, I suggest an easy way is to add the functionality in a separate file that imports gui.py E.g. import gui def dostuff(): print("Doing Stuff...")

    gui.button_1.configure(command=dostuff) gui.window.mainloop()

    Then the generated default functionality change be changed in the new file, and gui.py is never touched. The problem is that the default template ends with a call to mainloop(), which means this approach cannot work, because when gui is imported, any new code is ignored.

    It seems to me an easy change is to change the final line in the template to this: if name == 'main': window.mainloop()

    Then is someone executes gui.py directly, the functionality is the same as now. But they someone imports gui, then mainloop is not executed, and they can modify the default functionality, and call mainloop themselves.

    Is this reasonable?

    opened by robtbiddle 0
  • Invalid URL 'None': No schema supplied.

    Invalid URL 'None': No schema supplied.

    Traceback (most recent call last): File "/home/ayush/.local/bin/tkdesigner", line 8, in sys.exit(main()) File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/cli.py", line 71, in main designer.design() File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/designer.py", line 29, in design code = self.to_code() File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/designer.py", line 23, in to_code frame = Frame(window_data, self.figma_file, self.output_path) File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/figma/frame.py", line 29, in init self.elements = [ File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/figma/frame.py", line 30, in self.create_element(child) File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/figma/frame.py", line 68, in create_element download_image(image_url, image_path) File "/home/ayush/.local/lib/python3.8/site-packages/tkdesigner/utils.py", line 20, in download_image response = requests.get(url) File "/home/ayush/.local/lib/python3.8/site-packages/requests/api.py", line 76, in get return request('get', url, params=params, **kwargs) File "/home/ayush/.local/lib/python3.8/site-packages/requests/api.py", line 61, in request return session.request(method=method, url=url, **kwargs) File "/home/ayush/.local/lib/python3.8/site-packages/requests/sessions.py", line 528, in request prep = self.prepare_request(req) File "/home/ayush/.local/lib/python3.8/site-packages/requests/sessions.py", line 456, in prepare_request p.prepare( File "/home/ayush/.local/lib/python3.8/site-packages/requests/models.py", line 316, in prepare self.prepare_url(url, params) File "/home/ayush/.local/lib/python3.8/site-packages/requests/models.py", line 390, in prepare_url raise MissingSchema(error) requests.exceptions.MissingSchema: Invalid URL 'None': No schema supplied. Perhaps you meant http://None?

    Figma FIle: https://www.figma.com/file/7W9my8Va1Rhb0ACfw1i0uK/refacteredprofile?node-id=0%3A1&t=d6lKwyjjHrlGtvyz-1

    opened by sirKiraUzumaki 0
  • Report bug

    Report bug

    • Briefly describe the bug

    image

    I have tried everything, and i am almost 100% that i am doing everything right. And i keep getting this error as you can see in the image. It starts do exporting/creating elements very currectly but then I get the error Exception: Frame not found in figma file or is empty?????

    Pls help me, thank you! Here's the figma file link: https://www.figma.com/file/SYzJTwT1MV17dgRxz0dlc5/Wireframing-AED?node-id=4%3A2&t=TKBnLhsc7YP5VizD-1

    bug 
    opened by pgraca97 2
  • Report bug

    Report bug

    usage: tkdesigner [-h] [-o OUTPUT] [-f] file_url token tkdesigner: error: the following arguments are required: token 't' is not recognized as an internal or external command, operable program or batch file.

    i get this error please help

    bug 
    opened by janfreitzsupnet 1
  • Help with using Tkinter Designer: AttributeError: 'Token' object has no attribute 'test'

    Help with using Tkinter Designer: AttributeError: 'Token' object has no attribute 'test'

    Error Message: AttributeError: 'Token' object has no attribute 'test' Link to the Figma File: https://www.figma.com/file/mKTO9EBMSZV43RdhjJlRPb/Untitled?node-id=4%3A2&t=QGSZBIjEmHDZfh0q-1

    opened by DatDevSteve 1
Releases(v1.0.5)
  • v1.0.5(Oct 30, 2022)

    Features & Changes 🎊

    • Add Multi-Frame Support.
    • Add Unicode Support.
    • Add line support
    • Improve element transversal

    Contributors ⭐

    Thanks to all the new contributors who made their first contribution to Tkinter-Designer for this release !!

    • @abc1044 made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/133
    • @iblueer made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/159
    • @yamanidev made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/156
    • @cclauss made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/162
    • @Aryan779 made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/150
    • @mehmet-mert made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/165
    • @ralphg6 made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/180
    • @welyson1 made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/215
    • @osbyrne made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/239
    • @dovatti made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/241
    • @YutaRedux made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/254
    • @TheFallen-Cat made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/247
    • @ndamatta made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/245
    • @745404527 made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/259
    • @TanmayBansode made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/269
    • @Top-g-hash made their first contribution in https://github.com/ParthJadhav/Tkinter-Designer/pull/274

    Full Changelog: https://github.com/ParthJadhav/Tkinter-Designer/compare/v1.0.4...v1.0.5

    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Aug 7, 2021)

  • v1.0.3(Aug 4, 2021)

  • v1.0.2(Aug 4, 2021)

  • v1.0.1(Aug 1, 2021)

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 25 Dec 15, 2022
guietta - a tool for making simple Python GUIs

guietta - a tool for making simple Python GUIs

Alfio Puglisi 1.9k Jan 8, 2023
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 0 Nov 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 Jul 8, 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 3 Jul 15, 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 20 Aug 24, 2022
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 38 Dec 30, 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 0 Jun 24, 2022
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 18 Oct 1, 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 101 Jan 8, 2023
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