Designsysteme unter Druck

Es gibt Wochen, da fühlt sich Web- und Grafikdesign an wie ein ruhiger Fluss. Und dann gibt es Wochen, da merkt man im Team plötzlich: Die Werkzeuge und Standards verschieben sich gerade – leise, aber spürbar.

In den letzten 24–48 Stunden sind bei uns in den internen Channels gleich mehrere Themen gleichzeitig aufgepoppt: Figma wird noch stärker „code-nah“, Browser-Hersteller ziehen bei neuen CSS-Funktionen an einem Strang, und gleichzeitig wird der Umgang mit AI im Design professioneller (nicht lauter, sondern pragmatischer). Hier sind vier Signale, die wir bei solid⁴ gerade aktiv einordnen – inklusive dem, was das konkret für Kundenprojekte verändert.

Figma Slots: Designsystem-Flexibilität ohne „Detach-Hölle“

Wenn Sie mit einem Designsystem arbeiten (oder eines aufbauen), kennen Sie das Muster: Eine Komponente ist „eigentlich“ sauber definiert, aber im Projektalltag wird sie ständig abgewandelt. Mehr Menüeinträge, ein zusätzlicher Button, ein anderes Icon, ein zweizeiliger Titel. In Figma führt das oft zu Varianten-Explosion oder zum schnellen Ausweg: Detach. Und damit verlieren Komponenten genau das, was sie wertvoll macht – Updates, Konsistenz, Wartbarkeit.

Figma rollt gerade Slots als Open Beta aus. Die Idee: In einer Hauptkomponente definieren wir Bereiche als „Slot“, in die Instanzen Inhalte einfügen oder austauschen können – ohne die Instanz zu lösen. Das ist im Kern ein sehr „developer-nahes“ Konzept, weil es dem Prinzip entspricht, wie Komponenten in Code zusammengesetzt werden. Genau deshalb ist es auch für Automatisierung und AI-Workflows spannend: Strukturen bleiben stabil, Inhalte werden austauschbar.

Wie wir das bei solid⁴ gerade einsetzen

Wir haben Slots sofort in einem laufenden System-Refactoring getestet (Figma, Designsystem im Aufbau, parallel Frontend in Entwicklung). Konkret bei Karten- und Dialog-Komponenten, die in Projekten am häufigsten „kleine Ausnahmen“ erzeugen. Unsere Faustregel aus den Tests: Slots zuerst dort einführen, wo Detaches am meisten passieren – nicht dort, wo es theoretisch am elegantesten wäre.

In der Praxis sieht das so aus:

• Cards: Medien-Slot (Bild/Video/Illustration), Action-Slot (1–2 Buttons), Badge-Slot (optional).
• Modals: Header-Slot (Titel/Subtitle), Content-Slot (Text oder kleine Form), Footer-Slot (Buttons variabel).
• Navigation: Menüpunkt-Slot als wiederholbares Element, ohne versteckte Layer-Tricks.

Was das für Sie als Kunde bedeutet

Ein Designsystem wird damit im Alltag belastbarer: weniger Sonderfälle, weniger Inkonsistenzen, weniger „wir haben das schnell kopiert“-Momente. Für uns als Agentur heißt es: Wir können schneller iterieren, weil wir nicht ständig zwischen „Systemtreue“ und „Projektrealität“ entscheiden müssen. Und für Development wird die Übergabe sauberer, weil die Komponente im Design näher an der tatsächlichen Komposition im Code liegt.

Figma MCP & Code Connect: Wenn Design und Code wirklich bidirektional werden

Das zweite Signal kommt aus der Entwicklungsecke – und ist bei uns intern fast spannender als jedes neue UI-Feature: Figma baut die Brücke zu modernen Dev-Workflows gerade sichtbar aus. In den aktuellen Updates rund um den Figma MCP Server und das Code Connect UI geht es um zwei Dinge: (1) Designs besser mit Code-Komponenten verheiraten und (2) Kontext zwischen Tools hin- und herreichen, statt ihn ständig neu zu erklären.

Warum das in echten Projekten zählt

Wir arbeiten in Kundenprojekten oft in einem Dreieck aus Figma, einem Komponenten-Layer im Frontend und einem CMS (z.B. WordPress, Storyblok oder Shopify). Der Engpass ist selten „Pixel schieben“, sondern Abstimmung: Welche States fehlen noch? Welche Varianten sind tatsächlich im Code? Wie bleiben Design und Implementierung synchron, wenn sich Anforderungen ändern?

Die Richtung, die Figma hier einschlägt, passt sehr gut zu unserem Stack: Wir bauen Prototypen, Komponenten und Automationen parallel. In Cursor testen wir z.B. UI-Änderungen direkt im Code, während im ActiveCollab die Aufgaben zu States/Edge-Cases sauber getrackt werden. Der große Hebel entsteht dann, wenn Design-Kontext nicht als Screenshot oder Kommentar übergeben wird, sondern strukturiert.

Konkreter solid⁴-Alltag: „mehrere Code-Dateien pro Komponente“

Ein Detail, das banal klingt, aber in komplexeren Systemen Gold wert ist: Wenn wir eine Figma-Komponente nicht nur einer React/Vue-Datei zuordnen, sondern gleich mehreren (z.B. Styles, Tests, Storybook/Docs), reduziert das Reibung. Genau diese Art von Verbindung macht spätere Änderungen einfacher, weil der Bezug klar bleibt – auch wenn Teams wechseln oder ein Projekt länger läuft.

Interop 2026: Neue CSS-Features werden endlich planbarer

„Geht das schon in Safari?“ ist nach wie vor eine der häufigsten Fragen in Webprojekten. Und ganz ehrlich: Sie ist berechtigt. Viele der spannendsten CSS-Features der letzten Jahre waren lange Zeit super, aber riskant – weil wir entweder polyfillen, ausweichen oder das Feature für 30–40% der Nutzer abschalten mussten.

Mit Interop 2026 haben sich Chrome/Edge (Blink), Safari (WebKit) und Firefox (Mozilla) erneut auf ein gemeinsames Verbesserungsprogramm geeinigt, um bestimmte Plattform-Features konsistent verfügbar zu machen. In der Liste stehen genau die Dinge, die moderne Interfaces heute „ruhiger“ machen: Scroll-driven Animations, View Transitions, Anchor Positioning, Dialogs/Popovers ohne JavaScript, Container-Queries und mehr.

Unsere Einordnung: weniger Hype, mehr Engineering

Wir feiern nicht jede neue CSS-Spielerei sofort im Kundenprojekt. Aber Interop ist für uns ein Signal, wo sich Investitionen lohnen. Wenn ein Feature Teil eines Interop-Fokus ist, steigt die Wahrscheinlichkeit deutlich, dass wir es in absehbarer Zeit stabil und mit kalkulierbarem Risiko einsetzen können.

Typische Einsatzfälle, die wir bereits in internen Prototypen testen:

• View Transitions: Übergänge zwischen Seiten/States, die sich „app-like“ anfühlen – ohne schweres JS-Setup.
• Anchor Positioning: Tooltips, Dropdowns, Kontextmenüs, die robust am Auslöser „ankern“ – gerade in responsiven Layouts.
• Dialog/Popover APIs: Standardisierte Layer-UI für Modals und Popovers (mehr Accessibility mit weniger Custom-Code).

Neue CSS-Bausteine: Customizable Selects & Scroll-Marker – aber mit Vorsicht

Parallel dazu tauchen im CSS-Ökosystem gerade neue primitive Bausteine auf, die langfristig viele JavaScript-Workarounds ersetzen könnten. Besonders spannend finden wir zwei Richtungen:

• Customizable Selects (z.B. appearance: base-select und die Picker-Pseudo-Elemente): Native Selects sollen sich stärker gestalten lassen, ohne Accessibility zu verlieren.
• Scroll UI ohne JS (z.B. Scroll-Buttons/Scroll-Marker): Scroll-Container bekommen automatisch generierte Bedienelemente und Marker.

Was wir Kunden dazu aktuell sagen

Das ist noch kein „bauen wir sofort produktiv ein“-Thema. Viele dieser Features rollen erst durch Browser-Versionen und sind nicht überall stabil. Für uns sind sie derzeit vor allem ein Signal für Roadmap-Planung: Wenn wir heute ein UI-Konzept entwickeln, können wir es so anlegen, dass es später sehr viel einfacher wird, es nativ umzusetzen.

In einem aktuellen Projekt haben wir z.B. ein Filter-UI in Figma so strukturiert, dass die Interaktion sowohl mit einem klassischen Custom-Dropdown als auch mit einem zukünftigen nativ-stylbaren Select funktioniert. Das spart später Redesign-Kosten – und wir müssen nicht neu denken, nur neu implementieren.

Fazit: Trends sind nur dann wertvoll, wenn sie in Ihrem Alltag landen

Bei solid⁴ schauen wir auf Trends nicht als „Inspiration fürs Dribbble“, sondern als Werkzeug- und Prozesssignale. Slots und MCP/Code Connect zeigen: Designsysteme werden flexibler und gleichzeitig näher an Code und Automatisierung. Interop 2026 zeigt: Die Plattform wird planbarer, und damit können wir moderne UX-Muster mit weniger Risiko einsetzen. Und die neuen CSS-Bausteine zeigen: Ein Teil der UI-Komplexität wandert langfristig zurück in den Browser – was Wartung vereinfacht.

Unser Anspruch bleibt dabei simpel: Wir testen früh (in Figma, in Cursor, in Prototypen), dokumentieren sauber (im ActiveCollab) und nehmen nur das in Projekte, was für Ihre Nutzer wirklich besser wird – nicht nur für unsere Tool-Sammlung.