Die Gestaltung einer modernen Website in Figma erfordert die Abkehr von der statischen Positionierung der Leinwand und die Akzeptanz der fließenden Natur des Webs. Durch die Kombination von Auto-Layout und Komponentenarchitektur müssen Sie nicht mehr raten, wie Layouts auf verschiedenen Bildschirmen aussehen werden, sondern können mit denselben strukturellen Regeln arbeiten, die Webbrowser zum Rendern von Code verwenden.
Dieser umfassende Leitfaden integriert die offiziellen Figma-Mechanismen, Experten-Workflows für Stresstests und Prinzipien der Frontend-Entwicklung, um Ihnen zu helfen, responsives Webdesign zu meistern.
Um eine Website erfolgreich in Figma zu erstellen, müssen Sie aufhören, Elemente mit willkürlichen Pixelkoordinaten zu positionieren, und anfangen, in Begriffen der fließenden Container-Mechanik zu denken.
Jede Webseite besteht aus einer Reihe verschachtelter Boxen, die entweder vertikal oder horizontal verlaufen.
Bei der Anpassung eines Canvas für das Webdesign stellt die Beherrschung der Größenbeschränkungen sicher, dass Ihr Layout nicht zerbricht, wenn sich der Text ändert oder die Ansichtsfenster skaliert werden.
Wahltaste(Alt) gedrückt, während Sie die Auffüllungsgrenzen auf der Leinwand ziehen, um beide Seiten (links/rechts oder oben/unten) gleichzeitig anzupassen. Halten Sie Wahl+Umschalt gedrückt, um alle vier Ränder gleichmäßig zu skalieren.(Inspiriert von Design System Workflow Mechanics)
Ein häufiger Fehler ist es, eine schöne Webseite zu entwerfen, sie am Ende in eine Komponente umzuwandeln und dann zuzusehen, wie sie bei der Dehnung völlig auseinanderfällt. Um belastbare Webabschnitte zu erstellen, folgen Sie diesem Reverse-Engineering-Workflow:
Schritt 1: [Grobes Layout] ➜ (Rohtext/Knoten)
Entwerfen Sie den Inhalt frühzeitig: Warten Sie nicht auf High-Fidelity-Stile. Schreiben Sie Ihren groben Text für den Helden und platzieren Sie einen einfachen Platzhalter für Ihr Bild. Gruppieren Sie sie und wenden Sie das automatische Layout an (Umschalttaste + A).
Schritt 2: [Masterkomponente erstellen] ➜ (Frühzeitig in eine Komponente umwandeln)
Sofort in eine Komponente umwandeln: Verwandeln Sie diesen Basis-Layoutabschnitt in eine Hauptkomponente (Cmd + Option + K auf Mac / Ctrl + Alt + K auf Windows).
Schritt 3: [Instanz herausziehen und dehnen] ➜ (Dehnen auf 1440px und 375px)
Ziehen Sie die Instanz heraus und führen Sie einen Stresstest durch: Duplizieren Sie die Komponente zweimal. Dehnen Sie eine Instanz auf eine Desktop-Breite von 1440px, und verkleinern Sie die andere auf eine Mobile-Breite von 375px. Platzieren Sie sie direkt neben Ihrer Hauptkomponente auf der Leinwand.
Websites werden mit einer verschachtelten Hierarchie aufgebaut. Sie bauen zuerst die kleinsten Blöcke auf und verschachteln sie in größeren Boxen, bis Sie eine vollständige, funktionale Webseite haben.
Beginnen Sie mit dem Aufbau der einzelnen UI-Teile, die sich auf der gesamten Website wiederholen.
Umschalt + A, fügen Sie Ihre Hintergrundfarbe hinzu und passen Sie die Auffüllung direkt an. Hinweis: Sie brauchen keine versteckte Rechteckebene darunter; ein Auto-Layout-Rahmen kann seine eigene Hintergrundfarbe, Konturen und Eckradien haben.Container füllen eingestellt ist.Kombinieren Sie Ihre Atome miteinander, um wiederverwendbare Layoutmodule zu erstellen.
H2-Überschrift und einen Textkörperabsatz in einem vertikalen Auto-Layout. Setzen Sie den Abstand zwischen ihnen auf einen Wert von z.B. 16px. Stellen Sie beide Textebenen auf Container füllen ein, damit sie sich beim Dehnen sauber anpassen."Fill Container" eingestellt) über Ihre Textgruppe. Verpacken Sie sie in ein vertikales Auto-Layout, fügen Sie eine weiße Füllung, Eckradien und Polsterung hinzu. Stellen Sie das vertikale Verhalten der Karte auf Inhalt umarmen ein, damit sie dynamisch auf der Grundlage der Textlänge skaliert.Kombinieren Sie Ihre Moleküle, um die vollständigen Abschnittslayouts Ihrer Website zu erstellen.
Die globale Navigationsleiste: * Platzieren Sie eine Logo-Bildkomponente auf der linken Seite.
Erstellen Sie eine Gruppe von Menülinks mit einem horizontalen Auto-Layout, das auf Inhalt umarmen eingestellt ist, auf der rechten Seite.
Gruppieren Sie das Logo und den Linkstapel in einem äußeren Auto-Layout-Rahmen. Ändern Sie das Dropdown-Menü für den horizontalen Abstand von einem festen Pixelwert auf Auto (dadurch wird eine Verteilung "Abstand zwischen" ausgelöst).
Das Responsive Feature Grid:
Sobald Sie Ihre Desktop- und mobilen Seitenversionen erstellt haben, kann die Verwaltung der Layouts bei Änderungen durch den Kunden überwältigend werden. Verwenden Sie die Multi-Edit-Suite von Figma, um Ihre responsiven Layouts gleichzeitig zu verwalten.
Wenn Sie die Kopie oder den Stil einer Feature-Card-Überschrift in allen Zeichenflächen von Desktop, Tablet und Mobile ändern müssen:
Umschalttaste gedrückt und bewegen Sie den Mauszeiger über die anderen Ansichtsfenster - Figma markiert die passenden Strukturebenen auf der gesamten Zeichenfläche mit einem blauen Tracking-Ring.
Der Übergang zu einem responsiven, komponentengesteuerten Arbeitsablauf in Figma erfordert eine leichte Umstellung der Denkweise, aber der Nutzen ist enorm. Indem Sie Ihre Layouts mit denselben logischen Leitplanken strukturieren, die auch Webentwickler verwenden - verschachtelte Boxen, fließende Beschränkungen und modulare Komponenten -, vermeiden Sie Rätselraten und Pixelschieberei.
Wenn Sie das nächste Mal eine Webseite erstellen, sollten Sie nicht warten, bis das Design fertiggestellt ist, um zu sehen, ob es funktioniert. Richten Sie Ihre Auto-Layout-Systeme frühzeitig ein, testen Sie Ihre Instanzen über verschiedene Ansichtsfenster hinweg in Echtzeit, und lassen Sie Figma die Arbeit für Sie erledigen. Ihre Entwickler, Ihre Kunden und Ihr zukünftiges Ich werden es Ihnen danken.
Viel Spaß beim Entwerfen!