User-Experience- und User-Interface-Design Python-GUIs mit Figma und Tkinter Designer erstellen

Anbieter zum Thema

netfiles GmbH

Hübsche grafische Oberflächen mit Python und Tkinter, ganz ohne Code. Das Tool Figma, ursprünglich für Rapid Prototyping im Bereich User Experience (UX) und User Interface (UI) Design, ist genau darauf spezialisiert.

Wer grafische Oberflächen für Python-Programme kreieren möchte, steht zunächst vor der Wahl einer passenden Bibliothek. Oft genug wird es auf Tkinter hinauslaufen, das in den meisten Python-Installationen schon bereitsteht. Es ist zudem kostenlos, ordentlich dokumentiert, stellt eine ansehnliche Anzahl Widgets zur Verfügung und die Verknüpfung von Design und Funktionen ist ebenfalls einfach umgesetzt.

Die nächste Wahl fällt schon schwerer: Welchen Designer? Die Auswahl ist hier leider nicht sonderlich groß, freundlich gesagt. Als Online-Dienst würde sich zum Beispiel Visual TK anbieten. Es offeriert allerdings nur ein paar wenige Basis-Widgets und einige Features funktionieren auch gar nicht erst.

Für ein schnelles Layout mag Visual TK gegebenenfalls geeignet sein. Hier soll es aber nur ein typisches Problem aufzeigen: Derlei Drag-and-Drop-Designer bieten meist schlicht die vorgegebenen Widgets als Palette und ein paar rudimentäre Design-Werkzeuge. Das ist zwar schnell und standardkonform, aber hübsch? Nicht wirklich.

Hier kommt Figma ins Spiel. Figma existiert als Idee und Frühwerk bereits seit über 10 Jahren, seit 2019 lässt es sich produktiv nutzen. Erst 2022 wollte Adobe das Unternehmen für 20 Milliarden Euro übernehmen. Im Wesentlichen ist Figma ein kollaboratives Design-Werkzeug, ursprünglich für Rapid Prototyping im Bereich UI/UX konzipiert.

Figma läuft als Web- und als Desktop-Anwendung und wird längst auch für jegliche sonstige Zwecke genutzt: Handouts, Hochzeitskarten, hübsch formatierte Informationen für Auditoren, Tabellen, Grafen und so weiter. Trotzdem überzeugt Figma vor allem im Bereich UI/UX, da sich hier auch riesige Bibliotheken mit Widgets finden, beispielsweise Windows UI von Microsoft.

Von diesen Möglichkeiten profitiert der Tkinter Designer. Das Open-Source-Tool kann aus Figma-Designs Tkinter-basierte Python-GUIs erzeugen – mit einem einzigen Befehl. Tkinter Designer ist ein eher kleines, nicht-kommerzielles Projekt und unterstützt längst nicht alles, was in Figma möglich ist – geschweige denn alles, was über Bibliotheken geliefert wird.

Die Windows-UI-Bibliothek bietet etwa komplexe Objekte wie Farbwähler, die wiederum aus etlichen Buttons, Slidern und sonstigen Elementen bestehen. Hier darf man nicht erwarten, dass die einzelnen Elemente zu separaten Buttons, Textbereichen etc. konvertiert werden. Bislang funktionieren folgende Tkinter-Elemente: Button, Line, Text, Rectangle, Text, Entry Box, Image sowie experiementell Hover-Effekte für Buttons.

Tkinter Designer in der Praxis

Zunächst benötigen wir einen Figma-Account, was freilich auch über ein Google-Konto funktioniert. Nach der Anmeldung lässt sich direkt der später benötigte API-Schlüssel erstellen. Diesen erhalten wir über den Hauptmenü-Eintrag „Help and account/Account settings/Personal access tokens“.

Für die Installation von Tkinter Designer müssen Python und Pip vorhanden sein:

Damit ist die Einrichtung auch schon abgeschlossen und wir können mit dem Entwurf beginnen. Tkinter Designer setzt dabei auf ein wunderbar simples Prinzip. Elemente wie Bilder und Texte werden schlicht über ihre Namen umgewandelt. Soll beispielsweise ein Eingabefeld erzeugt werden, wird dies über ein Rectangle-Element realisiert, das schlicht „TextBox“ heißen muss.

