UI not displaying after converting Figma design to Python Tkinter code

I’m new to Figma and tried to make a simple UI with two text boxes. I exported it to Python code for Tkinter but when I run it I just get a blank window. No text boxes show up. Here’s my code:

from tkinter import *

def button_action():
    print("Button pressed")

root = Tk()
root.geometry("800x600")
root.config(bg="#ff0000")

canvas = Canvas(root, bg="#ff0000", height=600, width=800, bd=0, highlightthickness=0, relief="flat")
canvas.place(x=0, y=0)

input1_pic = PhotoImage(file="input1.png")
canvas.create_image(-200, 80, image=input1_pic)

input1 = Entry(bd=0, bg="#e0e0e0", highlightthickness=0)
input1.place(x=-350, y=60, width=300, height=35)

input2_pic = PhotoImage(file="input2.png")
canvas.create_image(-200, 150, image=input2_pic)

input2 = Entry(bd=0, bg="#e0e0e0", highlightthickness=0)
input2.place(x=-350, y=130, width=300, height=35)

bg_pic = PhotoImage(file="bg.png")
canvas.create_image(-280, 15, image=bg_pic)

root.resizable(False, False)
root.mainloop()

Why isn’t anything showing up? What am I doing wrong here?

yo oliviac, ur widgets r way off to the left. try movin em to the right by changin those negative x values to positive ones. like instead of x=-350, use x=250 or somethin. also double check ur image files r where they shud be. good luck!

hey oliviac, looks like ur text boxes r positioned offscreen. try changing the x coordinates to positive values, like x=50 instead of x=-350. also make sure ur image files (input1.png, input2.png, bg.png) r in the same folder as ur script. hope that helps!

I’ve encountered similar issues when working with Tkinter. From what I can see, the main problem is that your widgets are positioned off-screen. The negative x-coordinates (-200, -350, -280) are placing everything to the left of the visible window area.

Try adjusting these to positive values within your window’s 800x600 dimensions. For instance, you could set the x-coordinate for your Entry widgets to 250 instead of -350. This should bring them into view.

Also, make sure your image files are in the correct directory. Tkinter can be finicky about file paths. If you’re unsure, try using absolute paths to the images just to rule out any path-related issues.

Lastly, I’d recommend simplifying your layout initially. Start with just the Entry widgets without the images, get those displaying correctly, then gradually add in the more complex elements. This approach has saved me a lot of headaches when debugging Tkinter UIs.

I noticed a couple of issues in your code that are likely causing the blank window. First, your x-coordinates for the Entry widgets and images are negative, placing them outside the visible area. Try adjusting these to positive values within your window’s dimensions. For example, change x=-350 to x=50 for the Entry widgets.

Additionally, ensure your image files (input1.png, input2.png, bg.png) are in the correct directory relative to your script. If they’re not found, this could cause display problems.

Lastly, consider using root.update() before root.mainloop() to force a redraw of the window. This sometimes helps with rendering issues.

If you’re still having trouble after these changes, double-check that Tkinter is properly installed and up to date on your system.