Designs mit Figma Sites online veröffentlichen
Heute launchen wir Figma Sites – ein All-in-One-Tool, mit dem du individuelle, responsive Websites gestalten und direkt veröffentlichen kannst. Hier zeigen wir dir, wie du so effizient wie ausdrucksstark vom Design bis zum Livegang kommst.
Designs mit Figma Sites online veröffentlichen teilen
Unsere Community wünscht sich schon lange eine einfache Möglichkeit, aus Designs echte Websites zu machen. Also haben wir ein Tool entwickelt, das die „Ein-Klick“-Vision mit leistungsstarker Funktionalität verbindet. Mit dem heutigen Launch kannst du mit Figma Sites direkt in Figma designen, bauen und veröffentlichen, ganz ohne Kontextwechsel. Mit responsiven Layouts, intuitiven Prototyp-Tools und integrierten Funktionen wie benutzerdefinierten Cursoren, Marquee- und Parallax-Effekten kannst du deine dynamischsten Ideen zum Leben erwecken.
Designen und veröffentlichen direkt in Figma
Der typische Prozess, um Designs in die Umsetzung zu bringen, erfordert viele Kontextwechsel und manuelle Arbeit: in Figma designen, Abläufe und Interaktionen prototypen, Breakpoints manuell anlegen, Designs exportieren, mit Entwickler*innen abstimmen, in Code übersetzen, testen und veröffentlichen. Figma Sites ermöglicht es dir, zu designen und zu veröffentlichen, wodurch der lineare Arbeitsablauf in einen iterativeren und flüssigeren umgewandelt wird. Egal, ob du ein persönliches Portfolio erstellen, eine Event-Website gestalten oder eine Produkt-Landingpage veröffentlichen möchtest, mit Figma Sites kannst du interaktive, Live-Websites erstellen – ohne zusätzliche Tools – alles an einem Ort.
Starte mit Vorlagen und fertigen Elementen
Wir wollten Figma Sites für jedes Team zugänglich machen, auch für solche mit begrenzten Design- und Entwicklungsressourcen. Deshalb haben wir Vorlagen, vorgefertigte responsive Webelemente und fertige Interaktionen integriert, um den Einstieg zu erleichtern. Und bald kommt unser neues Chat-to-Code-Feature powered by Figma Make: Beschreib einfach die Interaktion oder Animation, was du dir wünschst – und wir bauen sie für dich.
Verbinde dein Designsystem
Greif auf deine Designbibliothek und Ressourcen zu, um schneller zu arbeiten: Über das Insert-Panel kannst du veröffentlichte Bibliotheken direkt mit deiner Website verknüpfen und so Komponenten und Styles aus deinem Designsystem einfügen. Falls du kein Designsystem hast, haben wir einige häufig verwendete Blöcke wie Navigation, Hero-Bereiche und sogar ganze Seiten bereitgestellt, damit du nicht bei Null anfangen musst.
Responsive Gestaltung
Wir haben Interaktionen und Responsiveness direkt in Figma Sites integriert, damit du dich weniger mit der Anpassung von Seitenverhältnissen beschäftigen musst und dich ganz auf das Nutzererlebnis konzentrieren kannst.
Design für jedes Gerät
Figma Sites passt Layout, Text und Design automatisch an verschiedene Breakpoints an. Dank Multi-Edit kannst du Änderungen gleichzeitig über mehrere Breakpoints hinweg vornehmen. Textstile lassen sich flexibel für verschiedene Größen und Abstände definieren, ganz ohne Variablen. Deine Designs wirken auf jedem Gerät – und du kannst bei Bedarf jederzeit manuell feinjustieren.
Schnell iterieren und Prototypen testen
Teile interaktive Live-Websites mit deinem Team, um Feedback einzuholen. Die Vorschau einer Website öffnet eine webbasierte Ansicht, die mit HTML und CSS gerendert wird. So kannst du eine vollständig responsive Website ansehen, bevor du sie veröffentlichst – ganz wie in einem Figma-Prototyp, aber mit Web-spezifischen Interaktionen. Du kannst sogar die Fenstergröße ändern, um den Layout-Reflow zu beobachten und die Umbrüche zu wechseln.
Erwecke deine Vision zum Leben
Das Web bietet grenzenlose Gestaltungsmöglichkeiten – und mit Figma Sites haben wir ein Tool geschaffen, das Designer*innen dabei unterstützt, dieses Potenzial voll auszuschöpfen und lebendige, interaktive Erlebnisse zu gestalten.
Vorgefertigte Interaktionen helfen dir, deine Websites dynamischer zu gestalten:
- Maus-Parallaxe: Objekte anhand der Cursorbewegung verschieben
- Lightbox: Spotlight auf ein Bild setzen und den Hintergrund abdunkeln
- Drehen: Ein Objekt unendlich rotieren
- Verschiebbar: Elemente frei auf der Seite bewegen
- Typewriter: Zeichen erscheinen einzeln wie auf einer Schreibmaschine
- Scramble Text: Buchstaben erscheinen in zufälliger Reihenfolge
Maßgeschneiderte Erlebnisse schaffen
Heute launchen wir neue Interaktionen, die es nur in Figma Sites und noch nicht in Figma Design gibt – etwa Scroll-Parallaxe, Scroll-Transform und die Möglichkeit, Hover- und Pressed-Zustände ohne interaktive Komponenten zu erstellen.
Demnächst werden außerdem Code Layer verfügbar sein. Damit kannst du Designs direkt interaktiv machen – ganz ohne Plugins oder externe Tools. Mit KI-Chat kannst du außerdem interaktive Elemente wie draggable Listen oder geografisch korrekte Uhren per Textbeschreibung erstellen – du designst einen Frame und beschreibst, wie er funktionieren soll. Code Layers lassen sich zudem in wiederverwendbare Komponenten und Instanzen verwandeln – genau wie du es von Designsystem-Bibliotheken in Figma Design kennst.
Erlebe Figma Sites in Aktion
Um zu zeigen, was mit dem neuen Tool alles möglich ist, haben wir zwei neue Websites gebaut, die nur einen kleinen Ausschnitt der interaktiven Elemente und überraschenden Details zeigen, auf die wir uns besonders freuen.
Config.new: Funktionalität trifft Interaktivität
Jedes Jahr veröffentlichen wir einen Rückblick auf unsere Launches bei der Config. Dieses Mal – inspiriert vom Launch von Figma Sites – wollten wir ein interaktiveres, erzählerischeres Erlebnis schaffen. Unser Brand-Studio-Team startete das Projekt, indem es parallel Ideen, Skizzen, Inhalte, Tonalität und Layout entwickelte. Nach dem Brainstorming begann es, Designkomponenten direkt in Figma Sites zu ziehen, um schnell zu iterieren.
Zwar nutzten unsere Kolleg*innen Typografie- und Button-Styles aus der Config-2025-Website, entschieden sich aber bewusst gegen das Figma-Websystem – sie wollten eine Seite, die expressiver wirkt, als es auf figma.com möglich wäre. Anstelle von Figma-Komponenten des Websystems designten sie für jedes Feature einen eigenen Abschnitt, erstellten individuelle Buttons und Interaktionen und nutzten vorgefertigte Interaktionen, um zu zeigen, wie viel auch ohne Code möglich ist.
Interaktive Elemente
Die Seite nutzt durchgehend vorgefertigte Interaktionen. Reveal, Scroll-Parallaxe und Scroll-Transformation sorgen dafür, dass die Seite beim Scrollen von oben nach unten eleganter wirkt, während Marquee Bewegung in einen horizontalen Abschnitt bringt, der eine Vielzahl von Figma Make-Eingabeaufforderungen zeigt.
Bewegung
Mithilfe eines Einbettungsblocks hat das Team ein benutzerdefiniertes Rive-Asset aus der Config-Bewegungsbibliothek hinzugefügt, das beim Darüberfahren eine Animation abspielt. Der Call-to-Aktion-Text bewegt sich auch beim Überfahren mit der Maus. Das verleiht den CTAs mehr Energie und verweist visuell auf den Look der Config-Webseite.
Benutzerdefinierter Cursor
Der Cursor verwandelt sich in eine Reihe von Config-Glyphen, wenn ein Benutzer mit der Maus über ein Zitat fährt. Indem das Team den benutzerdefinierten Cursor auf einen bestimmten Teil der Website beschränkt, lenkt es die Aufmerksamkeit auf diesen Bereich.
All diese Details ergeben eine responsive Website, die Bewegung, Mikrointeraktionen und den gesamten Viewport ausnutzt – um Feature-Highlights zu unterstützen, nicht zu überlagern.
Type Specimen: Maximaler Ausdruck
In Zusammenarbeit mit der Kreativagentur Other Means haben wir Practice geschaffen – ein Buch über Handwerk und Design, das Config-Besucher*innen als Teil ihres Swag-Pakets erhielten. Für die Veröffentlichung arbeitete das Team von Other Means mit Kia Tasbihgou zusammen, um Drop Caps (Initialbuchstaben) für jeden Artikel zu gestalten. Um das komplette Zeichenset zu präsentieren, entwickelte Other Means eine verspielte, ausdrucksstarke Specimen-Site, auf der alle Buchstaben erkundet und die Schriftart (OTF) heruntergeladen werden kann. Das Team begann damit, die Buchstaben A–Z in einer Figma Design-Datei zu sammeln, und überlegte dann, wie man mit jedem Drop Cap eine eigene Geschichte erzählen kann. Heraus kam ein Erlebnis, das jede handgezeichnete Glyphe auf überraschende Weise inszeniert – mithilfe der Interaktivität von Figma Sites.
Scroll-Effekte
Das Team wollte, dass möglichst viele Bereiche der Website beim Scrollen interaktiv sind. Dafür wurde jedem Abschnitt ein eigener Hintergrund zugewiesen, der erscheint, sobald bestimmte Ebenen sichtbar sind. Die Navigation blendet sich ein, je weiter man nach unten scrollt.
Vorgefertigte Interaktionen
Eingebaute Hover-Zustände, Maus-Parallaxe und Varianten ermöglichten es dem Team, eine individuell angepasste Tastatur zu erstellen, die beim Überfahren mit der Maus Glyphen anzeigt. Dank verschiebbaren Elementen können Besucher kleine Steine über einen Textblock ziehen.
Interaktive Komponenten
Mithilfe interaktiver Komponenten entstand ein Karussell mit Promi-Namen, das die jeweiligen Drop Caps hervorhebt – und eine buchstäbliche Papierrolle, die sich beim Scrollen entfaltet.
Zusammen haben diese Features und Effekte die Buchstabenformen verändert und aus einem statischen Schriftmuster ein dynamisches, interaktives Erlebnis gemacht, das es nur auf Figma Sites gibt.
Wir haben Figma im Browser entwickelt, weil wir an die Zusammenarbeit, Transparenz und Zugänglichkeit glauben, die nur webbasierte Tools bieten können. Egal ob du ein persönliches Portfolio starten, schnell Prototypen für Feedback bauen oder neue kreative Ausdrucksformen testen willst: Figma Sites vereinfacht den gesamten Weg von Design über Entwicklung bis zur Veröffentlichung – alles in einem Tool. Wir sind gespannt, was du damit kreierst.
Wir haben einen Discord-Server eingerichtet, um direktes Community-Feedback während der Entwicklung von Figma Sites zu sammeln. Diskutiere hier mit.
