Figma Sites wurde auf der Config 2025 in der offenen Beta-Version veröffentlicht. Es ist derzeit in allen kostenpflichtigen Abos verfügbar, eine eingeschränkte Version für das Starter-Abo ist demnächst verfügbar. Erfahre mehr darüber, was in der Beta-Version enthalten ist.
Wer kann diese Funktion verwenden?
Verfügbar für alle kostenpflichtigen Abos
Erfordert Schreibzugriff auf die Datei
Figma Sites ermöglicht es dir, Websites mit denselben leistungsstarken Tools zu erstellen und zu veröffentlichen, die auch in Figma Design verfügbar sind.
Designs in Figma Sites erstellen
Wenn du in Figma Sites arbeitest, kannst du direkt innerhalb einer Webseite Designs erstellen oder die Arbeitsfläche als Raum zum Erkunden von Ideen nutzen.
- Erstelle Designelemente. Beginne damit, der Datei Frames, Formen, Text oder beliebige Designelemente hinzuzufügen, genau wie du es bei einer Designdatei tun würdest.
- Gestalte sie responsiv. Verwende Auto-Layout und Einschränkungen, um deine Website an verschiedene Bildschirmgrößen anzupassen.
- Verwende Designelemente mehrmals. Halte deine Website konsistent, indem du Komponenten, Stile oder Variablen erstellst oder vorhandene Assets aus einer Bibliothek nutzt.
- Eine Bibliothek veröffentlichen. Teile Komponenten, Stile oder Variablen, damit andere Personen in anderen Dateien darauf zugreifen können.
- Füge Interaktivität hinzu. Verwende wie beim Prototyping in Figma Design Interaktionen, um Bewegung und Animationen zu Designelementen hinzuzufügen.
Sobald du Designs zu einer Webseite hinzugefügt hast, kannst du sie in der Vorschau ansehen und veröffentlichen – ohne Programmierkenntnisse.
Was passiert, wenn ich zwischen Figma Design und Sites kopiere und einfüge?
Im Allgemeinen sollte das Hin- und Herwechseln zwischen Figma Design und Figma Sites reibungslos und ohne Probleme verlaufen.
Die Designs erscheinen bei beiden Produkten genau gleich und komplexere Funktionen werden automatisch übernommen. Zum Beispiel werden Prototyp-Verbindungen in Figma Design automatisch in die entsprechenden Interaktionen in Figma Sites umgewandelt.
Erfahre mehr über den Wechsel zwischen den beiden Produkten.
Zwischen Figma Design und Figma Sites unterstützte Tools
Beim Entwerfen in Figma Sites hast du Zugriff auf die meisten Funktionen von Figma Design. Unter den folgenden Links findest du eine Dokumentation zur Verwendung der einzelnen Funktionen.
Designtools
|
|
Verfügbar in Figma Design |
Verfügbar in Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
Benutzerdefinierte Schriftarten, die auf deinem Computer installiert sind, stehen derzeit nicht für die Nutzung in Figma Sites zur Verfügung, werden aber in Zukunft verfügbar sein. |
|
|
✓ |
✓ |
|
|
Vektorpfad-Bearbeitung, einschließlich boolescher Operationen |
✓ |
✓ |
|
✓ |
✓ |
|
|
✓ |
Figma Sites bietet zusätzliche Funktionen zum Bearbeiten über mehrere Breakpoints hinweg. |
|
|
✓ |
Derzeit nicht verfügbar, wird aber in Zukunft verfügbar sein. |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
✓ |
|
|
✓ |
Einige gemeinsame Funktionen mit Figma Design. Mehr erfahren. |
|
|
✓ |
✓ |
|
|
✓ |
Abschnitte können Designs enthalten, aber keine Webseiten. |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
X |
✓ |
Tools für die Zusammenarbeit
|
|
Verfügbar in Figma Design |
Verfügbar in Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
Spotlight folgt einer Person nicht, wenn sie sich in einer Vollbildansicht wie Make oder Einstellungen befindet. |
|
|
✓ |
X |
Designsysteme und Veröffentlichung
|
|
Verfügbar in Figma Design |
Verfügbar in Figma Sites |
|---|---|---|
|
✓ |
Du kannst Komponenten wie in Figma Design erstellen und verwalten. In einer Webseite können nur Instanzen verwendet werden. |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
In Figma Design und Figma Sites unterstützte Eigenschaften
|
|
Verfügbar in Figma Design |
Verfügbar in Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |