Ich wollte die Oberfläche einer älteren App von mir überarbeiten und die Änderung über Figma MCP zurück in den Code bringen. Beim Programmieren weiß ich meistens, wo ich anfangen soll. Beim Design fällt mir das schwerer. Ich sehe, wenn eine Ansicht zu eng wirkt. Wie ich die Elemente besser anordne, ist eine andere Frage.
Ich hatte einen Plan für Figma Design mit Zugriff auf den Figma-Agenten und konnte meinen Entwicklungsagenten über Figma MCP mit dem Entwurf verbinden. Damit wollte ich ausprobieren, ob ich aus der laufenden App einen bearbeitbaren Entwurf machen und eine Änderung daraus wieder in die App übernehmen kann.
Von Screenshots zu einem bearbeitbaren Design
Ich habe ungefähr 20 Screenshots von verschiedenen Ansichten und Zuständen der App gemacht und sie in Figma eingefügt. Damit hatte der Figma-Agent den aktuellen Stand der App als Vorlage. Mein Auftrag war sinngemäß: „Mach aus diesen Screenshots bearbeitbare Figma-Entwürfe. Schau anschließend, welche Elemente auf mehreren Screens vorkommen, und leg sie als wiederverwendbare Komponenten an.“
Der Agent hat dabei Titelzeilen, Karten, mehrzeilige Textabschnitte, Listeneinträge, Bilder und Bedienelemente herausgelöst. Es ging mir darum, dass ich diese Elemente in Figma einzeln bearbeiten und an mehreren Stellen verwenden kann. Die Screenshots haben mir dafür gezeigt, wie die Teile in der laufenden App zusammen angeordnet waren.
Beim Anlegen der Komponenten ging der Agent an manchen Stellen zu grob vor. Er hatte ganze Bereiche eines Screens jeweils als eine konfigurierbare Komponente angelegt. In diesen Bereichen steckten aber mehrere kleinere Bausteine, die ich auch einzeln bearbeiten wollte. Ich habe ihn deshalb noch einmal gebeten, in die großen Komponenten hineinzuschauen, die wiederkehrenden Teile darin zu erkennen und sie als eigene Komponenten herauszulösen.
Im ersten Auftrag hatte ich nicht beschrieben, auf welcher Ebene der Agent nach Wiederholungen suchen sollte. Erst am Entwurf habe ich gemerkt, dass „wiederverwendbar“ für mich auch hieß, an einem einzelnen Teil des Screens weiterarbeiten zu können.
Für die erste Änderung habe ich die Geräteauswahl genommen. Die Texte saßen dicht gedrängt in einer Reihe, und ich musste genauer hinschauen, um zu erkennen, welche Angaben zusammengehörten. Ich habe den Figma-Agenten um ein paar Layoutvarianten gebeten. In der Variante, die ich ausgewählt habe, waren die Texte auf mehrere Spalten verteilt. Jeder Text hatte genug Platz, und durch die Ausrichtung war auf einen Blick klarer, was zusammengehörte.
Über Figma MCP zurück in die App
Für die Umsetzung im Code habe ich mit ChatGPT gearbeitet, genauer gesagt mit Codex, dem Coding-Agenten in meiner Entwicklungsumgebung. Ich habe ihm den Link zum ganzen Figma-Screen gegeben und ihn gebeten, die Geräteauswahl im vorhandenen Code zu finden und das Layout aus dem Entwurf zu übernehmen.
Über Figma MCP hat der Agent den verlinkten Screen abgerufen. Darauf war die geänderte Geräteauswahl im Zusammenhang mit der restlichen Ansicht zu sehen. Der Agent hat den Entwurf mit der bestehenden Umsetzung verglichen, die wiederverwendbare Komponente gefunden und ihr Layout im Code angepasst.
Danach habe ich die App neu gestartet und die Geräteauswahl geöffnet. Für mich sah sie eins zu eins aus wie in Figma. Das hat gleich beim ersten Versuch gepasst.
Wie viel Design hat dafür gereicht?
Die Screenshots waren mein Ausgangsmaterial. Für die Umsetzung hat mir ein Screen mit einer klar erkennbaren Änderung als Vorlage gereicht. Er zeigte, wie die Geräteauswahl in die Ansicht passen sollte. In der laufenden App konnte ich dann genau das prüfen, was mich am alten Layout gestört hatte: Haben die Texte genug Platz, und sehe ich auf einen Blick, welche Angaben zusammengehören?
Wenn du eine bestehende App gestalterisch weiterentwickeln willst und dir der Einstieg schwerfällt, such dir eine Komponente aus, bei der du das Problem schon benennen kannst. So hast du eine Frage, an der du sowohl die Entwürfe in Figma als auch das Ergebnis in der App beurteilen kannst.
