So exportieren Sie Ihre Figma-Designs mit TeleportHQ nach HTML

Figma ist bei Designern eine sehr beliebte Plattform.

Und das aus gutem Grund.

Damit lassen sich Designs und Prototypen für Websites und Apps auf Desktop-Computern, Tablets und sogar Mobilgeräten erstellen.

Wenn Sie Designer sind oder mit einem Designer zusammenarbeiten und eine hochwertige Website erstellen möchten, haben wir die perfekte Lösung für Sie.

Sie können jetzt ganz einfach einen Website-Prototyp in eine voll funktionsfähige Live-Website verwandeln. Mit TeleportHQ können Sie Ihre Figma-Designs als HTML und CSS-Code oder direkt in React, Vue, Next, Nuxt oder Angular exportieren.

https://www.youtube.com/embed/kxW62eMsw0k?feature=oembed

Sehen wir uns an, wie Sie Figma in nur fünf einfachen Schritten in HTML umwandeln.

1. Erstellen Sie Ihre Figma-Designs#

Im ersten Schritt dieses Prozesses zur Umwandlung von Figma in HTML erstellen Sie die Designs, die Sie auf Ihrer zukünftigen Website verwenden möchten.

Falls Sie sich fragen, wie Figma Code generieren kann: Die Antwort ist ganz einfach. Wir zeigen Ihnen den Ablauf anhand von TeleportHQ.

2. Installieren Sie Teleport Design to Code für Figma#

Um unseren Figma-zu-HTML-Konverter zu nutzen, müssen Sie zunächst das Plugin installieren. Gehen Sie dazu in Figma wie folgt vor: Rechtsklick → Plugins → TeleportHQ Design to Code.

installieren und starten

3. Exportieren Sie Ihre Figma-Designs#

Sehen wir uns nun an, wie du Figma in Code umwandelst.

Nachdem du den ersten Schritt ausgeführt hast, kannst du einen oder mehrere Frames aus deinem Figma-Projekt auswählen, die du exportieren möchtest.

Klicke auf Zu TeleportHQ exportieren und wandle deine Figma-Designs in HTML um. Sie werden automatisch auf der TeleportHQ-Plattform erstellt.

Figma-Design exportieren

Alternativ kannst du Designs zu einem bestehenden Projekt hinzufügen, indem du auf Ebenen in die Zwischenablage kopierenklickst und anschließend den Figma-Code in dein TeleportHQ-Projekt einfügst.

Mit unserem Figma-zu-HTML- oder CSS-Konverter kannst du diesen Vorgang beliebig oft wiederholen, auch nachdem deine Website online ist.

Designs bearbeiten

5. Designs bearbeiten#

Mit den Funktionen von TeleportHQ hast du die volle Kontrolle über deine Designs. Nachdem du Figma in HTML umgewandelt hast, kannst du sie ganz einfach bearbeiten und eigene Komponenten erstellen oder vorgefertigte Elemente aus unserer Bibliothek hinzufügen, etwa Hero-Bereiche, Banner, Preisübersichten, Statistiken, Social-Media-Leisten oder Kundenstimmen.

Nachdem du Figma in HTML oder CSS umgewandelt hast und auf unserer Plattform arbeitest, kannst du dein Team oder andere Beteiligte zur Mitarbeit am Projekt einladen und ihnen unterschiedliche Berechtigungsstufen wie Betrachter oder Editor zuweisen.

Das Tolle daran ist, dass TeleportHQ eine kollaborative Plattform ist, auf der bis zu zehn Personen am selben Projekt arbeiten können. So profitierst du von einem reibungslosen Ablauf.

5. Vorschau anzeigen und veröffentlichen#

Vorschau anzeigen und veröffentlichen

Mit unserem Figma-zu-HTML-Konverter-Plugin kannst du deine Projekte im Handumdrehen fertigstellen. Nachdem du die Designs nach deinen Wünschen angepasst hast, kannst du eine Vorschau deiner zukünftigen Website anzeigen lassen und prüfen, ob alles genau deinen Vorstellungen entspricht.

Sobald du mit dem Ergebnis zufrieden bist, kannst du deine Website auf zwei Arten veröffentlichen.

Du kannst sie entweder auf einer TeleportHQ-Subdomain veröffentlichen oder auf deiner eigenen Domain bereitstellen.

Und schon hast du deine Website, nachdem du deinen Figma-Prototyp in HTML umgewandelt hast.

Zusammenfassung#

Jetzt, da du weißt, wie du Code aus Figma exportierst, kannst du mit einem einfachen Prozess detailgetreue Websites erstellen.

Wandle Figma mit unserer Plattform online in HTML um und beginne mit dem Entwerfen deiner zukünftigen Projekte.