Use Figma to create a drag and drop User Interface for Python using TkInter

there's only so far you can get with python before you realize that the command line is pretty boring and you hanker for something with graphical elements like colors and buttons and pictures what you need my friend is a graphical user interface or gui there's a variety of gui's available to python and the one that comes as standard is one called takinter which is a library that's already baked into your current install of python you might have used tickinter before when you've used things like the turtle module because that's what it's based on however trying to get to kinter to you to use takinter to design a graphical user interface with buttons and fields and text boxes and things like that is quite tricky because it never tends to appear where you think uh the elements are going to appear it's a little bit hit and miss and what i was looking for was some kind of drag and drop designer to allow me to design um a graphical user interface without having to know exactly how to do it into kinter and then i can just hook into it and use the buttons and the text boxes to actually write my algorithms now those of you who are thinking of doing python for their for your projects your a-level projects you will need some kind of graphical user interface now i've traditionally taught people to do it using either a web-based form which you can either use you know php and html together for that or more recently using flask with python but i discovered this new neat trick to allow you to create your own your own graphical user interfaces so what i was doing i will just show you my screen so you can see it what i was doing previously was googling um the five best python drag and drop ue builders so as i scroll down through this this is quite an interesting one um it mentions this one called the pi qt framework designer which i've heard people mention before um which i might i might investigate later on uh there's also this one called the wix or wx form builder which is a similar sort of thing what i was aiming for was something uh like in visual studio when you're using visual basic you can drag and drop elements and and plot them onto a screen and have buttons and text boxes where where you drag them so far so good but then i found this which is called takinte designer and the thing that got me excited was the fact that it was using this thing called figma now figma is a website a free to use website it does have a pricing plan if you want to use it more intensely but it's free to sign up for and it allows you to create your own graphical user interfaces that way now i'm always intrigued how python can be used with some of the more webby elements and so i read on now the actual um the actual code can be found at this github address so if i just go to the github address which i've still got up here and scroll back up to the top it's basically got the instructions on how to get it set up so assuming you've got python installed you then need to install this library called tick into designer and then you need to make a figma account let me just show you what figma looks like to start with so here's one i prepared earlier and uh this is a way to create a nice form okay um if i let's create a brand new one shall we let me just create a brand new project so if i go back to files and let's create a brand new project there we go that's team i do know here we go design file so if i create a new design file i don't know lots about figma and i'm sure there will be lots of you out there who know much much more than me but say i wanted to design a simple form i would create a frame so i can choose how big my frame is going to be this is effectively the same as your window and then you can put various blocks onto it so i can draw a block here so say this is going to be where someone enters some information then i can also add some text to say enter your password for example i don't know um and then you can drag it around this is what this is what i was looking for the idea that you can actually make your interfaces look quite nice and then let's say i want to add a button now you'll notice there isn't actually a button here but the way we can do that is create i'm just going to make a big fat button there i can on the right hand side choose a different color so let's make a big fat red button and then if i want to add some text onto it i can draw some text and i'm going to call it log in and you can make it a bit bigger again down here and you can do things like design and make it a line there we go that looks pretty good now how we name these elements is how this module will import and import it into to kinta so firstly if i want this grey box here to be a text box i need to right click choose rename and call it text box okay the actual text that's just labels on the form i can leave but for something like this rectangle and this login what i want to do is group these together now i should be able to select both of them right click and choose group selection okay so works the same as in like photoshop or like you know word and powerpoint that allows you to group elements but if i want this to be a button i have to name rename the group and call it button okay you can also add some nice pictures as well so if i always find these cute cartoon kittens let's pick this one here no let's have one like this is a cute cartoon kitten i would obviously credit this if i was going to be using this seriously but i'm just going to put it on here there's my cute cartoon kitten you can also do cool things like round the edges this is what i'm enjoying doing by clicking on those borders there and if i want to change the whole picture i'm sorry the whole background of my form i can click the fill on the right hand side i can even use the eye dropper and then pick a color i like that gray color there we go so i've really quickly knocked up a form but at the moment it is just a um it's just a figma um figma project so it's not anyway connected to python at all what i will need to do is go up to share and copy the link okay so this is a link to this project all right and if i just paste it into a new tab so you can see what it looks like there's my link to my project up at the top there right what do we do next so if i go back to how to use tick into designer and scroll down so assuming you've already got python installed i'm going to ignore step one for installing tick into designer you can either use pip or you can use this poetry method or you can just clone the git repo and cd into the drive and then install the requirements okay either of those three methods will work don't don't know what i did sorry don't do what i did and do try and do all three because it gets very confusing all right then you need to make a figma account so go go and sign up verify your email create a design file and then start making your your graphical user interface now this table here shows you the different types of naming so we could um as if we name things button it will appear as a button if we name it as a line appear as a line text can be named anything so you don't need to worry about that you can also copy over rectangles text areas text boxes and images okay i haven't done all of them but you can try that so you need to name them these things on the left here for them to be pulled over into tikintak then there's lots of interesting uh things about how you can do it in figma i'm scrolling down how do we actually use it right so you'll need to grab hold of your personal access token this can be found in your figma account go to the little figma icon top left go to your account settings and then scroll down and there's personal access token you give a description and it gives you a long number okay i've already created when i called it to kinta there um you can create i presume as many as you want but you'll get a long um base64 string that you need to copy and save somewhere okay the other thing is to get that link that i copied there there's my link up up at the top there then uh so personal access token your file url and then you use the command line interface so what we want to do is spin up our command line interface not that one this one here and the the actual url is sorry the actual command is tk designer i'm typing it in here then we want to use the url for our file and then we want to use our personal access token which i've copied somewhere here so i don't have to remember it it's up here somewhere oh so much python here we go there's my personal url so i'm copying that and then going back here and right clicking it when i run it i should get success there we go and it will start to to go through we put a text box we had a bit of text saying enter your password a button image one oh the element with name image one cannot be parsed would be displays ah because if i go back to my lovely little picture of the cat here i did not rename my image not to not a problem no no big deal i can just call it image and then try again so if i go back to my command line and press the up arrow and it will run it again now it says that the build already exists i didn't show you the folder but um let's just we'll look at that in a second if i say i want to overwrite it hopefully i won't get that error again okay so same sort of thing it's got a text box it's got my entire password it's got a button and it's got an image there we go project successfully generated so no errors there if i go here there's my build folder so if i open up my build folder oops if i open up my build folder there we go you've got a folder called assets if i just have a look in there there we go it's my button there's my text box background and there's my image with the circle um background which is nice and then if we look in the gui dot pi i'll just edit it with idle here there we go um it's generated some decent looking python okay the thing i liked about this is um if i just run it i was genuinely shocked when this actually worked look it doesn't look exactly the same but it's pretty darn close this works as a text box this works as a button and i've even got some code running so it actually works as a button click so you could add all sorts of exciting things to this in order to make your um your python interface much more interesting okay i'm also going to show you one i created earlier just because i was rather rather pleased with my work on it just to show is it this one here yes i think it is let's try this one so if i overwrite this make sure i've got it yeah oh hello here we go so this one had a little bit more in it a few more text areas and and buttons and things like that so we'll see whether this works all right so it's just over written the one i've done before so if i oops open that with idle why is this not working and have a look at the code here and i'll just run it to show you there we go oh this is a calculator so if i add two numbers i think uh oh why is my my code isn't working oh it's because it's because i re um i re i re wrote over it didn't i i have got the code for it somewhere but you can kind of see how you can make a much more interesting interface by uh generating using this token to designer so what i want to just say in in um conclusion is uh it's a really nice way of spinning up a nice um user interface tick into designer go and install it play around with it play around with figma you should be able to create some really nice looking interfaces i might do another video on how i actually did get that bison calculator to work and i will see you soon

Channel: Mrs J Computing

Views: 34,310

Keywords:

Id: 7RXBLeOOiYQ

Length: 13min 59sec (839 seconds)

Published: Wed Jul 27 2022