Anima Blog https://www.animaapp.com/blog/de/ Mon, 20 May 2024 11:41:36 +0000 de-DE hourly 1 https://wordpress.org/?v=6.6.1 Hier kommt Frontier, the Zukunft von Frontend von Anima https://www.animaapp.com/blog/de/produktaktualisierungen/wir-stellen-vor-frontier-die-zukunft-des-frontends-von-anima/ https://www.animaapp.com/blog/de/produktaktualisierungen/wir-stellen-vor-frontier-die-zukunft-des-frontends-von-anima/#respond Thu, 16 May 2024 12:14:00 +0000 https://www.animaapp.com/blog/?p=9894 Reading Time: 4 minutes Frontier analysiert schnell Ihre gesamte Codebasis und kartiert lokal Ihr Designsystém, Frameworks, Konventionen und Komponenten für maximale Sicherheit. Mit Animas fortschrittlicher Design-zu-Code-Engine wandeln Sie Ihr Design in React um, wobei Ihre vorhandenen Komponenten verwendet werden.

The post Hier kommt Frontier, the Zukunft von Frontend von Anima appeared first on Anima Blog.

]]>
Reading Time: 4 minutes

Im Zeitalter der generativen KI erwarten wir, dass KI uns ganz einfach versteht. Und in vielen Fällen ist sie das bereits geschehen. Und es ist reine Magie, wenn ein Werkzeug genau das liefert, was man braucht, basierend auf einem winzigen Hinweis.

Unser Ziel bei Anima ist es, das Frontend-Engineering zu automatisieren, damit keine Zeit verschwendet wird. Im Jahr 2023 produzierte Animas KI über 750.000 Code-Snippets, was 1.000 Jahren menschlicher Codierung entspricht. Mit über einer Million Installationen auf der Figma-Plattform führt Anima das Design für den Code-Raum an.

Im nächsten Schritt gehen wir noch tiefer in die Automatisierung der täglichen Frontend-Codierung.

Heutige LLMs verstehen Frontend und UI nicht

Es gibt viele Modelle die sich mit Code-Generierung befassen, von der Code-Vervollständigung bis hin zu Anweisungen. Und es gibt einige beliebte Copiloten – Programmier-Assistenten, die Ihnen dabei helfen, schneller zu programmieren und auf diesen Code-Modellen basieren.

Wenn es jedoch um Frontend-Automatisierung geht, glauben wir, dass eine große Lücke zwischen dem, was es gibt und dem, was möglich ist besteht. Mit Animas Fähigkeiten und unserem Verständnis dieses Bereichs wollen wir diese Lücke schließen.

Und deshalb bieten wir heute Frontier an, einen KI-Codier-Assistenten für Entwickler, die Frontend entwickeln.

Frontier – AI Code-Gen, Ihrem Code entsprechend, maßgeschneidert für Frontend

Anima Frontier trifft Entwickler dort, wo sie gerade sind, in der IDE. Angefangen mit VSCode, der beliebtesten IDE.

Zuerst analysiert Frontier die gesamte Codebasis und bildet Ihr Codedesign-System, Frameworks, Konventionen und Komponenten ab. Das dauert Sekunden und wird lokal abgewickelt, um Ihren Code so sicher wie möglich zu machen.

Zweitens analysiert Frontier mithilfe der hochmodernen Design-to-Code-Engine von Anima Ihr Design und erkennt, was in der Designversion und dem Code des Designsystems steckt.

Und zu guter Letzt, könnten Sie jeglichen Teil des Figma-Designs direkt in VSCode auswählen und Code basierend auf Ihrem Code erhalten. Magisch!

Zugriff anfordern

Verstärkte Einführung von Design-Systemen durch Automatisierung

Ausgereifte Projekte haben oft Hunderte, wenn nicht Tausende von Komponenten.
Governance und Übernahme von Design-Systemen sind anspruchsvolle Aufgaben, die für die Aufrechterhaltung dieser Projekte entscheidend sind. Automatisierung hilft dabei.

the safe path towards design-system adoption is automationKI-Sicherheit und Leitplanken

Frontier wurde von Grund auf entwickelt, um eine gesicherte Lösung auf Enterprise-Niveau anzubieten.

