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
  • It will not Generate

    It will not Generate

    I'm facing an issue where it will only generate background.png, but the actual code is nowhere to be found

    opened by NoelP-YouTube 32
  • 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 Code-py007 27
  • 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
  • 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
  • Request for Chinese Translation

    Request for Chinese Translation

    enhancement 
    opened by 01men 20
  • Wrong formatting

    Wrong formatting

    I follow all the step and i got this not this. Please help me image image

    question 
    opened by slender111223 2
  • CLI error node.py

    CLI error node.py

    I received this error when use CLI PyPi: File "/home/jonathan/.venv/bin/tkdesigner", line 6, in from tkdesigner.cli import main File "/home/jonathan/.venv/lib/python3.7/site-packages/tkdesigner/cli.py", line 5, in from tkdesigner.designer import Designer File "/home/jonathan/.venv/lib/python3.7/site-packages/tkdesigner/designer.py", line 2, in from tkdesigner.figma.frame import Frame File "/home/jonathan/.venv/lib/python3.7/site-packages/tkdesigner/figma/frame.py", line 4, in from .node import Node File "/home/jonathan/.venv/lib/python3.7/site-packages/tkdesigner/figma/node.py", line 29 def get(self, key, default=None, /):

    And solve removing ", /" in line 29 on node.py

    enhancement 
    opened by jonfrs 1
  • Korean translation support

    Korean translation support

    Hello, i loved your work and would like to translate in Korean. is it okay ?

    enhancement 
    opened by pparkjyy 1
  • READme.md mistake in Gujarati translation and also add hindi translation

    READme.md mistake in Gujarati translation and also add hindi translation

    image image This are some few snapshot. Also add hindi readme.md file

    enhancement 
    opened by Aryan779 3
  • After reading carefully all the instructions I still get a black Background output.

    After reading carefully all the instructions I still get a black Background output.

    1. Error Message

    Creating Element { name: Background, type: GROUP } Element with the name: Background cannot be parsed. Would be displayed as Black Rectangle Creating Element { name: Button, type: GROUP } Creating Element { name: TextBox, type: RECTANGLE } Creating Element { name: TextArea, type: TEXT } Creating Element { name: TextBox, type: RECTANGLE } Creating Element { name: TextArea, type: TEXT } Creating Element { name: TextBox, type: RECTANGLE } Creating Element { name: TextArea, type: TEXT } Creating Element { name: TextBox, type: RECTANGLE } Creating Element { name: TextArea, type: TEXT } Creating Element { name: TextBox, type: RECTANGLE } Creating Element { name: TextArea, type: TEXT }

    1. Link to the Figma File https://www.figma.com/file/haMxoppeLJNpQdvKw3l3Qk/Untitled?node-id=0%3A1
    question 
    opened by Dotolox 0
  • i got an empty build/gui.py file

    i got an empty build/gui.py file

    i follow all instructions but in the end the result file gui.py in build folder was empty

    question 
    opened by AissaNouacer 5
  • Can I use it to create a radio-button elements

    Can I use it to create a radio-button elements

    If I draw a radio-button on figma then how should I name it that tkinter-designer can recognize it in right ways?

    enhancement 
    opened by leeso2021 1
  • Convert Figma desing to .py file

    Convert Figma desing to .py file

    II have lot of issues with converting Figma design to .py file. Is there any easy way to do this?

    question 
    opened by PSPMonster 1
  • Arabic translation

    Arabic translation

    null

    opened by yamanidev 0
Releases(v1.0.4)
Owner
Parth Jadhav
Parth Jadhav
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 11 Oct 16, 2021
Key Cast - Cast your key presses and mouse clicks on the screen, while casting your favorite application on the screen. Better than the rest.

Key Cast Screen cast your keyboard and mouse clicks in style Project Homepage ยป View Demo ยท Report Bug ยท Request Feature Table of Contents Introductio

Mehul Singh Teya 7 Sep 25, 2021
UberGui is a lightweight multi-threaded, webRender UI module for TouchDesigner

UberGui V4 UberGui is a lightweight multi-threaded, webRender UI module for TouchDesigner projects. The aim is to solve the trifecta of challenges bui

LUCAS M MORGAN 38 Jun 19, 2021
This program is written in python. It will help you find a valid solution for a sudoku puzzle.

Sudoku-Solver-Using-Tkinter This program is written in python. It will help you find a valid solution for a sudoku puzzle. Requirements: Python3 IDLE

Ankan Mahapatra 3 Oct 2, 2021
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 9 Oct 21, 2021
guietta - a tool for making simple Python GUIs

guietta - a tool for making simple Python GUIs

Alfio Puglisi 1.8k Oct 20, 2021
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
Basic calculator using Tkinter GUI

Basic calculator using Tkinter GUI

Rogerio Penchel 19 Oct 15, 2021
Declarative User Interfaces for Python

Welcome to Enaml Enaml is a programming language and framework for creating professional-quality user interfaces with minimal effort. What you get A d

null 1.1k Oct 15, 2021
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 22 Sep 2, 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 9 Oct 14, 2021
๐Ÿ† A ranked list of awesome python libraries for web development. Updated weekly.

Best-of Web Development with Python ?? A ranked list of awesome python libraries for web development. Updated weekly. This curated list contains 540 a

Machine Learning Tooling 1.4k Oct 22, 2021
A simple yet powerful TUI framework for your Python (3.7+) applications

A simple yet powerful TUI framework for your Python (3.7+) applications

null 170 Oct 14, 2021
Turn (almost) any Python command line program into a full GUI application with one line

Gooey Turn (almost) any Python 2 or 3 Console Program into a GUI application with one line Support this project Table of Contents Gooey Table of conte

Chris 15k Oct 22, 2021
Dear PyGui: A fast and powerful Graphical User Interface Toolkit for Python with minimal dependencies

(This library is available under a free and permissive license however, if you Enjoy Dear PyGui please consider becoming a Sponsor) Dear PyGui is a si

Jonathan Hoffstadt 6.2k Oct 22, 2021
Dear PyGui: A fast and powerful Graphical User Interface Toolkit for Python with minimal dependencies

(This library is available under a free and permissive license however, if you Enjoy Dear PyGui please consider becoming a Sponsor) Dear PyGui is a si

Jonathan Hoffstadt 6.2k Oct 23, 2021
A hotkey manager that runs in the system tray. Uses PySimpleGUI for the GUI and the system tray.

PySimpleHotkey PySimpleHotkey A hotkey manager that runs in the system tray. Uses PySimpleGUI for the GUI and the system tray. Packages Used This proj

PySimpleGUI 15 Oct 17, 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
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 5 Sep 18, 2021