UPDATE: The layout of Figma has slightly changed after recording this video. The create new design file button is at the top right-hand corner, and the settings button is under the profile icon at the top left-hand corner.
One of the best, straight forward and helpful videos ever seen in the coding industry! First time I ever understood something from a RU-vid Video related to Python! You just earned yourself a loyal subscriber brotha...! 🎉
It's working very well. Although, I wish it wasn't tkinter but customtkInter or any other libraries. tkinter Buttons have no modern features like transparency for example.
Great video! In my case i had to execute the gui for creating the project inside the gui folder and executing the command "python3 gui.py" for make it to work. I loved the edition of your video, keep going with the awesome content.
Hey Turbine, I would like to say it was an amazing tutorial. Thank you for this but ı want to ask that font and font size properties didn't show up when we convert it to python code. Can you tell what to do about it ? And is there any chance for you to take an another video about how to merge multiple windows by using tkinter ?
if i connecte the design to visual studio and added mt functions to it . then went to make changes in the design in figma . how do i get these changes to be in visual studio without loosing the functions i added??
Is there any Figma plugin that can convert the Figma design into customtkinter code instead of tkinter. customtkinter is much better in many aspects, so making required changes in that would be way more convenient. Nice tutorial BTW. Bookmarked it for future reference :D
@@TurbineThree OK. I recently started working on customtkinter, and converting tkinter code into customtkinter code is really not that tough. So, this tutorial + customtkinter library are going to help me a lot in ap development. Thanks again :D
@@JoaoVitor-st9pg Not found anything yet. I am currently relying on manual way of doing this. Firstly converting the Figma code into Tkinter code, and then converting that code into CustomTkinter code.
I am building a 2 wheeled Knight Rider Theemed motorcycle and plan to use a raspberry to control the electrics..... I am a total Raspberry/Python/GUI Noob but I need to create a program AND a GUI with 9 buttons. 7 of them are on/off buttons for relays and 1 is a timer button that turns on for 3 seconds when pushed and then goes back to off. The last button is an exit/close button. I need it for a motorcycle project where I will be using a Raspberry Pi to control the power/ignition (on/off) and starter (3 second timer). The other 6 relays are for various lights, stereo and actuated missile hatches!. The exit button is only a GUY button to end the program when shutting down the bike. I have 8 physical buttons and 8 relays that I will program through the GPIO. I need the GUI to be able to controll the functions on the touch screen also because with time I want to be able to access the GUI from my phone so I can control/start/stop the bike from my phone also... I gotta admit I have alot of nerves about all this. I am an electrician, so the hardware side I am ok with.... but the software is making my toes curl! -Wish me luck. Any tips appreciated! LOL
What I created in Figma didn't out the same after it was converted to code. If possible, I can show what I did in Figma and what came out of the code to compare.
did the text change positions? if yes , then avoid center align text, use left align when designing, i faced that issue like after converting all center aligh text goes out of box, and left algign text in desinger fixed the issue
For some reason mine does not seems to keep the propetries of the text elements, like bold or center alignment. Does it still work for you or is this also maybe from an update?
Hey, for the text properties like alignment, TkinterDesigner might not be able to get that information from Figma as the Figma API might not provide that data. For the font family and its font weight (bold, etc...) it should work, but you need to make sure you have the font installed on your computer as well
After following your tutorial, everything is working fine except when I try to fix my buttons because they are curved, it doesnt work. Not sure what I am doing wrong. I am creating another rectangle the same size and setting it as the background color. The button group is on top of the rectangle in figma
When i put in my file URL and my Output path it comes up with "Frame not found in figma file or is empty" i don't know what i causing this can someone help me ??
I found the soution. 1. You have to share the figma project 2. Copy the link and open it in another tab 3. Copy that link from the browser and paste it into the tkinter designer
Good video, but please for the love of god make it a bit slower cause your microphone is terrible and its hard to understand what you are saying in some moments
My problem with Tkinter designer is that the code is extremely confusing and Idk how to separete the UI from the logic as its not using Object Orientacion like custom tkinter uses
Exception in Tkinter callback Traceback (most recent call last): File "D:\laragon\bin\python\python-3.10\lib\tkinter\__init__.py", line 1921, in __call__ return self.func(*args) File "D:\Tkinter-Designer-master\gui\gui.py", line 72, in btn_clicked designer.design() File "D:\Tkinter-Designer-master\tkdesigner\designer.py", line 32, in design code = self.to_code() File "D:\Tkinter-Designer-master\tkdesigner\designer.py", line 19, in to_code for f in self.file_data["document"]["children"][0]["children"]: KeyError: 'document' Exception in Tkinter callback Traceback (most recent call last): File "D:\laragon\bin\python\python-3.10\lib\tkinter\__init__.py", line 1921, in __call__ return self.func(*args) File "D:\Tkinter-Designer-master\gui\gui.py", line 72, in btn_clicked designer.design() File "D:\Tkinter-Designer-master\tkdesigner\designer.py", line 32, in design code = self.to_code() File "D:\Tkinter-Designer-master\tkdesigner\designer.py", line 19, in to_code for f in self.file_data["document"]["children"][0]["children"]: KeyError: 'document'
To create radio buttons and dropdown menus, you would probably want to try using a package like Custom Tkinter to create them and then position them using coordinates to fit it in your design, so they'll be functional, since Tkinter Designer is just used to create the design.
Not exactly sure why the button's aren't converting to png. It might be because they aren't renamed correctly. Here's my final design file, might help to compare it with yours: www.figma.com/file/2d2dupv1PJ6eXkzCNtDCOe/Budget-Tracker---Final-(Copy)?type=design&node-id=0%3A1&mode=design&t=mjkL8DhqhZvPJbqr-1
Hey, thanks for the comment. I don't think it's possible to make the frame resizable since TkinterDesigner places the widgets based on their coordinates, so they can't be scaled properly if the frame was resizable
Hello, i have a problem with pillow. It says that : ERROR: Could not build wheels for pillow, which is required to install pyproject.toml-based projects
Tutorial itself is pretty good but the added click sounds and keyboard presses are really annoying and unnessiary Also the submit button for example has white corners like you said but your fix doesn't work whatsoever, is there another fix for this because it looks bad.
Your video helped me so much. I've got one question -- If I create a component on Figma (like a dropdown), can I simply assign it as a button and use Tkinter-Designer to convert it? Will that work or is it unsupported at the moment? Thanks.
@@TurbineThree yes- Exception in Tkinter callback Traceback (most recent call last): File "C:\Users\Charis\Desktop\Tkinter-Designer-master\tkdesigner\designer.py", line 21, in to_code frame = Frame(f, self.figma_file, self.output_path, self.frameCounter) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\Charis\Desktop\Tkinter-Designer-master\tkdesigner\figma\frame.py", line 29, in __init__ self.elements = [ ^ TypeError: 'NoneType' object is not iterable During handling of the above exception, another exception occurred: Traceback (most recent call last): File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.12_3.12.752.0_x64__qbz5n2kfra8p0\Lib\tkinter\__init__.py", line 1967, in __call__ return self.func(*args) ^^^^^^^^^^^^^^^^ File "c:\Users\Charis\Desktop\Tkinter-Designer-master\gui\gui.py", line 72, in btn_clicked designer.design() File "C:\Users\Charis\Desktop\Tkinter-Designer-master\tkdesigner\designer.py", line 32, in design code = self.to_code() ^^^^^^^^^^^^^^ File "C:\Users\Charis\Desktop\Tkinter-Designer-master\tkdesigner\designer.py", line 23, in to_code raise Exception("Frame not found in figma file or is empty") Exception: Frame not found in figma file or is empty
Did converting from figma to Python show you that the design was correct as you made it after converting it to a program and running it? Did you get the solution?