KI-Einführung in Enterprise-Unternehmen ist mit mehr Reibung konfrontiert aufgrund der weit verbreiteten Datenschutzbedenken:

  • Egress Datenschutz: Wie stellen wir sicher, dass unser Code nicht durch Training in das LLM-Modell „durchsickert“, was bedeutet, dass andere Unternehmen Ausschnitte unseres Codes erhalten könnten?
  • Ingress Datenschutz: Wie stellen wir sicher, dass Code anderer Unternehmen, der möglicherweise verfeinert oder in die LLM eingearbeitet wurde, nicht in unsere Codebasis gelangt – was Sicherheits- und möglicherweise Urheberrechtsbedenken hervorruft?

Um Code zu generieren, der Animas Interpretation des Figma-Designs integriert, aber die Komponenten in der Code-Basis des Nutzers nutzt, hätten wir den einfachen Weg gehen und einfach die LLM um die Code-Basis herum trainieren können. Dies hat schwerwiegende Auswirkungen auf die Privatsphäre und die Sicherheit, da wir eine beträchtliche Menge an User-/Enterprise-Code hochladen und eine benutzerdefinierte LLM um sie herum trainieren müssten. Uns ist bewusst, wie wichtig Sicherheit und Privatsphäre sind, besonders für Entwickler in Enterprise-Umgebungen. Daher haben wir einen völlig anderen Weg eingeschlagen.

Anstatt Code in die Cloud hochzuladen, implementierten wir örtliche Datenerfassungs-, Indizierungs- und ML-Modelle, lokal, innerhalb von VS Code. Diese identifizieren und indizieren den entsprechenden Code auf dem Computer des Entwicklers. Die gesammelten Informationen werden lokal gespeichert, als Teil der Code-Basis, was bedeutet, dass sie sicher im Team über Git geteilt werden können – und nicht über die Cloud. Wenn ein bestimmter Bestandt instanziiert werden muss, können wir vor Ort eine beträchtliche Menge an Vorverarbeitung vornehmen und dem LLM nur eine kleine Menge an Code und Informationen, die es benötigt, an die Cloud senden – nicht genug, um das Unternehmen im Falle eines Eindringens oder Austritts zu gefährden. Dieser innovative Ansatz hat den zusätzlichen Vorteil der Leistung, da die meisten Operationen auf dem schnellen Computer des Entwicklers ausgeführt werden.

 

Unter der Haube von Frontier – LLMs, ML und KI-First-Architektur

Anima Frontier automatisiert das Frontend mit KI, basierend auf Animas großer Erfahrung bei der Führung dieses Raumes und der Nutzung der fortschrittlichsten Technologie für die Mission.

Wir haben oft eindrucksvolle Wochenendprojekte gesehen, die zu 99% von LLMs betrieben werden und in 30% der Fälle erstaunliche Ergebnisse erzielen. Das sind coole Projekte, aber sie eignen sich nicht für Profis.

So leistungsstak LLMs auch sind und neue Türen öfnen, sie sind keine Wunderwaffe; sie brauchen eine unterstützende Umgebung. Bei Anima testen und benchmarken wir, wählen das richtige Werkzeug für die richtige Aufgabe. Bei LLMs geben wir ihnen einen Kontext, validieren ihre Ergebnisse und machen sie erfolgreich.

Bei der Lösung dieses komplexen Problems haben wir es in viele kleinere Probleme und Anforderungen zerlegt. Einige Probleme erfordern Kreativität und lassen sich am besten mit LLMs lösen, und bestimmte Modelle sind schneller und leistungsfähiger als andere. Einige dieser Probleme erfordern klassische Machine-Learning/Computer Vision-Probleme, d.h. Klassifizierung statt Generierung. Einige lassen sich am besten mit Heuristiken lösen.

Durch die Kombination der Best-of-Class-Lösungen für jedes einzelne Problem können wir überwältigende Ergebnisse mit minimalem Risiko für LLM-Halluzinationen erzielen, die in LLM-basierten Codelösungen so weit verbreitet sind.

Was kommt als Nächstes für Frontier?

