Unverzichtbare Tools für den Einstieg
Alle wichtigen Tools, um mit dem Relume Site Builder effektiv mit dem Bauen zu beginnen.
In diesem Dokument erfahren Sie mehr über:
- Relume Figma Bausatz
- Relume Figma-Plugin
- Relume Webflow-Bibliothek
- Relume Chrome-Erweiterung
- Relume-Styleguide für Webflow
- Relume Site Builder Webflow-App importieren
Relume Figma Bausatz
Das Relume Figma Kit ist ein Figma-Projekt mit über 1.400 Komponenten, die alle auf die gleiche Weise wie unsere Webflow-Bibliothek aufgebaut sind. Jeden Monat aktualisieren wir diese Datei, um alle neuen Komponenten aufzunehmen, die wir hinzugefügt haben! Wir empfehlen, für jedes neue Projekt eine neue Kopie zu duplizieren.
Dupliziere das Relume Figma Kit
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936d0d8bb92dbde5addf5_1%20Essential%20Tools_optimized.webp)
{{note-figma-kit="/resources/assets/rtc"}}
{{note-customize-figma="/resources/assets/rtc"}}
Relume Figma-Plugin
Mit dem Relume Figma-Plugin können Sie Sitemaps und Wireframes aus Site Builder in Figma importieren. Du kannst ganze Projekte, Seiten oder sogar einzelne Abschnitte importieren.
Installieren Sie das Relume Figma-Plugin
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936d822d0f2b1e92d9a49_2%20Essential%20Tools_optimized.webp)
{{note-figma-plugin="/resources/assets/rtc"}}
Relume Webflow-Bibliothek
Die Relume Webflow Library ist unsere Grundlage — hier können Sie alle vorhandenen Komponenten durchsuchen. Diese Bibliothek wird jeden Monat aktualisiert und wir nennen diesen Tag „Component Day“.
Durchsuchen Sie die Komponentenbibliothek
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936df1f2e0dad1c4c2fba_3%20Essential%20Tools_optimized.webp)
Relume Chrome-Erweiterung
Die Relume Chrome-Erweiterung ist ein sehr wichtiges Tool mit einigen sehr wichtigen Funktionen.
- Klassensynchronisierung — ermöglicht es Ihnen, eine Komponente in ein vorhandenes Projekt einzufügen und gleichnamige Klassen mit Ihren Stilen zu synchronisieren.
- Komponenteneinstellungen — legen Sie Ihre Einstellungen für die Styleguide-Version oder die Abstandsstrategie fest.
- SVG Icon Converter - Kopieren Sie SVG-Code und verwandeln Sie ihn in Icon-Einbettungen in Webflow.
- Abstandsstrategie aktualisieren — Sie können ein vorhandenes Projekt so konvertieren, dass es Abstandshalter oder Wrapper verwendet.
Installieren Sie die Relume Chrome-Erweiterung
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936e77e01a622846705d9_4%20Essential%20Tools_optimized.webp)
Relume-Styleguide für Webflow
Unser empfohlener Ausgangspunkt für alle Webflow-Projekte. Dieser Styleguide enthält alle Client-First-Klassen, die für die Verwendung von Relume erforderlich sind. Wir empfehlen, bei jedem Projekt eine neue Version davon zu duplizieren, um sicherzustellen, dass Sie immer auf der neuesten Version aufbauen.
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936eed0076dd3e4e5261e_5%20Essential%20Tools_optimized.webp)
{{note-customize-styleguide="/resources/assets/rtc"}}
Relume Site Builder Webflow-App importieren
Die Relume Site Builder Import Webflow App ist Ihre Verbindung zwischen dem Relume Site Builder und Webflow. Das ist der schnellste Weg, deine Sitemap und Wireframes in Webflow zu integrieren. Die Klasse synchronisiert automatisch deine Klassen und konvertiert „globale Abschnitte“ in Webflow-Komponenten.
Installieren Sie die Relume Webflow App
![](https://cdn.prod.website-files.com/65f9013fad6b2b8cee553aac/663936f61c4135faf05fd262_6%20Essential%20Tools_optimized.webp)
{{note-webflow-app="/resources/assets/rtc"}}