auf eine einseitige HTML-Website. } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { width: 336px; } }
Figma Nocode ist ein kostenloses Plugin für Figma zum Exportieren eines Designs im HTML-Format. Sie wählen einfach die Ebene aus, die Sie speichern möchten, und können sie dann als HTML-Datei exportieren. Es wandelt alle Komponenten in Ihrem Design intelligent in HTML-Blöcke um und gibt Ihnen das endgültige HTML, in das CSS automatisch eingebettet ist. Neben HTML generiert es also auch CSS-Code. Das Beste daran ist, dass es nur 2 Klicks braucht, um einen beliebigen Teil des Figma-Designs oder den gesamten Rahmen in HTML zu konvertieren.
Wenn Sie Figma regelmäßig verwenden, um UI-Prototypen zu erstellen, wird Ihnen dieses Plugin hier gefallen. Damit können Sie das Figma-Design mit nur wenigen Klicks in eine HTML-fähige Website exportieren. Bei einigen Elementen wie Schaltern und Tasten kann dies jedoch fehlschlagen. Aber für andere Komponenten wie Tabellen, Absätze, Textverläufe, Stil und andere funktioniert es perfekt. Der schließlich generierte HTML-Code ist ebenfalls responsiv, sodass Sie nur minimale Anpassungen vornehmen müssen, damit er funktioniert.
Wie exportiert man Figma kostenlos in eine einseitige HTML-Website?
Dieses Plugin Die Verwendung von Figma Nocode ist völlig kostenlos. Ein kleiner Nachteil ist, dass die Hauptsprache dieses Tools Chinesisch ist. Aber das ist kein Problem, da Sie nur auf einfache Schaltflächen klicken müssen, die ich Ihnen unten zeigen werde.
Öffnen Sie Figma und öffnen Sie das Design, das Sie in HTML exportieren möchten. Wenn Sie kein Konto haben, können Sie hier kostenlos eines registrieren. Nachdem sich Ihr Design geöffnet hat, wählen Sie einfach den übergeordneten Frame oder die Ebene aus, die Sie exportieren möchten.
Danach gehen Sie zum Plugin-Bereich und wählen die Option „Weitere Plugins finden“.
Suchen Sie nach Figma Nocode und klicken Sie dann einfach auf die Schaltfläche „Ausführen“. Das Plugin wird jetzt angezeigt. Und es erkennt Ihre Auswahl.
Klicken Sie auf die hervorgehobene Schaltfläche und es beginnt mit dem Rendern Ihres Designs. Sobald es fertig ist, wird es Ihnen mit einem grünen Banner angezeigt.
Laden Sie jetzt einfach den HTML-Code herunter. Klicken Sie auf die Option 3dots und dann auf die Schaltfläche HTML. Die HTML-Datei wird nun heruntergeladen. Speichern Sie diese Datei und öffnen Sie sie dann im Browser. Sie werden sehen, dass diese einzelne Datei sowohl HTML als auch CSS enthält.
Das ist so ziemlich alles. Auf diese Weise können Sie dieses Plugin weiterhin verwenden, um Ihr Figma-Design in reines HTML und CSS umzuwandeln. Mit nur 2 Klicks haben Sie die HTML-Datei, die Sie auf Ihrem PC speichern können. Sobald Sie den endgültigen Code haben, können Sie tun, was Sie wollen.
Abschließende Gedanken:
Figma Nocode ist ein erstaunliches Figma-Plugin, das Sie verwenden können. Ich mochte die Art und Weise, wie es funktioniert, und wenn Sie Figma zu oft verwenden, können Sie es einfach jederzeit verwenden. Sie können jedes von Ihnen erstellte Website-Design öffnen und als gebrauchsfertiges HTML exportieren. Es ist sehr einfach, ein Design in eine einseitige Website umzuwandeln, und die Genauigkeit ist ebenfalls großartig. Probieren Sie es also selbst aus und sehen Sie, ob es eine genaue Website für Sie generiert.