Während wir versuchen, alles Mögliche mit KI zu nutzen, um Entwicklern zu helfen, Frontend schneller zu programmieren, fühlt es sich an, als ob wir uns noch an der Oberfläche befinden. Anima Frontier sollte in der Lage sein, Code mit Design-Updates zu verschmelzen, kaputten Code zu heilen, Zustände und Theming zu verstehen, Elemente korrekt zu benennen, Spezifikationen zu lesen und mehr und mehr wie ein menschlicher Entwickler zu denken.

Wir haben eine umfangreiche Liste an Funktionen, und wir brauchen Sie, um uns zu mitzuteilen, was Sie am meisten stört und was Sie heute von KI für Frontend-Entwickler erwarten. Treten Sie Animas Discord-Kanal bei.

Zugriff anfordern

 

The post Hier kommt Frontier, the Zukunft von Frontend von Anima appeared first on Anima Blog.

]]>
https://www.animaapp.com/blog/de/produktaktualisierungen/wir-stellen-vor-frontier-die-zukunft-des-frontends-von-anima/feed/ 0
Figma zu HTML: So exportieren Sie ein Figma Design zu HTML https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-so-exportieren-sie-ein-figma-design-zu-html/ https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-so-exportieren-sie-ein-figma-design-zu-html/#respond Tue, 30 Apr 2024 14:51:00 +0000 https://www.animaapp.com/blog/?p=9832 Reading Time: 4 minutes Sie können ein komplettes HTML-Code-Paket exportieren oder individuellen Komponentencode aus Ihrem Figma-Design abrufen. Erfahren Sie hier, wie Sie Figma zu HTML konvertieren.

The post Figma zu HTML: So exportieren Sie ein Figma Design zu HTML appeared first on Anima Blog.

]]>
Reading Time: 4 minutes

Wenn Sie sich darüber Gedanken machen, wie Sie Figma zu HTML / CSS konvertieren können, ohne den Code selbst zu schreiben, dann sind Sie hier genau richtig. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Figma-Designs in ein paar einfachen Schritten mit Anima als produktionsfähiges HTML exportieren können.

Mit Anima können Sie Prototypen mit High-Fidelity-Code in Figma, Adobe XD und Sketch erstellen und diese Prototypen dann mit nur wenigen Klicks als entwicklerfreundlichen HTLM-Code exportieren.

Wenn Sie direkt von Figma zu HTML wechseln, können Sie live webbasierte Prototypen erstellen, Ihre eigenen unkomplizierten Websites oder Landing Pages einsetzen und Entwicklern saubere Codepakete für die gesamte Benutzeroberfläche bereitstellen, um die Entwicklung zu beschleunigen.

Anima plugin für Figma

Sind Sie ein visueller Lerner? Hier finden Sie ein Figma zu HTML YouTube Tutorial.

So konvertieren Sie Figma-Designs zu HTML

Sie können ein komplettes HTML-Code-Paket exportieren oder einen individuellen Komponenten-/Bildschirmcode aus Ihrem Figma-Design abrufen:

  1. Exportieren Sie vollständige HTML-Flows aus Figma mit mehreren Bildschirmen und Links
  2. HTML-Code-Snippets aus dem Dev- oder Edit-Modus von Figma kopieren oder exportieren

Vollständige HTML-Flows aus Figma exportieren

Schritt 1: Animas Plugin im Bearbeitungsmodus von Figma ausführen

Öffnen Sie zuerst Ihr Figma-Projekt im Bearbeitungsmodus (dem Hauptmodus) und führen Sie das Plugin von Anima aus.

Search for Anima in Edit ModeSchritt 2: Wählen Sie einen Bildschirm, und klicken Sie auf „Code erhalten“

Nach dem Klick auf „Code erhalten“ wählen Sie „HTML“ (React / Vue-Code-Pakete sind ebenfalls verfügbar).figma to html - anima plugin

Wenn Ihr Design erfolgreich mit der Web-App von Anima synchronisiert wurde, werden Sie im Anima-Plugin benachrichtigt.

