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

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!

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

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

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 from generated window.py

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

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

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

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

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?

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

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?

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

• Briefly describe the bug

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

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

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