Design wird System

Montagmorgen, erster Kaffee, ActiveCollab offen – und wie so oft starten wir in der Agenturwoche nicht mit „Inspiration“, sondern mit einer ganz konkreten Frage: Was davon hilft unseren Kunden nächste Woche besser zu liefern? In den letzten Tagen sind uns vier Signale aufgefallen, die genau diese Brücke schlagen: von neuen Tool-Workflows in Figma und Canva bis zu CSS-Entwicklungen, die unsere Frontend-Entscheidungen spürbar verändern.

Design ↔ Code wird in Figma gerade ernsthaft bidirektional

Figma hat in den aktuellen Release Notes erneut nachgelegt: Der Figma MCP Server unterstützt Two-Way-Workflows und ist jetzt in mehr Dev-Umgebungen integriert – explizit genannt werden u.a. Cursor und weitere Coding-Tools. Damit wird der Kreis aus „Design beschreibt“ und „Code baut“ in der Praxis kleiner. Der spannende Teil ist nicht die Ankündigung, sondern das Muster: Design wird zur laufenden Referenz im Entwicklungsprozess – und nicht mehr nur zur Übergabe-Datei. (Figma Release Notes)

Wie wir das bei solid4 einsetzen (und wo wir bremsen)

Bei uns im Team läuft seit einiger Zeit ein Setup, bei dem wir Prototypen und Komponenten in Figma sehr eng mit Code-Strukturen spiegeln. Neu ist: Wir können diese Schleife deutlich schneller schließen – z.B. wenn ein Entwickler in Cursor einen Screen implementiert, den Stand rendert und als editierbaren Frame zurück nach Figma schiebt, damit wir Layout, Spacing und States gemeinsam vergleichen. Der GitHub-Changelog beschreibt diesen Workflow sehr konkret in Verbindung mit VS Code/Copilot: Design-Kontext in den Code ziehen und gerenderte UI als editierbare Frames nach Figma senden. (GitHub Changelog)

Was wir daran mögen:

• Schnellere Iterationen: weniger „Screenshot-Pingpong“, mehr echte Vergleichbarkeit.
• Weniger Missverständnisse: Design-Entscheidungen (z.B. Typo-Hierarchien) sind wieder in der Diskussion, wenn sie relevant sind.
• Bessere Design-System-Pflege: Wenn Komponenten-Varianten im Code auftauchen, sehen wir schneller, wo das System zu „bloated“ wird.

Wo wir bremsen: Nicht jede Rückführung aus Code nach Figma ist automatisch „Design“. Wir nutzen das eher wie ein Review-Artifact. Das bleibt wichtig, damit das Design-System nicht schleichend zur Sammlung von Implementierungsdetails wird.

Canva Magic Layers: Endlich Kontrolle über „flache“ AI-Visuals

Canva bringt mit Magic Layers eine Funktion, die uns im Agenturalltag sofort anspringt: Flache Bilder (auch AI-generiert) werden in editierbare, strukturierte Ebenen im Canva-Editor umgewandelt. Canva beschreibt es ziemlich treffend: Was früher ein statischer Endpunkt war, wird wieder ein Startpunkt – mit separierten Elementen und editierbarem Text. (Canva Newsroom)

Praxis: Performance-Kampagnen ohne „Neu bauen“

Ein realistisches Beispiel aus unserem Umfeld: Ein KMU-Kunde fährt saisonale Kampagnen (Sale, Produktlaunch, Event) – und wir brauchen 10–20 Varianten für Social, Display und Newsletter-Grafiken. Bisher war es bei AI-gestützten Motiven oft so: „Sieht gut aus, aber wenn wir den Claim ändern, müssen wir neu prompten oder nachbauen.“ Magic Layers dreht das um. Wir können ein Motiv als Basis nehmen, dann:

• Claim und Subline als Textboxen sauber anpassen
• Einzelelemente verschieben, um Formate zu optimieren
• Farben/Fonts an ein Brand-Kit angleichen

Wir nutzen Canva bei solid4 bewusst als Produktionswerkzeug – nicht als Ersatz für Figma/Adobe, sondern für schnelle, saubere Varianten. In Kombination mit einem klaren Brand-System (Fonts, Farben, Layout-Regeln) wird Magic Layers für viele Kunden zur „Zeitmaschine“.

Unsere Einordnung

Der Hype ist „AI kann alles“. Die Realität ist: AI erzeugt oft gute Rohmasse, aber die Arbeit ist die kontrollierte Adaption. Genau da setzt Magic Layers an – und das ist der Teil, der in echten Marketing-Workflows Geld spart.