Klicken Sie auf „Go to Anima“ („Zu Anima“), um einen Browser-Tab mit einer Vorschau Ihres Figma-Designs zu öffnen, dann klicken Sie auf „Export code“ („Code exportieren“) → „Download“.

Um das Code-Framework zu ändern, klicken Sie auf das Einstellungen-Symbol unter „Export code“.

Was enthält das Code-Paket?

Das heruntergeladene Code-Paket wird auf Ihrem Rechner als Zip-Datei an Ihrem ausgewählten Speicherort gespeichert. In dieser Zip-Datei finden Sie alle Dateien für Ihr Design (einschließlich HTML, CSS, Bilder und Schriftarten).An HTML Code Package Automatically Generated by Anima.

Ein automatisch generiertes HTML-Code-Paket von Anima

Sobald die Dateien entpackt sind, können Sie sie lokal im Browser anzeigen, indem Sie zweimal auf die HTML-Datei klocken. Sie sind in der Lage, alle Ihre reaktionsschnellen Elemente und Interaktionen zu sehen, genau wie beim Endprodukt!

Wenn Sie die Dateien in einem Texteditor öffnen, erhalten Sie einen gut strukturierten HTML- und CSS-Code.

  • Für jeden Frame/Screen erzeugt Anima sowohl HTML- als auch CSS-Dateien.
  • Die Bildschirme mit Breakpoints (Multiple Layouts pro Bildschirmgröße) teilen dieselbe HTML- und CSS-Datei und verwenden CSS-Medienabfragen.
  • Assets und Schriftarten sind enthalten, und Ihr Code kann ausgeführt oder bereitgestellt werden.

HTML-Code-Snippets direkt in Figma kopieren oder exportieren

Schritt 1: Anima in Figma ausführen (Bearbeitungs- oder Dev-Modus)

Öffnen Sie Animas Plugin im Edit- oder Dev-Modus.

Schritt 2: Wählen Sie eine Figma-Komponente, einen Layer oder einen Rahmen, um Code zu erhalten

Wählen Sie eine beliebige Figma-Komponente, Ebene oder Rahmen aus, um den entsprechenden HTML-Code im rechten Bereich zu erhalten. Sie können dann den Code aus dem Bereich kopieren, ihn in Animas Online-Spielplatz öffnen oder das Code-Paket herunterladen.Export Figma to HTML in Dev Mode

Das ist die schnellste und unkomplizierteste Option für einzelne Komponenten und Bildschirme.

Sie eignet sich hervorragend für Entwickler, da der Dev-Modus in Read Only verfügbar ist.

Wie es im Figma-Bearbeitungsmodus aussieht

Starten Sie das Anima Plugin im Bearbeitungsmodus von Figma mit dem Button „Switch“.get your code from edit mode inspect

Gen AI Code Personalisierung – Prompt in Figma

Im Kontrollfenster sowohl im Editier- als auch im Entwicklermodus sehen Sie einen Schalter zum Öffnen von KI-Code-Anpassung. Sie können Anima bitten, nach Ihren eigenen Codierkonventionen zu programmieren, Animationen hinzuzufügen oder sogar grundlegende Logik einfach durch Eingabe Ihrer Anfrage.

Erfahren Sie mehr über Figma, um mit KI-Code-Personalisierung zu programmieren:

  • Vollständiger Leitfaden: Figma zu Code mit KI-Personalisierung.
  • GenAI Figma to Code: 6 Beispiele für die Verwendung der neuen KI-Code-Anpassung von Anima

Bereit für den Export von produktionsreifem HTML-Code für Ihre Figma-Designs?

Herzlich Willkommen, jetzt geht’s los!

Anima plugin für Figma

The post Figma zu HTML: So exportieren Sie ein Figma Design zu HTML appeared first on Anima Blog.

]]>
https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-so-exportieren-sie-ein-figma-design-zu-html/feed/ 0
Figma to React: So bekommen Sie einen sauberen React-Code in Figma https://www.animaapp.com/blog/de/design-zu-code/figma-to-react-so-bekommen-sie-einen-sauberen-react-code-in-figma/ https://www.animaapp.com/blog/de/design-zu-code/figma-to-react-so-bekommen-sie-einen-sauberen-react-code-in-figma/#respond Tue, 30 Apr 2024 12:26:56 +0000 https://www.animaapp.com/blog/?p=9818 Reading Time: 2 minutes Anima konvertiert Figma-Komponenten sofort in React-Komponenten direkt in Figma. Hier ist eine Schritt-für-Schritt-Anleitung.

