solid4

Vier Design-Signale, die wir diese Woche ernst nehmen

Wenn wir im Team über „Design-Trends“ sprechen, geht es selten um die nächste neue Farbe oder ein fancy Pattern. Für uns bei solid⁴ sind Trends dann spannend, wenn sie unsere Arbeit im Alltag wirklich schneller, sauberer oder konsistenter machen – und wenn sie am Ende beim Kunden ankommen: in stabileren Websites, besseren Conversion-Raten und weniger Reibung im Prozess.

In den letzten 24–48 Stunden sind uns vier Signale besonders aufgefallen. Sie kommen aus sehr unterschiedlichen Ecken (Figma, CSS-Standardisierung, Motion/Scroll-Storytelling und Illustrator/AI), greifen aber in der Praxis ineinander. Genau so fühlt sich gerade unsere Arbeit zwischen Webdesign, Entwicklung und KI-Integration an: alles wird modularer, strukturierter – und gleichzeitig flüssiger.

Trend 1: Figma „Slots“ – Designsysteme werden endlich wie Code

Figma rollt Slots in Open Beta aus. Die Kurzfassung: Slots erlauben es, Komponenten in einem Designsystem flexibel zu befüllen (z.B. Menüpunkte, Buttons, Icons), ohne dass man die Instanz „detacht“ und damit aus dem System fällt. Figma beschreibt das sehr treffend als „customize components without breaking the system“ und betont explizit den Code-Bezug: Slots spiegeln, wie Komponenten in Code gebaut werden (dynamisch zusammensetzen statt Varianten zu duplizieren) und machen Systeme „easier for automation and AI agents to reason about“.

Quelle: Figma Blog, zusätzlich in den Release Notes/Forum-Announcement: Figma Forum

Was wir bei solid⁴ damit gerade testen

Wir haben in den letzten Wochen (auch ohne Slots) viel Zeit damit verbracht, Varianten-Explosionen in Figma zu vermeiden. Typisches Beispiel aus Kundenprojekten: Card-Komponenten für Landingpages. Einmal braucht man Icon links, einmal rechts, einmal gar keines – und plötzlich hat man 12 Varianten, die niemand mehr pflegt.

Mit Slots können wir solche Cards wieder „ehrlich“ bauen: Die Card bleibt eine Card, und der Content wird über Slots gesteuert. Für uns ist das spannend, weil es zwei Dinge verbessert:

  • Handoff in die Entwicklung: Wenn die Struktur in Figma der Struktur in Code ähnlicher ist, werden Implementierungen schneller (weniger Interpretationsspielraum).
  • Automatisierung: Wir bauen intern gerade Workflows, bei denen aus Designsystem-Logik automatisiert Komponenten-Dokumentation entsteht. Je expliziter die Struktur, desto besser können Tools (inkl. KI) damit umgehen.
Praxisbeispiel (realistisch, aber anonymisiert)

Bei einem Shopify-Kunden hatten wir kürzlich das Problem, dass Promo-Badges in Produktkarten je nach Kampagne variieren (Sale, Neu, Limited, Bundle). Bisher war das in Figma oft ein Detach-Kandidat. Mit Slots können wir das als „Badge-Slot“ lösen – und in der Entwicklung (z.B. in Liquid/React) entspricht das exakt dem, was später dynamisch gerendert wird. Weniger Sonderlösungen, mehr System.

Trend 2: CSS Snapshot 2026 – Standardisierung als „Agentur-Asset“

W3C hat den CSS Snapshot 2026 veröffentlicht. Das ist keine „Feature-Ankündigung“, sondern eher ein Lagebild: Welche CSS-Module sind stabil, welche sind verlässliche Candidate Recommendations, welche sind noch rough. Für uns als Agentur ist das deshalb relevant, weil Standardisierung am Ende Planbarkeit bedeutet – und Planbarkeit ist die Grundlage für saubere Umsetzungen und faire Projektkalkulation.

Der Snapshot nennt u.a. CSS Grid Layout Level 1, Flexbox Level 1, Custom Properties und CSS Color Level 4 als zentrale Bausteine im 2026er Profil.

Quelle: W3C: CSS Snapshot 2026

Warum uns das gerade intern beschäftigt

In ActiveCollab haben wir für Webprojekte seit kurzem einen kleinen „Support-Matrix“-Schritt: Bei kritischen UI-Features halten wir fest, welche Browser/Versionen wir aktiv testen. Das klingt banal, aber in der Praxis spart es Diskussionen und verhindert, dass man sich in „Edge Cases“ verliert, die für die Zielgruppe des Kunden keine Rolle spielen.

Der CSS Snapshot hilft uns dabei, weil er eine Art „Seriositätsfilter“ ist. Wenn ein Feature in der Praxis schon gut funktioniert, aber offiziell noch wackelig ist, behandeln wir es wie ein Experiment (mit Fallbacks). Wenn es stabil ist, wandert es in unseren Standard-Baukasten.

