Das perfekte Webdesign 3/5 - Komponentenbasiertes Design mit Auto Layout
Warum sind manche Webprojekte so viel schneller umgesetzt als andere? Warum funktionieren einige Designs responsive einwandfrei, während andere bei jedem Viewport zerbrechen? Der geheime Superheld hinter effizienten Webdesigns ist ein Konzept, das wir bei Code Crush nicht mehr wegdenken möchten: komponentenbasiertes Design mit Auto Layout.
Autor:
Samuel Rhyner
Datum: 7. Mai 2025
Lesezeit: ca. 3 min
Das ist Artikel 3 von 5. Die Serie beginnt hier.
Warum alles zur Komponente machen?
„In der Webentwicklung ist alles eine Komponente." Diese Aussage mag zunächst übertrieben klingen, doch wir übersetzen zwangsläufig alles in eine Komponente. Von Buttons über Formulare bis hin zu ganzen Sektionen – der komponentenbasierte Ansatz revolutioniert die Art, wie wir Websites gestalten und entwickeln.
Bei diesem Ansatz gilt:
Jedes wiederverwendbare Element wird zur Komponente – sei es ein Button, eine Karte oder ein Menü
Komponenten werden separat designed und erst später zusammengesetzt - um die Flexibilität zu wahren
Konsistenz und Wiederverwendbarkeit stehen im Fokus
Für unsere Kundinnen und Kunden sind besonders die "sections" wichtig – diese grösseren Blöcke, aus denen sie ihre Webseiten wie aus einem Baukasten zusammensetzen können.
Die echte Magie beginnt, wenn diese Komponenten mit Auto Layout gedacht und designed werden.
Auto Layout: Der Game Changer im Webdesign
Wer zum ersten Mal mit Auto Layout in Figma arbeitet, könnte denken: „Das schränkt mich doch nur ein!" Doch genau das Gegenteil ist der Fall. Auto Layout ist wie ein treuer Co-Pilot, der mitdenkt und die technischen Realitäten des Webs versteht. Zudem zwingt er dich, das Design so weit zu denken, dass es dann auch im Web robust ist.
Mag jetzt eventuell banal klingen, aber ein Figma verleitet, die Webseite als Canvas zu sehen. Das Web hingegen ist viel dynamischer und einen "Desktop-Viewport" gibt es in dieser Art auch gar nicht. Darum imitiert Auto Layout die weit verbreiteten "Flexboxen" im Web und lässt das Design "aus Entwickler-Augen" denken.
Was macht Auto Layout so besonders?
Natürliches responsives Verhalten: Elemente passen sich automatisch an, wenn sich Inhalte oder Container-Grössen ändern
Konsistente Abstände: Padding und Margin sind klar definiert und bleiben bei Anpassungen erhalten
Flexibilität im System: Elemente können wachsen, schrumpfen oder ihre Position ändern – ganz wie im echten Web
[Video: Auto Layout in Aktion → von scherii
In der Praxis: Wie wir Auto Layout nutzen
Bei einem unserer jüngsten Kundenprojekte konnten wir die Entwicklungszeit um fast 30% reduzieren, weil das Design mit konsequentem Auto Layout umgesetzt wurde. Hier unsere wichtigsten Tipps:
Konsequent bleiben: Vom kleinsten Button bis zur kompletten Seite – alles kommt in ein Auto Layout
Verschachtelung nutzen: Auto Layouts können innerhalb anderer Auto Layouts verwendet werden, genau wie in der Webentwicklung Flex-Boxen oder Grids verwendet werden
Breakpoints minimieren: Ein gut umgesetztes Auto Layout reduziert die Notwendigkeit vieler Breakpoints
Werte gemeinsam definieren: Das Spacing-System aus eurem Design System sollte die Basis für alle Auto Layout-Abstände bilden
Komponentendenken: Die Entwicklungsperspektive
Für uns als Webagentur ist der komponentenbasierte Ansatz mit Auto Layout ein echter Segen. Warum?
Direkter Transfer: Was in Figma als Komponente mit Auto Layout definiert wurde, lässt sich fast 1:1 in moderne Web-Frameworks übersetzen
Schnellere Änderungen: Wenn eine Anpassung notwendig ist, kann sie zentral vorgenommen werden und wirkt überall - instant Feedback für den/die Designer:in
Bessere Kommunikation: Designer:innen und Entwickler:innen sprechen dieselbe Sprache der Komponenten
Wir freuen uns sehr, wenn ein neues Design mit durchdachten Komponenten und Auto Layout zu uns kommt. 😍
Wir sind überzeugt: Wer komponentenbasiertes Design mit Auto Layout meistert, designed nicht nur schöner, sondern auch effizienter, suchmaschinenoptimierter und entwicklungsfreundlicher.
Im nächsten Teil unserer Serie widmen wir uns einem oft unterschätzten Aspekt: "Content-first: Warum echter Inhalt im Webdesign wichtig ist". Spoiler: Lorem Ipsum ist bei uns verboten! 🙂
In der Praxis: Wie wir Auto Layout nutzen
Bei einem unserer jüngsten Kundenprojekte konnten wir die Entwicklungszeit um fast 30% reduzieren, weil das Design mit konsequentem Auto Layout umgesetzt wurde. Hier unsere wichtigsten Tipps:
Konsequent bleiben: Vom kleinsten Button bis zur kompletten Seite – alles kommt in ein Auto Layout
Verschachtelung nutzen: Auto Layouts können innerhalb anderer Auto Layouts verwendet werden, genau wie in der Webentwicklung Flex-Boxen oder Grids verwendet werden
Breakpoints minimieren: Ein gut umgesetztes Auto Layout reduziert die Notwendigkeit vieler Breakpoints
Werte gemeinsam definieren: Das Spacing-System aus eurem Design System sollte die Basis für alle Auto Layout-Abstände bilden
Komponentendenken: Die Entwicklungsperspektive
Für uns als Webagentur ist der komponentenbasierte Ansatz mit Auto Layout ein echter Segen. Warum?
Direkter Transfer: Was in Figma als Komponente mit Auto Layout definiert wurde, lässt sich fast 1:1 in moderne Web-Frameworks übersetzen
Schnellere Änderungen: Wenn eine Anpassung notwendig ist, kann sie zentral vorgenommen werden und wirkt überall - instant Feedback für den/die Designer:in
Bessere Kommunikation: Designer:innen und Entwickler:innen sprechen dieselbe Sprache der Komponenten
Wir freuen uns sehr, wenn ein neues Design mit durchdachten Komponenten und Auto Layout zu uns kommt. 😍
Wir sind überzeugt: Wer komponentenbasiertes Design mit Auto Layout meistert, designed nicht nur schöner, sondern auch effizienter, suchmaschinenoptimierter und entwicklungsfreundlicher.
Im nächsten Teil unserer Serie widmen wir uns einem oft unterschätzten Aspekt: "Content-first: Warum echter Inhalt im Webdesign wichtig ist". Spoiler: Lorem Ipsum ist bei uns verboten! 🙂
Serie: Das perfekte Webdesign
Dieser Artikel ist ein Bestandteil aus unserer Blog-Serie:
Design-Systems sind der Schlüssel zu konsistenten Webprojekten
Komponentenbasiertes Design mit Auto Layout
Warum echter Inhalt wichtig ist
Accessibility und Best Practices