The post Figma to React: So bekommen Sie einen sauberen React-Code in Figma appeared first on Anima Blog.

]]>
Reading Time: 2 minutes

Mit über 1 Million Installationen auf Figma ist Anima der beste Weg, um Designs in Code zu verwandeln.

In diesem Artikel zeigen wir Ihnen, wie Sie Figma sofort in sauberen React-Code verwandeln können. Anima kann React-Komponenten oder sogar komplette Abläufe mit mehreren Bildschirmen, Links und reaktionsschnellen Layouts erstellen.

Was Sie von Animas Code erwarten können:

  • Pixel-perfekter, sauberer Code, der aus dem Kasten läuft.
  • Figma-Varianten unterstützen, sowie Requisiten und Unterkomponenten-Unterstützung.
  • Reaktionsschnelles CSS-Flex-Layout basierend auf Figma Auto Layout.
  • TypeScript / JavaScript, mit CSS / SCSS / Tailwind / Styled Components Styling.

So konvertieren Sie Figma-Designs in React-Code

Anima bietet zwei Möglichkeiten, Code für verschiedene Anwendungsfälle zu exportieren:

  1. React-Code für einen kompletten Ablauf, mit mehreren Bildschirmen & Links – Ideal für Marketing-Websites, PoCs, MVPs oder um ein neues Projekt anzustoßen.
  2. React-Code für eine bestimmte Komponenten – Ideal für den Austausch von Code mit Ingenieuren in einem bestehenden Projekt.

React-Code für vollständige Flows mit Links generieren

  1. Installieren & Öffnen Sie das Anima-Plugin in Figma
  2. Wählen Sie die Figma-Bildschirme, die Sie in React konvertieren möchten. Wenn Sie mehrere Layouts für denselben Bildschirm haben, verwenden Sie die Breakpoints-Funktion.
  3. Klicken Sie auf den Button „Get code“ (‚Code erhalten‘ )→ Wählen Sie ‚React‘.Figma to React: How to Get React Code from Figma

 

  1. Klicken Sie auf „Go to Anima“ (‚Auf Anima‘), wenn die Synchronisierung abgeschlossen ist.

Sie werden zu Ihrem Projekt in der Web-App von Anima weitergeleitet, wo Sie das komplette Code-Paket herunterladen können.Figma to React: Export full flow with links

Anima plugin für Figma

React-Code für eine bestimmte Komponente generieren

  1. Wechseln Sie in den Dev-Modus mit dem Schalter oben im Kontrollfenster von Figma und führen Sie das Plugin von Anima aus.
  2. Wählen Sie eine beliebige Figma-Komponente, Ebene oder Rahmen aus.Figma to React: Export a single component in Dev Mode
  3. Auf der rechten Seite erhalten Sie ausführbaren Code Ihrer Wahl: React, Vue oder HTML, mit CSS, SCSS oder Tailwind.
  4. Laden Sie den Code herunter oder führen Sie ihn auf Animas Online-Spielplatz mit den Buttons am unteren Rand aus.

Kein Dev Mode Zugang?

  • Bearbeitungsmodus – Verwenden Sie Anima im Bearbeitungsmodus und klicken Sie auf „Switch“, um eine einzelne Komponente zu inspizieren.
  • VSCode beta – Anima kommt zu Visual Studio-Code, erhalten Sie die Beta hier.

 

Frontend 2x schneller mit Anima erstellen

Anima plugin für Figma

Video tutorial: How to export React components in Figma Dev Mode

