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 TH-cam Video related to Python! You just earned yourself a loyal subscriber brotha...! 🎉
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 ?
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.
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
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.
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
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 ??
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??
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.
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.
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
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
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
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
@@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
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
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
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
how to fix entry_1 = None( bd=0, bg="#D9D9D9", fg="#000716", highlightthickness=0 ) SyntaxWarning: 'NoneType' object is not callable; perhaps you missed a comma? entry_1 = None(
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.
terrible sound
I'm really lucky to come across this. I hope there are similar drag-and-drop GUI tools available.
Hi, can you help me? im trying put the file url, but it shows that its not a valid URL
Formation studio.... It's a great tool which can make expandable GUIs with drag n drop.
One of the best, straight forward and helpful videos ever seen in the coding industry! First time I ever understood something from a TH-cam Video related to Python!
You just earned yourself a loyal subscriber brotha...! 🎉
Thanks for the sub :D
@@TurbineThree Ur welcome 🙏 🤗
25% slower talking and 50% less edits and you had a 10/10 tutorial
now i believe, there's no boring programming, there's only boring programming lecturer
solid editing my guy, underated video ngl
Thanks, glad you like the editing! I have a love-hate relationship with editing videos 😅
Lmao can relate, I see all those whip pan uve done
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 ?
Is it possible to add checkboxes?
if anyone faces this error "Please enter a valid file URL"
Replace "design" in URL with "file"
Thanks, I was looking just for this comment!
Thanks man
This looks very interesting, I'll have to take a moment and try it out, thank you very much.
Thanks for the support, means a lot!
Keep it up mate ur doing the best !
how to deal with multiple windows in Figma please clarify
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.
But why would that matter if you're designing your own button?
@@Bangs_Theory buttons were just one example, there are so many other advantages
@@Bangs_Theory exactly
can we create radio buttons using the above method or not?
awesome video, fast speed, details, entertaining
Thank you! 👍
At 7:08, where did you get the form from? If you ran the code, it doesn’t work for me
did you try running the gui.py file?
Thanks for the tutorial! It works
Thanks for watching, glad it helped!
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
isnt qt a "better", i.e. more versatile and still very easy to use with qt designer, for GUI?
how did you open the tkinter window at 7:10?
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.
Good Lord what language was that?
"please enter a valid url", this error keeps on popping when i try generate my design, any help?
I have the same problem
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
Replace "design" in URL with file
@@eslamsalem2190 Worked thx
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?
The lecture is excellent. It's off topic, but what program do you edit your videos with?
Thanks! I use premiere pro for editing
incredible tutorial thank you so much
You're very welcome! Glad it helped!
Thanks for your help.You saved us time
Happy to help!
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 ??
same bruhh
same
where i can get tkinter design? do we need to download it?
Great video! 👏 I liked how you included CodTubify's snippet in the intro. 😊 I made that while learning tkinter. 🙌
Thanks mate I really appreciate the video
:)
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??
Nice tutorial! Will this work if I use a figma design given to me by someone else?
does tkinter designer support figma animation? (btw good tutorial)
I get errors when I run the code in the gui at 7:25 Edit: Fixed the issue
How can we make a click and then popup window and close it when not using it?
Can you show how to make tables you that you can freely use and that saves a copy of their own for for users?
Can you upload another video for working with multiple frames using figma?
Sure. It might take a few weeks though, I'm currently working on other videos
how to create radiobuttons and dropdown menus
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.
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
Glad you liked this video! Customtkinter looks way better, but I don't think there are any plugins that can convert Figma to customtkinter
@@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
@@AdiBhaiyaYT Did you find a way to convert figma projects to customtkinter format?
@@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.
@franciscosilva6502 I am fine. Thank You :)
Now do this with with java?
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
it gives me invalid url error even if ı do everything same with you
Im getting that error too, how did you solved it?
change the line in the link where it says "\design\" and change to "\file\"
@@Deyanira.Trevino change the line in the link where it says "\design\" and change to "\file\"
Does this work with CustomTKinter aswell=?
I have a problem, after clicking to generate the token the imgs are not imported
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
Very useful! Thanks
Glad it helped!!
Is it possible to add lightning effects buttons like glowing when hovering
can anyone tell me how would i do a checkbox
what about scrollable view?
How can I add a scroll bar?
Where did you get the Tkinker Designer wherein you can input the Token ID, File URL, and Output Path in Chapter "Converting the Design to Code"?
from the github in the description
It shows that the url of figma page is invalid... What should i do?
change the line in the link where it says "\design\" and change to "\file\"
Hey there nice video, very helpful, I need some help, what's happening with me, is shadows and other effects are not loading.
muchas gracias tu video me ha sido de ayuda
Thank you for the tutorial. I just wish that it had a better audio.
Yup, will work to improve it
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
how can I be sure its safety,
what if the used libraries or the code itself has malwares
how come the fonts reset to default helectiva. how to have other fonts there
Can you made Switch Multiple Pages in tkinter using the Tkinter Designer please, love your content!
the buttons arent png for me, do you know why?
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 is it possible to switch scenes? like im going to create another figma export then link it with the 1st scene to second scene?
help me, i can't use this code 😓
Sir, can you explain how to make radio button, slider, combobox, menu bar using it.
I know this is kinda late, but there’s a plug-in to do it
@@b3q which one?
@@SamuelMontoya-m3j This was a month ago but I frogot, I’m pretty sure it’s in the Figma community plug-ins though 😊
@@b3q Thanks!
@@SamuelMontoya-m3jHappy to help
hey so when I turned dark-mode on in the app the button now have white backgrounds(rounded corners)
why can't my image enter the code
i got an error or sum
Element with the name: ‘frame 4’ cannot be parsed why is this happen?
Hi, can you help me? im trying put the file url, but it shows that its not a valid URL
Im getting that error, how did you solved it?
Same error...
Did you solve the error?
I could not get build folder
It Really helped bro thank you
Thanks, glad it helped! 😊👌
Do you work on commission?
Hey, so sorry for the late reply! Unfortunately, I am not currently taking any commissions
@@TurbineThree appreciate your reply.
nice video... but i make something wrong, i think and the converter dont works for me
hmm, do you get an error message or something when u try to convert it?
@@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
Great tutorial 😃
Thank you! 😊
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
Super neat and straight forward tutorial. Thanks a million!
thankss :)
Where is the Checkbox ?
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
Try using pip install --only-binary Pillow
@@TurbineThree Thanks i will try it
@@TurbineThree It says : ERROR: You must give at least one requirement to install (see "pip help install")
the txt dosent contain any data, its is blank
Interesante!! muchas gracias y suscrito.
What happens when yoi cancel Figma membership?
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
How do I improve the resolution for the image? The images being exported isn't as crisp as my design in Figma.
Thats most likely due to your export format compressing the image
@@thomashovgaard3134 Is there an export settings? Thanks in advance.
@@Bangs_Theory he means that your picture is probably just low quality
Awesome ❤🎉😊
Thanks 🤗
y didnt the desing of the Frame of my gui go as well it became white in the code
great video, but the music in the background makes it somewhat difficult to follow
Hello, Im having an issue where I am unable to install tkdesigner because pillow 8.4 does not support python 3.11.0. Is there any fix for this?
It works. I changed python version to 3.8 on pycharm, I couldnt change it on VS code for some reason, thank you!
Glad to know it worked for you!
Great Job mate !!!
Thanks!
Hi, can you help me? im trying put the file url, but it shows that its not a valid URL
Nice tutorial ;)
Thanks!
how to fix
entry_1 = None(
bd=0,
bg="#D9D9D9",
fg="#000716",
highlightthickness=0
)
SyntaxWarning: 'NoneType' object is not callable; perhaps you missed a comma?
entry_1 = None(
i have an error. I can't install pillow. It says Failed building wheel for pillow. Can someone help me pls
have to import PIL not pillow , doubt you need anymore though lol
"please enter vailid url" :(
prob should have mentioned to install an a virt environment first, but cool video.
I like your accent. What country are you from, friend?
Hi, thanks for the comment! I'm from Singapore
@@TurbineThree Are you originally from Sweden or Germany by any chance?
Nope, would love to visit those countries though
@franciscosilva6502 It's going smooth. How's it going at your end?
tinpla gjini?
Work on the sound
Another one?! Please, pay more attention to the sound and voice quality!We almost don't understand what you're saying.
For tutorials I would use less cuts in the video. It is too fast-pased, I would prefer to see the whole screen.
download what ?
do anyone know something like this to convert that figma design into html,css,js?
Great video!
it does not work