Von Figma zu Code mit Coding Agents
Zwischen Design und Code gehen leicht Details verloren. In diesem eintägigen Workshop übersetzen Designer und Frontend-Entwickler gemeinsam Figma-Designs mit Coding Agents in Komponenten. Sie bereiten Designs so auf, dass Agents sie lesen können, ordnen Tokens und Komponenten zu und prüfen den erzeugten Code auf Genauigkeit, Responsivität und Barrierefreiheit.
Unverbindlich anfragen- Dauer
- 1 Tag
- Level
- Fortgeschritten
- Format
- Remote oder vor Ort, Deutsch oder Englisch
- Gruppengröße
- Bis zu 12 Teilnehmende pro Trainer
Für wen der Workshop ist
- Frontend-Entwickler, die Designs umsetzen
- UI-Designer mit enger Zusammenarbeit zu Entwicklern
- Design-System-Teams
- Agenturen mit Design-to-Code-Handoff
Was Ihr Team danach kann
- Figma-Dateien mit Struktur, Benennung und Variablen aufbereiten, die Agents nutzen können
- Komponenten aus Designs generieren und Ihrer Komponentenbibliothek zuordnen
- Design Tokens konsistent in Code übersetzen
- Ergebnisse auf Designtreue, Responsivität und Barrierefreiheit prüfen
- Einen Handoff-Prozess zwischen Design und Entwicklung definieren
Agenda
- Designs, die Agents lesen könnenFrames, Komponenten und Variablen in Figma werden für eine saubere Übersetzung strukturiert.
- Vom Frame zur KomponenteMit Zugriff auf das Design generieren Agents Komponenten, die Sie mit der Vorlage vergleichen.
- Tokens und ThemingFarben, Abstände und Typografie werden Code-Tokens zugeordnet und synchron gehalten.
- Review von Treue und ResponsivitätSie vergleichen das Ergebnis bei mehreren Breakpoints und verfeinern es mit gezielten Prompts.
- Barrierefreiheit und HandoffSie prüfen Semantik, Fokus und Kontrast und vereinbaren den Ablauf für künftige Designänderungen.
Voraussetzungen
- Grundkenntnisse in HTML, CSS und einem Komponenten-Framework
- Figma-Zugang mit einem Beispieldesign und Laptop mit Frontend-Projekt
Warum Workshops von apprat.io
- Geleitet von praktizierenden AI Code Engineers
- Mit Ihren Repositories oder einem Sandbox-Projekt
- KI-Tempo, menschliche Verantwortung: Review, Sicherheit und Governance inklusive
- Zertifizierte Prozesse nach ISO 9001 & ISO/IEC 27001
- Follow-up-Sprechstunde nach 30 Tagen
Unverbindlich anfragen
Erzählen Sie uns von Ihrem Team und Ihren Zielen. Sie erhalten innerhalb eines Werktags eine passende Agenda und ein Angebot – kostenlos und unverbindlich.
24/7-Telefonsupport auf Deutsch & Englisch:
+49 761 519 751 50
Häufige Fragen
Müssen Designer programmieren können?
Nein. Designer bereiten Dateien vor und prüfen Ergebnisse. Die Entwickler steuern den Code.
Welches Frontend-Framework nutzen wir?
Das, was Ihr Team einsetzt, etwa React oder Vue, abgestimmt vorab.
Liefert der Agent allein produktionsreifen Code?
Er liefert eine starke Ausgangsbasis. Review, Integration und Barrierefreiheitsprüfung bleiben menschliche Arbeit, die wir üben.
Mit * markierte Felder sind Pflichtfelder.