---
url: "/de/weblify/overview/quickstart.md"
description: "Erstelle, prüfe, inspiziere und exportiere Websites mit Weblify oder kopiere bestehende Seiten mit der Chrome-Erweiterung von Weblify in Figma."
---

# Erste Schritte mit Weblify

> Erstelle, prüfe, inspiziere und exportiere Websites mit Weblify oder kopiere bestehende Seiten mit der Chrome-Erweiterung von Weblify in Figma.

[![Figma-Plugin Weblify](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Figma-Plugin Weblify installieren

1. Öffne eine beliebige Figma-Datei.
2. Klick in der unteren Figma-Werkzeugleiste auf das Symbol **Actions**.
3. Klick auf den Tab **Plugins & Widgets**, um nur Figma-Plugins anzuzeigen.
4. Such in der Suchleiste nach **Weblify**.
5. Klick auf das Suchergebnis **Weblify**.
6. Klick auf **Save**, um das Plugin Weblify zu installieren.

> **Note:** Wenn du zu einer **Figma Organization** gehörst, kannst du möglicherweise nur freigegebene Plugins installieren. Kannst du bestimmte Figma-Plugins nicht installieren, bitte die Figma-Administration deines Unternehmens, [das Plugin Weblify freizugeben](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization).

## Figma-Plugin Weblify ausführen

Sobald du das Figma-Plugin **Weblify** [installiert](#figma-plugin-weblify-installieren) hast, führst du es so in deiner Figma-Datei aus:

  1. Klick mit der **rechten Maustaste** auf eine beliebige Stelle im Canvas deiner Figma-Seite
  2. Fahr mit der Maus über den Menüpunkt **Plugins** ▶
  3. Fahr mit der Maus über den Menüpunkt **Saved plugins** ▶
  4. Klick auf den Menüpunkt **Weblify**

> **Tip:** Nachdem du das Plugin **Weblify** einmal in einer Figma-Datei ausgeführt hast, kannst du es schnell wieder starten: Klick in der rechten Figma-Spalte (unter der Zwischenüberschrift **Plugin**) auf das Symbol von **Weblify**.

> **Warning:** Nur Figma-Nutzer mit **Edit**-Zugriff auf eine Figma-Datei können darin Figma-Plugins ausführen. Hast du nur **View**-Rechte, kannst du in dieser Datei keine Figma-Plugins ausführen.

## Weblify installieren und aktivieren

- [Figma-Plugin installieren und ausführen](/de/weblify/overview/install.md): So führst du Weblify in Figma aus
- [Weblify Pro aktivieren](/de/weblify/overview/pro.md): So kaufst und nutzt du einen Pro-Lizenzschlüssel

## Weblify nutzen

  - [Website erstellen](/de/weblify/build/site-builder.md): Erstelle bearbeitbare Webseiten aus Vorlagen, Abschnitten und Elementen
  - [Website importieren](/de/weblify/advanced/import-website.md): Kopiere eine Seite oder ein ausgewähltes Element mit der kostenlosen Chrome-Erweiterung
  - [Prüfen und exportieren](/de/weblify/build/export.md): Validiere eine statische HTML- und CSS-Website und lade sie herunter
  - [Figma-Ebenen inspizieren](/de/weblify/inspect/layers.md): Erzeuge aus einer ausgewählten Ebene HTML-, Tailwind-, React- oder Vue-Code

## Häufige Fragen

- [Fehlerbehebung für Weblify](/de/weblify/faq/troubleshooting.md): Häufige Probleme, auf die du stoßen kannst
- [Weblify-Sicherheit](/de/weblify/faq/security.md): So funktioniert Weblify im Detail
- [Belege](/de/faq/receipts.md): Belege per E-Mail und PDF-Rechnungen finden
- [Abrechnung](/de/faq/billing.md): Dein Pro-Abo verwalten
- [Lizenzplätze verwalten](/de/faq/seats.md): Die Figma-Nutzer deines Lizenzschlüssels verwalten
- [Weblify Free und Pro](/de/weblify/faq/plans.md): Funktionen von Free und Pro vergleichen

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Funktionen von Weblify

- Erstelle bearbeitbare Webseiten aus Vorlagen, Abschnitten, Elementen und responsiven Layouts.
- Kopiere öffentliche Websites oder Websites, bei denen du angemeldet bist, mit der kostenlosen Chrome-Erweiterung in Figma.
- Sieh dir die erzeugte Website in der Vorschau bei verschiedenen Viewport-Breiten an.
- Prüfe Weblify-Seiten und exportiere sie als statische HTML- und CSS-Website.
- Inspiziere ausgewählte Figma-Ebenen als HTML/CSS-, Tailwind-, React- oder Vue-Code.
- Kopiere den erzeugten Code oder lade eine Komponente als ZIP mit ihren Bildern herunter.
- Arbeite mit Auto Layout, Umbrüchen und Min/Max-Layouteigenschaften von Figma.
- Nutze die Code-Inspektion von Weblify im Dev Mode von Figma.