Vom Website-Prototyp zur voll funktionsfähigen Website mit Figma und TeleportHQ

Möchten Sie Ihren Website-Prototyp in eine voll funktionsfähige, vollständig programmierte Website verwandeln? Sie können innerhalb eines Tages von einem einfachen Wireframe zu einer live geschalteten Website gelangen – ganz ohne zusätzliche Programmierung. Sehen wir uns an, wie das geht …

Definieren wir zunächst, was ein Website-Prototyp ist. Ein Prototyp für eine Website kann jedes Mock-up, jeder Wireframe oder jede Demoversion davon sein, wie die Website nach ihrer Veröffentlichung aussehen wird. Wichtig ist, dass er interaktiv ist und es Nutzern ermöglicht, von Seite zu Seite und durch die Benutzeroberfläche zu navigieren.

Nachdem wir das geklärt haben, sehen wir uns an, wie Sie Ihr Ziel erreichen: vom Figma-Design über den Prototyp bis hin zur fertigen, bereit zur Veröffentlichung stehenden Website.

So verwandeln Sie einen Figma-Prototyp in 3 einfachen Schritten in eine Website#

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

Als Erstes müssen Sie in Figma einen Wireframe für Ihre Website erstellen. Das ist die Aufgabe der UI- und UX-Designer, auf die wir heute nicht näher eingehen. Sobald der Wireframe fertig ist, können Sie jedoch die nächsten Schritte unternehmen, um Ihre Website zum Leben zu erwecken. So geht’s:

Schritt 1: Wireframe des Prototyps aus Figma nach TeleportHQ exportieren#

Ihr Design von Figma nach TeleportHQ zu übertragen, ist ganz einfach. Der gesamte Vorgang erfolgt über unser Plugin „Design to Code“ für Figma. So exportieren Sie einen Figma-Prototyp Schritt für Schritt nach TeleportHQ:

So funktioniert es

1. Installieren Sie das TeleportHQ-Plugin für Figma, falls Sie das noch nicht getan haben.
   Starten Sie das Figma-Export-Plugin wie folgt: Rechtsklick > Plugins > TeleportHQ Design to Code.
2. Wählen Sie einen oder mehrere Frames aus Ihrem Figma-Projekt aus, die Sie exportieren möchten.
3. Klicken Sie auf die Schaltfläche „Nach TeleportHQ exportieren“ , um Ihr Figma-Design in Code umzuwandeln und die Ausgabe automatisch in TeleportHQ zu erstellen. Wenn Sie bereits ein Projekt in TeleportHQ haben, können Sie auf die Schaltfläche „Ebenen in die Zwischenablage kopieren“ klicken und den Code dort einfügen. Sie können diesen Vorgang beliebig oft wiederholen, auch nachdem Ihre Website veröffentlicht wurde.

Schritt 2: Prototyp auf der TeleportHQ-Plattform bearbeiten#

Prototyp in TeleportHQ bearbeiten

Nachdem Ihr Prototyp auf die Plattform exportiert wurde, können Sie den letzten Feinschliff vornehmen und sich auf die Veröffentlichung vorbereiten. TeleportHQ ist ein leistungsstarker Drag-and-drop-Builder, mit dem Sie den aus Figma importierten Website-Prototyp weiter anpassen und verbessern können. Über die Plattformoberfläche haben Sie vollen Zugriff auf:

Designoptionen – Beginnen Sie mit der Bearbeitung ganz nach Ihren Vorstellungen und behalten Sie die volle Kontrolle über Programmiersprache, CSS, Inhalte und Interaktivität. Außerdem stehen zahlreiche vorgefertigte Komponenten zur Verfügung, zum Beispiel Kopf- und Fußzeilen, Seitenleisten und Inhaltsbereiche wie Hero-Bereiche, Banner, Feature-Bereiche, Preisübersichten, Statistiken, Social-Media-Leisten oder Kundenstimmen. Sie können diese Vorlagen schnell anpassen oder eigene Komponenten für Ihr Projekt erstellen. Vorgefertigte Komponenten erleichtern das Erstellen neuer Seiten in der Zukunft.

Zusammenarbeit in Echtzeit – Die Entwicklung einer Website ist Teamarbeit. Mitwirkende einzuladen, damit Ihr Projekt schneller fertig wird, ist daher äußerst praktisch. Wenn Sie Ihr Website-Projekt in TeleportHQ bearbeiten, können Sie Teammitglieder mit verschiedenen Rollen wie Designer, Marketingexperten, Entwickler und Stakeholder ganz einfach einladen und ihnen unterschiedliche Berechtigungsstufen wie Betrachter oder Bearbeiter zuweisen.

Exportieren und veröffentlichen – Im Editor können Sie sich jederzeit den generierten Code ansehen. Das Codeformat lässt sich an die bevorzugte JavaScript-Variante anpassen, zum Beispiel React, Vue, Angular, Stencil, UIDL und mehr. Auch für die Strukturierung Ihres CSS stehen Ihnen verschiedene Möglichkeiten zur Wahl.

Nachdem Ihr früheres Figma-Projekt fertiggestellt und programmiert ist, können Sie es exportieren. Auch hierfür stehen Ihnen verschiedene Möglichkeiten zur Verfügung: Sie können den Code in eine andere Entwicklungsumgebung wie React, Gatsby, Vue oder Angular exportieren, nach GitHub exportieren oder als ZIP-Datei lokal speichern.

Schritt 3: Responsive Website mit vollständig programmiertem Code ansehen und veröffentlichen#

Vorschau anzeigen und veröffentlichen

Damit Ihre neue Website auf jedem Gerät und bei allen Breakpoints gut aussieht, können Sie sie jederzeit in der Vorschau ansehen. Sobald Sie mit dem Ergebnis zufrieden sind, können Sie sie veröffentlichen.

Mit TeleportHQ können Sie Ihr Projekt ganz einfach auf einer TeleportHQ-Subdomain veröffentlichen oder Ihre Website auf Ihrer eigenen Domain bereitstellen. Wenn Sie ein Vercel -Konto besitzen, können Sie ein Token erstellen und Ihr Projekt direkt über TeleportHQ veröffentlichen.

Und schon sind Sie fertig. Sie haben Ihren Figma-Prototyp erfolgreich in eine voll funktionsfähige Website umgewandelt..