The post Figma to React: So bekommen Sie einen sauberen React-Code in Figma appeared first on Anima Blog.

]]>
https://www.animaapp.com/blog/de/design-zu-code/figma-to-react-so-bekommen-sie-einen-sauberen-react-code-in-figma/feed/ 0
Figma zu HTML Email: Umwandlung von Designs in HTML Email Vorlagen mit Inline CSS https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-email-umwandlung-von-designs-in-html-email-vorlagen-mit-inline-css/ https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-email-umwandlung-von-designs-in-html-email-vorlagen-mit-inline-css/#respond Thu, 25 Apr 2024 09:36:18 +0000 https://www.animaapp.com/blog/?p=9876 Reading Time: 3 minutes  Mit dem Figma-Plugin von Anima können Sie Ihre Flex-Layouts direkt in HTML-E-Mail-Vorlagen umwandeln. Wir erledigen die mühsame Arbeit, diese in Tabellenlayouts mit Inline-CSS umzuwandeln. Sie können frei in Figma gestalten und wir übernehmen die anspruchsvolle Aufgabe, Ihre Vision in adaptive, pixel-perfekte E-Mails zu verwandeln.

The post Figma zu HTML Email: Umwandlung von Designs in HTML Email Vorlagen mit Inline CSS appeared first on Anima Blog.

]]>
Reading Time: 3 minutes

Figma zu HTML E-Mail

In der Welt des digitalen Marketings sind Ihre E-Mails nicht nur Nachrichten; sondern der erste Eindruck, ein Händeschütteln, eine persönliche Einladung in Ihre Welt. Anima ist sich der Bedeutung von ausgefeilten und professionellen E-Mail-Designs bewusst und erfreut sich daran, eine bahnbrechende Entwicklung anzukündigen, die die Art und Weise, wie Designer und Vermarkter E-Mail-Vorlagen erstellen, revolutionieren wird.

Anima für Figma

 

Kompatibel mit einer Vielzahl von E-Mail-Clienten

Für Designer, die Figma leben und verinnerlichen, kann das Erstellen eines komplexen, ansprechenden Layouts Ihre Geduld auf die Probe stellen. Es mit einer Vielzahl von E-Mail-Clienten kompatibel zu machen, ist eine noch größere Herausforderung. Mit dem Figma-Plugin von Anima können Sie Ihre Flex-Layouts direkt in HTML-E-Mail-Vorlagen umwandeln. Wir werden jetzt die harte Arbeit erledigen, sie in Tabellenlayouts mit Inline-CSS umzuwandeln. Sie können in Figma frei gestalten, und wir werden die harte Arbeit erledigen, Ihre Vision in adaptive, pixel-perfekte E-Mails zu übersetzen.

Compatibility with a wide range of email clients

Reaktionsschnelles Layout für jedes Gerät

Nutzen Sie das Auto-Layout von Figma mit Animas Breakpoint, um sicherzustellen, dass sich Ihre E-Mails an jede Bildschirmgröße anpassen, damit Ihre Kommunikation wie beabsichtigt aussieht und funktioniert, unabhängig davon, ob Ihr Benutzer sie auf einem Desktop oder einem Mobiltelefon ansieht.

  • Auto-Layout-Übersetzung: Anima wandelt Figmas Auto-Layout-Einstellungen in reaktionsschnelle HTML-Tabellen um, wobei die Layout-Integrität über E-Mail-Clienten gewahrt bleibt.
  • Breakpoint-Integration: Während viele E-Mail-Clienten reaktionsschnelles Design nicht unterstützen, enthält Anima Inline-CSS-Medienabfragen für alle, die sicherstellen, dass Ihre E-Mails auf jedem Gerätbildschirm gut aussehen.
Responsive layout for every device

Priorität für Zugänglichkeit im Design

Unser Plugin nutzt Figmas Textstile, um eine übersichtliche und einheitliche Überschriftenstruktur zu implementieren, die sicherstellt, dass Ihre E-Mails nicht nur optisch ansprechend, sondern auch navigierbar und lesbar für alle Nutzer sind. Darüber hinaus priorisieren wir Alt-Text für Bilder, verbessern die Zugänglichkeit für Menschen mit Sehbehinderung und verbessern die SEO Ihrer E-Mails.

Prioritizing Accessibility in email Design

Ihr Code-Playground

