Figma Sites entdecken
Figma Sites wurde auf der Config 2025 in der offenen Beta-Version veröffentlicht. Er ist derzeit in allen kostenpflichtigen Abos verfügbar, eine eingeschränkte Version für das Starter-Abo ist bald verfügbar. Erfahre mehr über die Funktionen der Beta-Version.
Was ist Figma Sites?
Figma Sites ermöglicht es dir, hochwertige Websites zu entwerfen, Prototypen zu erstellen und zu veröffentlichen – alles an einem Ort.
- Erstelle schöne, responsive Layouts für jede Bildschirmgröße.
- Verwende die gleichen Design-Tools, die du aus Figma Design kennst, z. B. Frames, Auto-Layout, Formen, responsive Komponenten – und vieles mehr.
- Du kannst Elemente zwischen Figma Design und Figma Sites nahtlos hin und her kopieren
- Erwecke deine Website mit benutzerfreundlichen Interaktionen und Animationen wie Marquee-Scrolling, benutzerdefinierten Cursorn und Hover-Effekten zum Leben.
- Teile Live-Websites mit Mitarbeiter*innen, um deine Ideen zu entdecken, die Benutzerfreundlichkeit zu testen und deine Arbeit weiter zu fördern.
Tipp: Setze ein Lesezeichen für https://figma.com/site/new, damit hast du immer eine neue Figma Sites-Datei griffbereit hast, wenn du inspiriert bist!
Finde dich zurecht
Linke Navigationsleiste und Seitenleiste
Die linke Navigationsleiste ermöglicht dir den schnellen Wechsel zwischen Aufgaben in Figma Sites:
- Datei: In dieser Ansicht erfolgt die Erstellung. Du siehst eine vollständige Liste der einzelnen Webseiten und Layer in deiner Datei und kannst deine Website veröffentlichen, wenn du fertig bist.
- Einfügen: Füge vorgefertigte Elemente – wie Navigationsleisten, Fußzeilen, Webseitenvorlagen und Einbettungen – hinzu und greife auf deine Designbibliotheken zu.
- Suche: Dient dem schnellen Auffinden von Elementen in deinen Designs.
- Make: Verwende Code-Ebenen, um Ideen und Designs zum Leben zu erwecken. (Bald verfügbar!)
- CMS: Erstelle und verwalten Inhalte für deine Website. (Demnächst verfügbar!)
- Einstellungen: Aktualisiere die Einstellungen deiner Website, um Suchmaschinen dabei zu helfen, deine Inhalte zu erkennen, die Barrierefreiheit zu verbessern und Nutzern das Finden der gewünschten Inhalte zu erleichtern.
Symbolleiste
Die Symbolleiste enthält alle Werkzeuge, die du zum Erstellen deiner Website benötigst:
- Füge Objekte wie Webseiten, Frames, Bilder, Text und Formen hinzu
- Greife auf Figma AI-Tools im Menü „Aktionen“ zu.
Tipp: Wenn du Designs bereits in Figma Design erstellst hat, wird dir die Arbeit in Figma Sites vertraut vorkommen. Sieh dir diese Liste der in Figma Sites verfügbaren Design-Tools an.
Rechte Seitenleiste
Über die rechte Seitenleiste steuerst das Aussehen und die Gestaltungselemente auf der Arbeitsfläche oder in Webseiten.
Wenn du ein Objekt auf der Arbeitsfläche auswählst, werden seine Eigenschaften auf der Registerkarte Design angezeigt.
Deine Berechtigungen für die Datei – ob Schreib- oder Lesezugriff – bestimmen, was du in der rechten Seitenleiste sehen und tun kannst.
Füge Animationen, Übergänge und visuelle Effekte hinzu, um deine Website lebendig zu gestalten.
Ob eine subtile Hover-Animation auf Schaltflächen, das Hinzufügen von Tiefe und Bewegung durch Parallaxe oder interessante Effekte, die durch Benutzeraktionen ausgelöst werden - Interaktionen können dazu beitragen, dass deine Webseiten reaktionsschneller und lebendiger wirken.
Eine Website erstellen
Beginne mit einem bestehenden Design
Es gibt einige Möglichkeiten, mit Figma Sites einen Vorsprung zu gewinnen, wenn du nicht von Grund auf neu beginnen möchtest:
Mit einer Vorlage beginnen
Jede neue Datei öffnet sich mit der Vorlagenauswahl.
Diese Vorlagen und viele mehr sind auch in Vorlagen und Tools im Datei-Browser verfügbar.
Kopieren und Einfügen aus Figma Design
Schnapp dir deine Designs und kopiere sie direkt in eine Webseite oder greife über deine vorhandenen Designbibliotheken darauf zu.
Mehr über das Kopieren und Einfügen in Figma Design und Figma Sites.
Eine Website mit Blöcken erstellen
Ziehe vorgefertigte Blöcke – Landingpages, Kopfzeilen, Fußzeilen und anpassbare Abschnitte – per Drag-and-Drop in ein Element, um im Handumdrehen eine Website zusammenzustellen.
Responsive Gestaltung
Figma Sites bietet dir umfassende Kontrolle beim Erstellen von pixelgenauen Layouts für unterschiedliche Bildschirmgrößen.
Webseiten hinzufügen
Wenn du eine neue Website erstellst, siehst du einen grauen Container. Dabei handelt es sich um eine Webseite. Jede Webseite hat einen Namen, eine Schaltfläche zur Vorschau und eine Möglichkeit, neue Breakpoints hinzuzufügen.
Klicke auf das Symbol Webseite in der Symbolleiste, um eine neue Webseite hinzuzufügen.
Breakpoints hinzufügen
Breakpoints definieren bestimmte Bildschirmbreiten, bei denen sich das Layout deiner Webseite ändert, um den Anforderungen unterschiedlicher Bildschirmgrößen gerecht zu werden.
Durch das Hinzufügen zusätzlicher Breakpoints kannst du das Erscheinungsbild der Webseite feinabstimmen und das Benutzererlebnis auf verschiedenen Geräten optimieren.
Breakpoint-übergreifend bearbeiten
Wenn deine Webseite mehr als einen Breakpoint hat, kannst du Objekte über alle Breakpoints hinweg gleichzeitig hinzufügen, auswählen und bearbeiten.
Mehr über Änderungen auf einer Webseite über mehrere Breakpoints hinweg
Vorschau deiner Arbeit
Wenn du fertig bist, sieh dir deine Website in der Vorschau an, um sie so zu erleben, wie deine Nutzer*innen es tun werden. Das ist eine großartige Möglichkeit, Animationen, Interaktionen und Reaktionsfähigkeit vor ihrer Veröffentlichung zu überprüfen. Tippe einfach auf das Vorschausymbol auf einer beliebigen Webseite oder drücke die Tastenkombination Shift (Umschalt) Space (Leertaste), um die Inline-Vorschau zu öffnen.
Mit der Welt teilen
Die Veröffentlichung deiner Website ist der letzte Schritt, bevor du sie mit der Welt teilst.
Nach der Veröffentlichung kannst du Änderungen an deiner Website vornehmen, Webseiten hinzufügen oder entfernen oder sie mit einer eigene benutzerdefinierten Domain verbinden.