Use a Drag & Drop Editor to Make Tkinter Python GUI Applications!
HTML-код
- Опубликовано: 21 июл 2024
- Is designing applications in Python with Tkinter a pain to do? In this Tkinter Designer tutorial, we look at how to use the package, which makes it possible to turn Figma designs through its visual (drag and drop) editor into Python code within a few minutes! Trust me, this is way easier than doing it with Python, allowing you to spend time making better applications!
Links 🔗:
Download TkinterDesigner: github.com/ParthJadhav/Tkinte...
TkinterDesigner Documentation: github.com/ParthJadhav/Tkinte...
Image Used: github.com/RoyChng/tkinter-de...
Completed Code: github.com/RoyChng/tkinter-de...
Other Resources:
Figma Neumorphism UI Kit: www.figma.com/community/file/...
Figma Glass Morphism UI Kit: www.figma.com/community/file/...
Free Figma UI Kits (From UX Crush): www.uxcrush.com/free-figma-ui...
Free Figma UI Kits (From Behance): www.behance.net/search/projec...
Available Figma Plugins: www.figma.com/community/plugins
Chapters 📚:
00:00 - Intro
00:26 - Installation & Getting Started
01:09 - Designing The App
03:08 - Adding Effects
06:02 - Using UI Kits
06:22 - Using Plugins
06:59 - Converting Design To Code
08:56 - Fixing A Common Problem with Tkinter Designer
09:30 - Adding Functionality To Our App
--
That's all, let me know what other videos I should do next in the comments 👇! 
Наука
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 RUclips Video related to Python!
You just earned yourself a loyal subscriber brotha...! 🎉
Thanks for the sub :D
@@TurbineThree Ur welcome 🙏 🤗
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??
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 ?
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!
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
how to deal with multiple windows in Figma please clarify
Hey there nice video, very helpful, I need some help, what's happening with me, is shadows and other effects are not loading.
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.
Thanks for the tutorial! It works
Thanks for watching, glad it helped!
awesome video, fast speed, details, entertaining
Thank you! 👍
Great video! 👏 I liked how you included CodTubify's snippet in the intro. 😊 I made that while learning tkinter. 🙌
incredible tutorial thank you so much
You're very welcome! Glad it helped!
hey so when I turned dark-mode on in the app the button now have white backgrounds(rounded corners)
Thanks for your help.You saved us time
Happy to help!
y didnt the desing of the Frame of my gui go as well it became white in the 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
do anyone know something like this to convert that figma design into html,css,js?
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
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
Can you show how to make tables you that you can freely use and that saves a copy of their own for for users?
I have a problem, after clicking to generate the token the imgs are not imported
Is it possible to add checkboxes?
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
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?
Great video!
Nice tutorial! Will this work if I use a figma design given to me by someone else?
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!
i have an error. I can't install pillow. It says Failed building wheel for pillow. Can someone help me pls
Great tutorial 😃
Thank you! 😊
how come the fonts reset to default helectiva. how to have other fonts there
Great Job mate !!!
Thanks!
Hi, can you help me? im trying put the file url, but it shows that its not a valid URL
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
does tkinter designer support figma animation? (btw good tutorial)
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?
@@user-jg4ci4mf8w buttons were just one example, there are so many other advantages
Very useful! Thanks
Glad it helped!!
Interesante!! muchas gracias y suscrito.
Nice tutorial ;)
Thanks!
what about scrollable view?
Does this work with CustomTKinter aswell=?
ERROR: Could not open requirements file: [Errno 2] No such file or directory: 'requirements.txt'
I get the same message, can't see what's wrong
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
i got an error or sum
Element with the name: ‘frame 4’ cannot be parsed why is this happen?
you are best, master
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.
@@user-jg4ci4mf8w he means that your picture is probably just low quality
It shows that the url of figma page is invalid... What should i do?
Awesome!!!
Thanks!!
Super neat and straight forward tutorial. Thanks a million!
thankss :)
how did you open the tkinter window at 7:10?
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
@@aditya-pandey-16 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 :)
Awesome ❤🎉😊
Thanks 🤗
Now do this with with java?
why can't my image enter the code
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?
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
I could not get build folder
helpful 😀
TOP VIDEO 10 stars❤
Thank you for the tutorial. I just wish that it had a better audio.
Yup, will work to improve it
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.
prob should have mentioned to install an a virt environment first, but cool video.
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!
it gives me invalid url error even if ı do everything same with you
Im getting that error too, how did you solved it?
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
I buy it
TY for backend
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")
Where is the Checkbox ?
¿What can i do if i want the frame resizable?
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
@@TurbineThree Okay, thanks
tinpla gjini?
it was good
I get errors when I run the code in the gui at 7:25 Edit: Fixed the issue
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
It Really helped bro thank you
Thanks, glad it helped! 😊👌
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.
Too good
What happens when yoi cancel Figma membership?
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?
help me, i can't use this code 😓
Good Lord what language was that?
new Subscriber!
Thanks! 😊
Just subscribed
Thanks for the sub :)
"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?
"please enter vailid url" :(
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 video, but the music in the background makes it somewhat difficult to follow
good video, but the voice or the mic is sick my friend
bro im too lucky to cross this video
Why REALLY DO YOU HAVE ONLY 1.66k SUBS | I don't understand 🤔🤔💭💭
Do you work on commission?
Hey, so sorry for the late reply! Unfortunately, I am not currently taking any commissions
@@TurbineThree appreciate your reply.
Can I make a working weather forecast application using this?
Yes, you could probably get the weather forcast from an API and use Tkinter and Tkinter Designer to display the data, and make use of images or icons that change based on the forcasted weather as well.
@franciscosilva6502 not bad , you??
it does not work
Work on the sound
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?
if you do a mistake you cannot delete it
The video is nice, but the voice is not clear and little disturbing to watch, But thanks for sharing suck kind of information
Thanks for the feedback, will work to improve the audio quality
hey @TurbineThree, it doesn't let me install "requirements.txt" in VS. help please... 🥲🥲
It's perfect but not begginer friendly
Bro use ai text to speech voice ❤