Create Stunning Python GUIs in 10 Minutes With Drag & Drop

hey guys have you ever wanted to create your own guoy application python stands for graphical user interface and as the name suggest it is basically just an interface for your python application if you've done some research online you might know there are different packages to create those kind of guies there is for example tier which is built in into python there's also Pyon bgi which I also use in the past and there are a bunch of other packages available now all those packages are great but sometimes it can be a bit tedious to create the actual gooey because you need to write a lot of code just to position the different elements for example the label an image or button on the guy so I was looking for a tool to make this whole process of building a GOI a lot easier and then I found a really interesting tool with that tool you can use figma to create your design figma is a website to create knockups it is pretty easy to use you simply just drag and drop different elements into your Cana and then you can style your application however you want now here's the cool part once you're done with your design you can simply export that design into python code that will save you a ton of time and makes the whole process of building a goey a lot easier so in this video I will show you how to use figma then how to convert the figma design into python code and at the end I even have a little bonus tip for you where we will turn our python code into an executable file that means you can share your application with others who don't have python installed on their machine and they can still use it so without further Ado let us type in as mentioned in the intro we will build the G design in figma just head over to figma tocom and create a free account once you're logged in we will start with a frame if you select it you can specify the width and height on the right side these will be our G dimensions for this demo I will use 600x 400 pixels next let me draw a rectangle onto our frame this will will be our background for the other half I'm planning to use an image okay and for the FI color I will go with blue great next up let me also insert some text and again here on the right side you can specify all the properties like the font family font size and font weight okay as the next step let me create the input fields for the label I'll just use a simple text element and change the font weight and size for the actual text input field you can use a rectangle again now for the next input Fields I can simply select our rectangle and text and press contrl D on my keyboard to duplicate it now if I direct down my selection I've got my second input field and again for the last input I will duplicate my selection and direct the fields down since this will be our text area field I will make the rectangle a bit bigger okay next up let me quickly adjust the labels we have we have an email address and also comments lastly I will place a submit button at the bottom for that we can use an rectangle yet again but to make it visually more appealing I'll use rounded corners and also down here I will set the color to a light green for the button label I will use a text element and position it in the center okay this is looking good so far now on the left side I will place an image that I have saved on my desktop so let me open my folder and just drag and drop the image onto our canvas since the image is much bigger let me zoom out a bit and make it smaller okay next up I will quop the image so that it fits into our frame this step is actually important if you don't crop it the goey will look a bit weird later on so I'll crop the right and left sides and also adjust the bottom a bit all right this is looking good so far let me just slightly reposition the text and labels okay and now we are almost done with our design the last thing I want to adjust is the button currently we have a separate text and rectangle to convert this to a button we need to group those two elements just select them on the left right click and select group selection once done I will also rename it to button now here's another important hint for you when you're using a rectangle with rounded Corners like I did for the button you want to group it with a rectangle that has the same color as the background if you don't do this the button will have white background in the corners to avoid that let me duplicate the background rectangle and make it smaller so that it fits a button next we also need to group it so let's ungroup our button first and then with the new rectangle selected group it again as you can see this button now consists of three elements great and with that let me also rename the group again to button all right with that in place let's create the hover effect for the button this is actually pretty straightforward just duplicate the button and place it on top you want to call this group button hover the naming here is important otherwise it won't work okay next up I still have my button selected and now I can simply change the color or in my case I will just lower the opacity now last but not least we need to change the name of our elements only with the correct naming we can convert it to python code later on I will put a table here on the screen to show you how each element should be named and of course I'll also leave a link to this documentation in the description below so all images should be just named image this rectangle right here should be text area and the other two for the email address and customer name should be textbox now for the text labels you can leave them as they are that's fine but for the last rectangle we need to remove the number okay and with that we can head over to the tkinter designer GitHub repo here you can either download the zip file or in my case I'm just going to clone it so let me copy this URL to my clipboard and then open a new terminal on my desktop here I will clone the repo once done you should have the following folder now in this folder there's actually a requirements file so as a first step let's install the requ packages back in the terminal I will change directory and go into the folder we just downloaded now the next step is optional but in my case I will create a separate environment before installing the packages for that I'm going to use the build and python virtual environment once created I will also need to activate it great now that we have that in place I'm going to install the packages by running pip install d r requirements.txt this might take some time once done let me open Visual Studio code now here in the GUI folder you will see the following python file which you want to execute if you do so you will see the following window we will now use this tool to convert our figma design to code first let's get the file URL back in figar click on share and then copy the link to your clipboard that URL goes in here to get the token navigate back to your figma dashboard click on your user user account and select settings if you scroll down a bit you will see the option to generate a new token click on that next give this token a name like teer designer and then hit the generate token button now you should see your token which you can copy and paste into the tkinter designer app all right and last but not least we need to specify the output path in my case I would save it on my desktop okay and with that in place now let's generate our G here in the terminal you can also see the current progress once done you should have a new folder called build in my case it's on my desktop inside here you will find an assets folder that contains all our images and of course you will also find the python file here let me test things out by opening vs code and running our script all right guys and here it is our fully functional python GUI as you can see we have input fields and for the comments we also have a text area field for the button we can also see our hover effect which is pretty neat now obviously not much will happen if I press this button for now it will just print out that the button has been clicked but in the next tutorial we will take our code and turn it into an Excel data entry form and that's actually fairly easy with the H of chat GPT as you will see in that video okay and before you go I also have a little bonus tip for you I will show you how to convert this python code into an actual application so that you can run it without having python installed for that to work we need to make some slight tweaks currently all our images are in the assets folder and this folder is hardcoded as an absolute path so before we turn it into an actual app we need to make it a relative path to do this I will import sis and then replace these lines with the following code now we've converted it to a relative path to test it let me just execute the code again and as you can see everything still works now to convert it into an executable file we'll use a package called P installer but before I install it I will create a virtual environment again and here vs code is already asking me if I want to use this new environment so I do not need to activate it again as we did before okay great so now in our virtual environment I'm going to install P installer once installed you want to use the following command it's important to also set the data like our images to our app otherwise it won't work also if you renamed your folder or the python file you will need to adjust the following command now when you execute it you might actually encounter an issue Windows might detect our new app as a virus which is of course not true so what you can do is simply turn off the real time protection while running this command so now when I try to run the command again it has created our app successfully by default it will be in the following folder to test it let me navigate to that folder and run the app okay great everything is still working of course nothing really happens now when I click on the button but that's totally okay at least we didn't get any error this also now means I can place this file anywhere else like on my desktop and when I rerun it it still works all right guys and that is how easy it is to design and build your python app as I mentioned in the next video we will turn our GUI into an Excel data entry app if you don't want to miss that video hit the Subscribe button down below and as always thanks for watching and I will see you in the next video [Music]

Channel: Coding Is Fun

Views: 21,647

Keywords: Python GUI, tkinter Designer, Figma to Python, Python GUI tutorial, drag and drop Python GUI, PyInstaller, create Python GUI, Python GUI design, Python GUI development, convert Figma to Python, Python GUI for beginners, easy Python GUI, build Python GUI, Python GUI step by step, learn Python GUI, Python GUI tips, Python GUI tricks, Python GUI tools, Python GUI project

Id: NVPibVfFVtM

Length: 11min 37sec (697 seconds)

Published: Sun Jun 16 2024