Was Sie als Entscheider daraus mitnehmen können
  • Weniger Risiko: Standardisierte CSS-Bausteine bedeuten weniger „Überraschungen“ nach Launch.
  • Bessere Wartbarkeit: Sauberer CSS-Unterbau reduziert Nacharbeit, wenn neue Landingpages oder Kampagnen-Sektionen dazukommen.
  • Mehr Geschwindigkeit: Wenn wir uns auf stabile Bausteine verlassen können, sind Iterationen in Design und Entwicklung schneller.

Trend 3: Scroll-Driven Motion bleibt – aber wird strukturierter

Codrops hat ein sehr konkretes Tutorial veröffentlicht: „Sticky Grid Scroll“. Technisch basiert das Beispiel auf GSAP/ScrollTrigger und Lenis, aber der eigentliche Punkt ist konzeptionell: Scroll wird als Zeitachse gedacht, mit klaren Phasen (Reveal → Zoom/Expansion → Content rein → Stabilisierung). Das Ergebnis wirkt „high-end“, bleibt aber steuerbar, weil es modular aufgebaut ist (Sub-Timelines, Overlaps, Labels).

Quelle: Codrops: Sticky Grid Scroll

Wie wir das in Kundenprojekten einordnen (ohne Hype)

Wir sehen Motion/Scroll-Storytelling gerade in zwei Szenarien mit echtem Mehrwert:

  • Produkt- oder Leistungs-Erklärung: Wenn ein komplexes Angebot in 3–5 klaren Schritten erklärt werden soll.
  • Employer Branding: Wenn man Kultur, Team und Arbeitsweise nicht nur „beschreibt“, sondern erlebbar macht.

Was wir aber auch klar sagen: Scroll-Animationen sind schnell ein Performance-Risiko. Deshalb bauen wir solche Effekte nur dann, wenn das Konzept trägt – und wir definieren von Anfang an ein „Budget“ für Bildgrößen, Lottie/Video-Anteile und JS-Overhead. Für die Umsetzung testen wir Prototypen oft zuerst in Cursor (schnell iterieren, messen, wieder wegwerfen) bevor wir es in ein WordPress- oder Headless-Setup übernehmen.

Ein kleines Detail, das wir uns abgeschaut haben

Die Idee, Animationen in Phasen mit überlappenden Timelines zu denken, ist in Agenturprojekten Gold wert. Statt „eine große Animation“ zu bauen, zerlegen wir es in wiederverwendbare Bausteine: Reveal, Parallax, Content-Fade, Button-Entrance. Das lässt sich besser testen, besser optimieren und besser kommunizieren – intern wie gegenüber Kunden.

Trend 4: Illustrator 30.2 – Typografie, Farbe und AI werden produktionsreif

Adobe hat die „What’s new“-Seite für Illustrator aktualisiert und nennt als aktuellste Version February 2026 (Illustrator 30.2). Spannend ist für uns weniger ein einzelnes Feature, sondern die Richtung: Typografie-Workflows werden schneller (Font Browser/Retype), Color/Gradients werden präziser (Dither, perceptual blending, Presets) und Generative Features werden stärker integriert (Firefly/Model-Auswahl in Gen-Workflows laut Release Notes).

Quelle: Adobe: What’s new in Illustrator und Adobe: Release Notes

Was das für Markenarbeit und Webdesign praktisch bedeutet

In klassischen Projekten (Brand Refresh, Website Relaunch) passiert Typografie oft zu spät: erst wenn Layouts stehen, merkt man, dass eine Headline-Schrift in kleinen Größen ausfranst oder dass ein Gradient im Digitalen banding zeigt.

Mit den Verbesserungen rund um Gradient Dither und perceptual interpolation können wir solche Probleme früher sichtbar machen – und vermeiden, dass ein Motiv in Photoshop/Illustrator „gut aussieht“, aber im Web später bricht. Gerade wenn wir Assets aus Illustrator in Figma übernehmen (oder umgekehrt) ist diese Konsistenz wichtig.

Unser Workflow-Split: Figma für System, Illustrator für Charakter

Wir diskutieren intern oft: „Wie viel Brand-Charakter darf in Komponenten stecken?“ Unsere Faustregel aktuell: System in Figma (Komponenten, Spacing, States), Charakter in Illustrator/After Effects (Hero-Assets, Key Visuals, Motion Hooks). Und dann bringen wir beides in WordPress/Storyblok/Shopify zusammen – je nachdem, was der Kunde braucht.

Fazit: Der rote Faden ist Struktur – und die macht uns schneller

Wenn ich die vier Themen zusammenfasse, dann ist der gemeinsame Nenner für uns bei solid⁴ klar: Design wird struktureller. Figma Slots bringen Designsysteme näher an Code. Der CSS Snapshot macht Standardisierung greifbarer. Scroll-Storytelling wird modularer statt chaotischer. Und Illustrator schiebt Typografie/Farbe/AI in Richtung „wirklich production-ready“.

Für Sie als Entscheider heißt das: Gute Agenturarbeit besteht 2026 weniger darin, „den Trend zu kennen“, sondern darin, ihn in Prozesse zu übersetzen – mit klaren Regeln, sauberen Handovers und Tools, die zusammenarbeiten. Genau dort investieren wir gerade den meisten Fokus: in wiederholbare Workflows, die am Ende nicht nur schön aussehen, sondern auch stabil laufen.

Follow us on: