Schlagwort: Design System

  • Wenn Shops ihre Seele verlieren

    Warum Design wichtiger wird als jemals zuvor

    In letzter Zeit sehen viele Online-Shops gleich aus. Gleiche Produktseiten. Gleiche Buttons. Gleiche Bezahlstrecken.
    Weil viele Anbieter auf die gleichen Baukästen setzen. Shopify, Shopware, Wix, you name it.

    Was früher einmal spannend war, wird austauschbar. Alles sieht gleich aus. Es fühlt sich gleich an.
    Der Einkauf wird zu einem technischen Vorgang – nicht mehr zu einem Erlebnis.

    Aber Menschen wollen Marken erleben. Sie wollen etwas spüren.

    Design wird zum Unterscheidungsmerkmal

    Wenn alles auf der gleichen technischen Basis läuft, dann entscheidet das Design.
    Aber nicht nur das Logo oder die Farbe. Sondern das Gefühl.
    Wie sich ein Shop bewegt, reagiert, wirkt.

    Design Tokens, CSS-Variablen, Themes und Grid-Layouts sind keine Spielerei mehr.
    Sie sind die Grundlage, damit Shops Persönlichkeit zeigen können – auch wenn sie aus dem gleichen Baukasten kommen.

    Trends aus Figma und Storybook

    Figma hat mit den neuen Variables einen riesigen Schritt gemacht.
    Man kann Farben, Abstände, Bewegungen und Markenvarianten flexibel steuern.
    Ein Theme-Wechsel zwischen Light und Dark passiert automatisch.
    Mehrere Marken in einem System sind möglich, ohne alles doppelt zu bauen.

    Storybook geht den gleichen Weg.
    Es ist nicht mehr nur ein Tool für Entwickler.
    Designer, Produktmanager und Entwickler arbeiten gemeinsam an Komponenten.
    Man sieht sofort, wie sich eine Änderung auswirkt.
    Ein Design-System lebt – es wird sichtbar und fühlbar.

    Das ist die Basis für Individualität.

    Wenn der Baukasten nicht einschränkt, sondern befreit

    Shopify und Co. müssen keine Einheitswelt schaffen.
    Sie können die Grundlage sein – aber das Erlebnis entsteht durch Design.
    Mit CSS-Grid lässt sich ein Layout verändern, ohne das System zu brechen.
    Design-Tokens halten Markenfarben und Typografie sauber getrennt.
    Und Variablen machen es möglich, dass ein Shop im Dark Mode genauso schön aussieht wie im Light Mode.

    So entsteht Vielfalt – auch bei gleicher technischer Basis.

    Fünf Wege zu mehr Individualität in Baukastensystemen

    1. Design Tokens nutzen – Farben, Abstände, Typografie als Tokens definieren. Das schafft Konsistenz und Freiheit zugleich.
    2. Variables in Figma einsetzen – Light/Dark Themes, Layout-Varianten und Markenlogiken direkt an der Quelle steuern.
    3. Storybook als Design-System-Drehscheibe – nicht nur für Entwickler, sondern für das ganze Team.
    4. CSS-Grid intelligent einsetzen – Layouts an Marken anpassen, ohne Strukturbrüche.
    5. Design automatisieren, nicht standardisieren – Dark/Light Mode, Interaktionen und Motion Design helfen, Emotion zu erzeugen.

    So bleibt ein Shop nicht nur technisch gut, sondern menschlich.

    Fazit

    KI, Automatisierung und Baukästen sind Werkzeuge.
    Aber Design ist das, was uns unterscheidet.
    Wenn alle Shops gleich aussehen, dann fehlt das Herz.
    Marken müssen wieder erlebbar werden – auch digital.

    Design ist kein Beiwerk.
    Es ist die Seele des Online-Erlebnisses.

    Fediverse-Reaktionen
  • Dev Mode in Figma: Ein Fortschritt für Entwickler

    Bist du auch ein Fan von Figma wie ich? Dann wirst du dich sicherlich über die jüngste Neuerung freuen: den Dev Mode. Lass mich dir zeigen, wie ich den Dev Mode für mein Designsystem nutze und warum er ein großartiges Werkzeug für Entwickler ist.

    Was ist der Dev Mode?

    Der Dev Mode ist eine neue Funktion in Figma, die speziell für Entwickler entwickelt wurde. Er ist wie ein Browser-Inspektor für deine Design-Datei. Mit einem einfachen Klick kannst du Abmessungen, Spezifikationen und Stile abrufen. Außerdem kannst du produktionsbereite CSS-, iOS- oder Android-Code-Snippets aus deinem Design generieren.

    Wie verbessert der Dev Mode deinen Arbeitsablauf?

    Mit Figma und dem Dev Mode kannst du deinen Arbeitsablauf optimieren. Du kannst alles, von deinen Designbibliotheken über deine Codebasis bis hin zu deinen Projektmanagementtools, in Figma zusammenbringen. Darüber hinaus ermöglicht dir der Dev Mode, deine eigene Technik-Stack durch Plugins zu integrieren und dieselbe Sprache in Design-Dateien und Code zu verwenden.

    Figma für Visual Studio Code

    Figma bietet eine Erweiterung für Visual Studio Code an, die es dir ermöglicht, Design-Dateien zu inspizieren, mit Designern zusammenzuarbeiten und Code-Vorschläge zu erhalten.

    https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

    Vereinfachung des Übergangs vom Design zur Entwicklung

    Der Dev Mode bietet neue Möglichkeiten zur Organisation von Dateien und zum Aktualisieren von Änderungen, um den Übergang vom Design zur Entwicklung nahtlos zu gestalten. Außerdem kannst du Änderungen leicht verfolgen, indem du einen Frame mit seiner vorherigen Version vergleichst.

    Weitere Entwicklertools

    Neben dem Inspektions- und Codegenerierungs-Tool bietet der Dev Mode weitere Funktionen wie das Herunterladen von Symbolen und Assets mit nur einem Klick und das Testen von Komponenteneigenschaften. Teams, die Figma nutzen, sollen ihre Entwicklungseffizienz um 30% steigern. Wie nutzt du Figma und den Dev Mode in deinem Entwicklungsprozess? Teile deine Gedanken in den Kommentaren.

    https://www.figma.com/de/dev-mode/