Case Study · Externe Code-Umsetzung

Seelenfitness: Kurs-Dashboard

Ein Beispielprojekt, das zeigt, wie ich ein fertiges Figma-Design 1:1 in sauberen, produktionsreifen Astro-Code umsetze, einsatzbereit für euer nächstes Kundenprojekt.

Rolle: Externe Umsetzung (Figma → Code)
Tech-Stack: Astro, Tailwind CSS, TypeScript
Fokus: Pixelgenaue Umsetzung, Barrierefreiheit, Cross-Browser

Der Ausgangspunkt

Das Figma-Design zu diesem Projekt stammt von mir selbst, eigens für diese Case Study erstellt. Bei der Umsetzung habe ich mich an den Ablauf gehalten, den ich auch bei einem fremden Design einhalten würde: fertige Farb-, Text- und Abstands-Styles als feste Vorgabe, keine offenen Design-Entscheidungen mehr während der Codierung, nur die 1:1-Übertragung in Code, der in jedem Browser gleich aussieht.

Mein Vorgehen

1Design-Tokens aus Figma (Farben, Typografie, Abstände) als einzige Quelle ins Projekt übernommen.
2Wiederverwendbare, typsichere Komponenten gebaut.
3Barrierefreiheit (WCAG AA) und Verhalten in allen gängigen Browsern inklusive Firefox geprüft.
4Fertiger, direkt einsetzbarer Code, ohne Nacharbeit übergabebereit.

Das Ergebnis

Live-Demo, läuft mit echtem Code

Unten siehst du das fertige Dashboard aus Sicht einer eingeloggten Kundin, keine Grafik, sondern echter, laufender Code. Der Kalender zeigt immer die kommenden sieben Tage ab heute. Probier es gern an einem anderen Tag noch einmal aus.

Seelenfitness

Aktuell laufende Kurse

Klangschalen Reise
Jeden 1. und 3. Donnerstag,19:00–20:00 Uhr
6 von 8 Plätzen frei
Emotionen Erleben
Jeden 1. und 3. Samstag,13:00–14:00 Uhr
Noch 2 Plätze frei
Klang-Spezial: Sommersonnenwende
21.06.202620:00–21:00 Uhr
Ausgebucht

Kommende Termine

8. Okt

Klangschalen Reise19:00–20:00 Uhr

9. Okt

10. Okt

Emotionen Erleben13:00–14:00 Uhr

11. Okt

12. Okt

13. Okt

14. Okt

Lotus Icon made by Magnific, Lotus Icons erstellt von Magnific - Flaticon

Vorher-Nachher: Figma-Entwurf und Umsetzung

Zum direkten Abgleich, kein zweites Dashboard, sondern ein Screenshot der Live-Demo von oben, gegenübergestellt dem Original-Export aus Figma im gleichen Ausschnitt.

Vorher-Nachher-Vergleich: oben der Figma-Entwurf, unten die fertige Astro-Umsetzung des Seelenfitness-Dashboards. Header, die drei Kurskarten und die Terminübersicht stimmen in Layout, Texten und Farben überein.

Technische Tiefe

TypeScript im strict-Modus
Design-Tokens statt Hex-Werten im Komponenten-Code
Kontraste durchgängig gegen WCAG AA geprüft
Rollierende Kalenderlogik: eine Funktion, einmal beim Build, einmal live im Browser

Passt das zu eurem Projekt?

Ihr habt ein fertiges Figma-Design, das sauber umgesetzt werden soll? Ich übernehme die Codierung für Agenturen und Unternehmen, die dafür kein eigenes Entwickler-Team freistellen wollen.

Projekt anfragen Per Telegram schreiben