Interop 2026: CSS wird planbarer – und damit wieder mehr Design-Tool

Wenn Sie Websites betreiben, kennen Sie das Problem: Man sieht ein Feature, denkt „nice“, und dann kommt die Support-Matrix. Interop 2026 ist genau der Gegenentwurf: Die großen Browser-Engines arbeiten an konsistenter Unterstützung moderner Web-Plattform-Features. CSS-Tricks fasst das als Fokus auf „cross-browser compatible and consistent“ zusammen – sprich: weniger Überraschungen in Projekten. (CSS-Tricks)

Welche Features wir im Blick haben

Für unsere Arbeit als Webagentur sind einige Punkte besonders spannend, weil sie direkt in Design-Systeme hineinspielen:

• contrast-color(): Das Browser-Rendering entscheidet zwischen Schwarz/Weiß je nach Hintergrund – hilfreich für robuste Token-Systeme. WebKit betont, dass Safari hier früh war und Interop 2026 die Konsistenz über Browser hinweg absichern soll. (WebKit)
• Advanced attr(): HTML-Attribute als Werte für CSS-Properties (mit Typkonvertierung) – das kann UI-State und Varianten ohne extra JS vereinfachen. (WebKit)
• Container Style Queries: CSS reagiert nicht nur auf Container-Größen, sondern auf „Stil-Variablen“ (Custom Properties) – ein sehr natürlicher Fit für komponentenbasierte Systeme. (CSS-Tricks)
• shape(): Responsive Kurven in clip-path/shape-outside, ohne SVG-Pfade als Workaround. (WebKit)

Was das für Kundenprojekte ändert

Wenn CSS wieder mehr kann (und stabiler), verschiebt sich unsere Architektur: Wir lösen UI-Logik häufiger in CSS + Design Tokens statt in JavaScript-Utilities. Das ist nicht „Purismus“, sondern Wartbarkeit. Gerade bei WordPress-, Shopify- oder Headless-Setups, die Jahre laufen sollen, ist weniger Custom-JS oft der günstigere Weg – solange die Browserbasis mitspielt. Interop 2026 ist deshalb für uns nicht „Web-Nerd-News“, sondern eine Planungshilfe.

Vendor Prefixes 2026: Warum AI sie zurückbringt – und was wir dagegen tun

Ein kleiner, aber sehr echter Trend aus den letzten Tagen: Ein aktueller Artikel erinnert daran, warum in 2026 immer noch CSS mit -webkit- & Co. in Codebases landet. Zwei Ursachen sind für uns besonders relevant: Legacy-Code wird selten bereinigt – und AI-Coding-Tools reproduzieren alte Patterns, weil sie aus historischen Beispielen lernen. (omgmog.net)

Unser Standard-Setup: Prefix-Management gehört in die Pipeline

In Projekten, die wir betreuen, ist die Regel simpel: Im Source schreiben wir möglichst unprefixed. Prefixes entstehen (falls nötig) durch die Build-Pipeline – typischerweise via Autoprefixer und klarer Browserslist. Der Artikel empfiehlt genau diesen Ansatz und ergänzt es um Stylelint-Regeln, damit Prefixes nicht „per Copy/Paste“ wieder reinrutschen. (omgmog.net)

In der Praxis haben wir dafür intern sogar eine kleine Checkliste, die in ActiveCollab bei neuen Projekten automatisch aufpoppt: Build-Setup, Linting, Browser-Zieldefinition. Klingt banal – spart aber über die Laufzeit richtig Geld, weil man nicht bei jeder Designänderung am Ende im CSS-Klebstoff steckt.

Fazit

Wenn man die vier Signale zusammenzieht, sieht man eine Richtung: Design wird weniger „Datei“ und mehr „System“. Figma schiebt Design/Code enger zusammen, Canva macht AI-Assets wieder steuerbar, und CSS wird durch Interop planbarer – während gleichzeitig AI alte technische Schulden (Vendor Prefixes) wieder in die Gegenwart spült.

Bei uns im Team sind das keine abstrakten Trends, sondern konkrete Entscheidungen im Alltag: Welche Tools hängen wir an unseren Workflow? Wo investieren wir in Design-Systeme? Und wo sagen wir bewusst: „Das ist nett, aber noch nicht reif genug für Kundenprojekte“.

Genau diese Mischung aus Neugier und Pragmatismus ist aktuell der wichtigste „Trend“ überhaupt.