Erfahren Sie, was Ihre Nutzer mit Animas Playground sehen. Bearbeiten Sie Ihr HTML und sehen Sie sich Ihre Designs in Echtzeit an. Wenn Sie fertig sind, kopieren Sie einfach den fertigen HTML-Code direkt aus dem Playground in Ihren E-Mail-Dienst Ihrer Wahl (z.B. Mailgun oder Mailchimp).

Your HTML email Code in Playground

Code Beispiel

Figma E-Mail Design Vorlage

 

 

Zukunftsorientiertes E-Mail-Design

Wir wissen, dass in der dynamischen Welt des digitalen Marketings Effizienz genauso wichtig ist wie ästhetische Aspekte. Jetzt müssen Sie nicht mehr das eine für das andere opfern. Unser Engagement für Innovation geht weiter, und diese neue Funktion ist nur ein weiterer Schritt auf unserem Weg, den Designprozess zu optimieren, ohne die Qualität zu beeinträchtigen.

 

Von Figma zum Posteingang

  1. Installieren Sie Animas Plugin und öffnen Sie es in Figma
  2. Wählen Sie das Rahmenwerk & Styling ‚HTML‘ + ‚Email kompatibel‘.Step 1 - email compatible
  3. Fügen Sie das automatische Layout während des Entwurfs hinzu.Step 2 - add autolayout
  4. Sie können auch Links, Breakpoints, GIFs, Überschriften und Alt-Text hinzufügen.Step 3 - add links, breakpoints
  5. Code erhalten! Klicken Sie auf ‚Im Playground öffnen‘, um Ihre HTML und CSS in Animas Playground-Umgebung anzuzeigen und zu bearbeiten.Step 4 - get code
  6. Kopieren Sie den HTML-Code vom Playground – Das HTML enthält Ihr CSS, und Anima wird Ihre Bilder hosten, also sind Sie jetzt bereit Ihre E-Mails zu senden!

 

Halten Sie sich auf dem Laufenden, wie wir Ihre Anima Erfahrung erneuern und aktualisieren. Noch kein Teil der Anima-Familie? Schließen Sie sich uns noch heute an und ändern Sie Ihre E-Mail-Vorlagen für immer.

Anima für Figma

*Einige Funktionen funktionieren möglicherweise nicht mit einigen E-Mail-Clienten.

The post Figma zu HTML Email: Umwandlung von Designs in HTML Email Vorlagen mit Inline CSS appeared first on Anima Blog.

]]>
https://www.animaapp.com/blog/de/design-zu-code/figma-zu-html-email-umwandlung-von-designs-in-html-email-vorlagen-mit-inline-css/feed/ 0
Animas VSCode-Extension: Figma zu reagieren ist jetzt in Ihrer bevorzugten IDE https://www.animaapp.com/blog/de/design-zu-code/animas-vscode-extension-figma-zu-reagieren-ist-jetzt-in-ihrer-bevorzugten-ide/ https://www.animaapp.com/blog/de/design-zu-code/animas-vscode-extension-figma-zu-reagieren-ist-jetzt-in-ihrer-bevorzugten-ide/#respond Tue, 19 Mar 2024 12:11:26 +0000 https://www.animaapp.com/blog/?p=9882 Reading Time: 2 minutes Ein großer Schritt in Richtung Entwickler-Sidekick ist die neue VSCode-Extension von Anima, die jetzt in der Beta verfügbar ist. Mit der ersten Beta können Sie Figma in Code direkt im Visual Studio Code verwandeln.

The post Animas VSCode-Extension: Figma zu reagieren ist jetzt in Ihrer bevorzugten IDE appeared first on Anima Blog.

]]>
Reading Time: 2 minutes

Mit fast 1M-Installationen auf der Figma-Plattform führt Anima das Design bis hin zum Code-Space an. In der nächsten Phase entwickelt sich Anima zu einem Front-End-Coding-Assistenten. In diesem Artikel werden wir auf die Herausforderungen eingehen, vor denen unsere Kunden stehen und wie wir ihnen begegnen, indem wir uns aktiver dafür einsetzen, dass F&E-Teams täglich schneller arbeiten.

Ein großer Schritt in Richtung Entwickler-Sidekick ist die neue VSCode-Erweiterung von Anima, die jetzt in der Beta verfügbar ist. Mit der ersten Beta können Sie Figma in Code direkt im Visual Studio Code verwandeln.

