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
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
This simple python program can be used to make FontChooser dialog in Tkinter Applications.

tkFontBox This simple python program can be used to make FontChooser dialog in Tkinter Applications. how to use? Copy the tkFontBox.py file into your

Pawan Kumar Prachi 1 Feb 08, 2022
Python3.9/Kivy2.0 project to manage Valkyrie Scenarios

.valkyrie Manager This is a Python 3.9/Kivy 2.0 application that helps to manage quest (.valkyrie) files (from Valkyrie app) It identifies new quests

Kempes J. 1 Jan 28, 2022
All you need to learn Tkinter!

Tkinter This repository contains the codes and resources which I used to learn the standard GUI library of Python, Tkinter! Best Tkinter Resources Vid

Samyak Jain 3 May 02, 2022
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
A simple todo GUI applicaiton

simple_todo_gui A simple todo GUI applicaiton To create an .exe file, run 'Python setup.py build' after installing PyQt5 and cx_Freeze with pip. Then

Dhammike Piyumal 2 Nov 11, 2021
Basic Alarm Clock using Python.

Basic Alarm Clock using Python.

Samyak Jain 2 Feb 10, 2022
Write desktop and web apps in pure Python

Flexx Want to stay up-to-date about (changes to) Flexx? Subscribe to the NEWS issue. Introduction Flexx is a pure Python toolkit for creating graphica

flexxui 3.1k Jan 08, 2023
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 01, 2022
A simple project used Tkinter module to make a seperate window

Project Title This is a program to run a databse where you can store the general information of poeple. This is a very simple project and i have used

Divyansh Bhardwaj 0 Jun 25, 2022
Nonton anime subtitle Indonesia tanpa iklan. Dengan GUI berbasis PyQt5 dan spaghetti code yang sangat tidak terstruktur

Nonton anime subtitle Indonesia tanpa iklan. Dengan GUI berbasis PyQt5 dan spaghetti code yang sangat tidak terstruktur

Ayra Hikari 21 Dec 18, 2022
Mini is a web browser application based on the Python PyQt web engine, made in 290 lines of code.

Mini Mini is a web browser application based on the Python PyQt web engine, made in 290 lines of code. The code is written and published as is, so the

Dmitry Karpenko 6 Nov 07, 2022
Basic browser based on PyQt5

goneDev-browser "basic browser based on PyQt5" This application is primarily built on macOS with more adaptibility for MacOS than Windows. v1.0 will s

Harsh ADV) 1 Jan 19, 2022
MediaPlayer-with-PyQt5 - The Multimedia Player with Python and PyQt5

MediaPlayer-with-PyQt5 I made this Multimedia Player with Python and PyQt5, I re

4 Oct 06, 2022
A cute running cat animation on your Windows/macOS taskbar.

RunCat by PySide6 A cute running cat animation on your Windows/macOS taskbar. Tags PyQt PySide RunCat Demo You only have to run the RunCat.exe. Run pi

見える 10 Sep 19, 2022
This is the new and improved Plex Automatic Pre-roll script with a GUI

Plex-Automatic-Pre-roll-GUI This is the new and improved Plex Automatic Pre-roll script with a GUI! It should be stable but if you find a bug please l

164 Nov 04, 2022
Build GUI for your Python program with JavaScript, HTML, and CSS

https://pywebview.flowrl.com pywebview is a lightweight cross-platform wrapper around a webview component that allows to display HTML content in its o

Roman 3.3k Jan 01, 2023
Introduce QML-like declarative structure to Python world. Developer writes only pure Python code for QML.

Introduce QML-like declarative structure to Python world. Developer writes only pure Python code for QML.

likianta 4 Mar 27, 2022
GUI app to read settings and stats from Cloudflare WARP CLI for Linux, and change some settings

warp-cli-gui GUI app to read settings and stats from Cloudflare WARP CLI for Linux, and change some settings. Description Python program that will int

Danie 6 Nov 01, 2022
A system tray application written in python that will assist you with your keyboard endeavors.

A system tray application written in python that will assist you with your keyboard endeavors. It has features such as abbreviation, email autofill, media control, writing from clipboard ,typing curr

Mach50 1 Dec 15, 2021