Creating navigation between screens in Python tkinter GUI designed with Figma

Other Questions Figma
1

I’m working on updating my Python app with a modern interface. I created the design in Figma and used tkinter designer to convert it to Python code. The main window works fine but I’m stuck on one big issue.

I need to create navigation between different screens. When someone clicks a menu button like “ADD NEW” I want to show a completely different screen with new content. Right now I only get the first screen and I can’t figure out how to switch to other pages.

The tkinter designer only seems to generate code for one screen at a time. I tried using Figma overlays but that doesn’t translate properly to the Python code.

from pathlib import Path
from tkinter import Tk, Canvas, Button, PhotoImage

BASE_PATH = Path(__file__).parent
IMAGE_PATH = BASE_PATH / Path("./images")

def get_image_path(filename: str) -> Path:
    return IMAGE_PATH / Path(filename)

app = Tk()
app.geometry("1200x800")
app.configure(bg="#FFFFFF")

main_canvas = Canvas(
    app,
    bg="#FFFFFF", 
    height=800,
    width=1200,
    bd=0,
    highlightthickness=0
)

main_canvas.place(x=0, y=0)
main_canvas.create_rectangle(0.0, 0.0, 1200.0, 800.0, fill="#2A2A3E", outline="")

main_canvas.create_text(650.0, 150.0, anchor="nw", text="Dashboard", fill="#FFFFFF", font=("Arial", 48))
main_canvas.create_text(100.0, 300.0, anchor="nw", text="ADD NEW", fill="#FFFFFF", font=("Arial", 32))
main_canvas.create_text(100.0, 400.0, anchor="nw", text="VIEW ALL", fill="#FFFFFF", font=("Arial", 32))
main_canvas.create_text(100.0, 500.0, anchor="nw", text="SETTINGS", fill="#FFFFFF", font=("Arial", 32))

add_btn_img = PhotoImage(file=get_image_path("add_button.png"))
add_button = Button(
    image=add_btn_img,
    borderwidth=0,
    command=lambda: print("Add button pressed"),
    relief="flat"
)
add_button.place(x=50.0, y=280.0, width=300.0, height=60.0)

app.mainloop()

How do I implement proper screen switching in this setup? Should I stick with tkinter or move to a different framework for better navigation support?

2

Had this exact problem converting Figma designs. Tkinter designer makes everything static canvas elements, so navigation sucks. Here’s what worked for me: create a screen manager class for the switching logic. Don’t clear the whole canvas every time - just tag related items when you create them like main_canvas.create_text(..., tags="dashboard"). Then hide/show screens with main_canvas.itemconfig("dashboard", state="hidden") and main_canvas.itemconfig("add_screen", state="normal"). Your Figma code stays mostly the same and you get proper navigation. You’ll have to add tags to each canvas creation call, but it beats redrawing everything.

3

Yeah, tkinter designer’s canvas approach is a pain for navigation - everything’s just drawn on one big canvas. I hit the same wall converting my Figma designs. Here’s what actually worked: keep your main canvas but clear and redraw for each screen. Use main_canvas.delete("all") to wipe everything, then call different functions to draw each screen. Make separate functions like draw_dashboard(), draw_add_screen() - each one rebuilds the canvas elements for that view. Track which screen you’re on with a simple variable. Not the prettiest fix, but it keeps your Figma code intact without massive refactoring. Just make your buttons call the right draw function after clearing.

4

just use tkinter’s ttk.Notebook widget instead of messing with canvas switching. way easier than constantly redrawing everything, and you can keep your figma frames separate. import ttk, make tabs for each screen, and you’re done. no more dealing with tags or clearing canvases all the time.

5

if u just create different frame classes for each screen, it’s way easier to switch screens. use pack_forget() to hide the current one. no need to jump to a diff framework when ur figma code works already!