Animas Code ist sauber, ausführbar und verfügt über eine hohe Genauigkeit im Vergleich zum Figma-Design. Alles, was Sie dazu brauchen, ist ein Link zu einer Figma-Datei, und der Rest wird in der IDE angehängt. Wählen Sie eine beliebige Ebene, konvertieren Sie diese in Code, extrahieren Sie visuelle Elemente und liefern Sie großartige UX in der Hälfte der Zeit.

Anima VSCode Extension

Die aktuelle neue Beta-Version sorgt dafür, dass Anima ab sofort im Home-Center der Entwickler zur Verfügung steht. Wir haben eine großartige Roadmap, wie Sie mit existierendem Code interagieren und sich reibungslos in Ihren Workflow integrieren können.

So geht Figma zu React im Visual Studio Code

Hier das Wichtigste:

  1. Installieren Sie Anima für VS Code
  2. Figma-Link in Anima einfügen
  3. Wählen Sie einen beliebigen Teil des Designs aus, um den React-Code zu generieren
  4. Assets sind unter „Asset Manager“ abrufbar

 

Generative KI und Front-End-Code-Automatisierung

Während generative KI langsam heranreift, erproben Unternehmen KI-Tools und entdecken die Vor- und Nachteile der Bereitstellung solcher Lösungen für ihre Teams. KI in Bereichen wie der Erstellung von E-Mails und Dokumenten sowie der Datenanalyse wird zu einer Selbstverständlichkeit.

GenAI-Tools in der Software-Entwicklung sind nicht ganz so unkompliziert. Wir sind noch in den Kinderschuhen, und wir fangen an, eine Vielzahl von Lösungen für Entwickler zu sehen, von Chat-Schnittstellen über interaktive WYSIWYGs bis hin zur Vervollständigung der Programmierung, wie GitHubs Copilot, und bis hin zu einem „KI-Entwickler-Agenten“, der Fehler behebt.

Wenn es um Front-End-Automatisierung geht, glauben wir, dass es eine große Diskrepanz gibt zwischen dem, was möglich ist, und dem, was es wirklich schon gibt. Und mit Animas Fähigkeiten und unserem Verständnis von davon können wir viel mehr tun.

Der Entwickler-Sidekick – Weiterentwicklung zum Front-End-Coding-Assistenten

Schrittweise hilft Anima den Entwicklern dabei, beim Erstellen und Verwalten von Front-End-Code immer schneller zu arbeiten. Die Kombination von Animas Code-Gen-Engine mit GenAI öffnet neue Türen zu allem, was möglich ist, vom Aufbau neuer Workflows über den vorhandenen Code bis hin zur Pflege und Verwaltung von Designsystemen und sogar noch älteren Codes.

Wenn Sie Designpartner werden und uns dabei helfen wollen, die Zukunft von Front-End mitzugestalten, bewerben Sie sich bitte hier:

Design Partner werden

Für wen eignet sich das?

Alle Entwicklerteams die baut Front-End aufbauen, angefangen mit denen, die mit React arbeiten.

Der Front-End-Coding-Assistent von Anima konkurriert nicht mit Github Copilot, Tabnine oder Amazons CodeWhisperer – er ergänzt und erweitert die Anzahl der Codierungen, die Sie automatisieren können.

Mit dieser ersten Veröffentlichung beginnen wir damit, das gleiche Angebot wie die heutige Anima in VSCode zu bringen – Figma zu React – ausführbaren, pixelperfekten UI-Code. Als nächstes folgt die Design-Systemintegration und die Front-End-Code-Wartung und -Überwachung.

Wir würden uns freuen, Ihr Feedback zu hören, nehmen Sie an der Beta teil und probieren Sie es selbst aus.

Anima VSCode Extension

The post Animas VSCode-Extension: Figma zu reagieren ist jetzt in Ihrer bevorzugten IDE appeared first on Anima Blog.

]]>
https://www.animaapp.com/blog/de/design-zu-code/animas-vscode-extension-figma-zu-reagieren-ist-jetzt-in-ihrer-bevorzugten-ide/feed/ 0