Aber mal Schritt für Schritt durch ein kleines Beispiel: Die Basis für ein Design ist ein Frame. Aus einem Frame wird später ein Fenster. Man kann durchaus mehrere Frames in einem Projekt erstellen und somit eine komplette App darstellen. Als erstes, einfachstes Element bietet sich etwas Text an – auch hier genügt es, den Text beliebig zu platzieren, keine weiteren Aktionen nötig.

Interessanter wird es bei einem Button, da dieser tendenziell aus zwei Elementen besteht: Rectangle und Text. Wir zeichnen also zunächst den Button mit dem Rectangle-Werkzeug; optional ließe sich dieses Rechteck auch weiter gestalten, etwa mit einem Schatten versehen. Anschließend legen wir den gewünschten Text als neues Element direkt über den Button.

Nun muss aus diesen Elementen jedoch noch ein Button werden. Dazu werden beide Elemente markiert und dann per STRG+G gruppiert. Die neue Gruppe muss nun noch umbenannt werden in „Button“. Mit Bildern und Formen ist das Prozedere identisch: Alle Elemente müssen gruppiert werden und die Gruppe muss „Image“ heißen.

Als letztes Beispiel: Um ein mehrzeiliges Eingabefeld zu erhalten, benötigen wir in Figma schlicht ein Rectangle-Element mit dem Namen „TextArea“. Für einzeilige Eingabefelder müsste es entsprechend „TextBox“ heißen. Den zugehörigen Text kann man wie bereits erwähnt ohne spezielle Angaben setzen.

Wenn der Entwurf fertig ist, erhalten wir die Projekt-URL über den Share-Button oben rechts. Anschließend lässt sich mit folgender Befehlsstruktur die Python-GUI bauen:

Hier das Ergebnis. So schrecklich dies Demo-Ergebnis auch aussehen mag, es zeigt sehr deutlich die verfügbaren Elemente und das simple Prinzip des Designers. Das ganze Projekt besteht dann aus einer Datei „gui.py“ und einem Assets-Ordner mit der erzeugten Bilddatei.

Abgerundete Buttons und solche mit Hover-Effekt benötigen ein klein wenig mehr Aufwand. In beiden Fällen werden letztlich zwei Buttons/Rectangles übereinandergelegt, ein normales Rectangle als klickbarer Button und ein abgerundetes oder eingefärbtes Rectangle für den Effekt.

Was die Dokumentation nicht erwähnt: Auch Bilder können als Buttons genutzt werden. Platzieren Sie einfach ein Bild und nennen Sie es ebenfalls „Button“, schon ist es in der Python-GUI als klickbarer Button zu finden.

Im Screenshot unten die Ausgabe „button_2 clicked“ – das ist die voreingestellte Funktion des Buttons:

Hier wird also ohne separat definierte Funktion per Lambda-Ausdruck ein Print-Kommando ausgeführt. Dass dem Button automatisch Funktionalität spendiert wird, dürften Python-Einsteiger dem Entwickler danken.

Noch ein kleiner Troubleshooting-Tipp zum Schluss: Die Python-GUI nutzt intern absolute Pfade für die Assets. Wird das Projekt also verschoben, gilt es, die Variable „ASSETS_PATH“ in der gui.py-Datei anzupassen.

Tkinter Designer mag ein wenig begrenzt sein. Normale GUI-Designer, die die komplette Widget-Bibliothek einer Sprache oder eines Frameworks anbieten, können so eben auch Dinge wie Slider, Auswahldialoge und sonstige Standards umsetzen. Und auch der Workflow über Figma und ein Namensschema ist freilich eigenwillig.

Aber das clevere kleine Werkzeug funktioniert hier bislang einwandfrei. Es setzt auf eine der populärsten Design-Plattformen und ermöglicht durchaus praxistaugliche Oberflächen. Diese bieten zwar nur Basisfunktionen, können dafür aber wirklich hübsch sein. Wie immer ist es also eine Frage des Einsatzzwecks.

(ID:49886339)