Kenntnisse zu visuellen Inhaltsfragmenten figma-to-visual-content-fragments-skill

Mit visuellen Inhaltsfragmenten in Adobe Experience Manager (AEM) können Sie Inhaltsfragmente mithilfe eines (in ​ Visualisierungsvorlage definierten) Layouts in der Vorschau anzeigen und ​. Diese Vorlagen basieren auf einer HTML-Vorlage mit Handlebars.

Während das Definieren von Stil- und Layout-Informationen in handcodierten HTML-Vorlagen durchaus möglich ist, ist dies ein hochtechnischer Prozess, der normalerweise von Web-Entwicklerinnen und -Entwicklern ausgeführt wird. Da visuelle Designs für modulare Erlebnisse häufig in Figma erstellt werden, ist es möglich, diesen Prozess für visuelle Inhaltsfragmente zu optimieren, indem Designs direkt aus Figma in AEM importiert werden.

Weitere Informationen finden Sie unter:

NOTE
Die Fähigkeit „Figma zu visuellen Inhaltsfragmenten“ ist Teil der agenten Funktion von Experience Production.

Voraussetzungen prerequisites

Bevor Sie beginnen:

  • Der Import aus Figma erfordert eine Authentifizierung.

    • Der Figma-Benutzer muss ein Zugriffstoken in Figma erstellen und im AEM-Service speichern.

Dies wird erreicht durch:

So erstellen Sie ein visuelles Inhaltsfragment aus Figma to-create-a-visual-content-fragment-from-figma

Der Ablauf sieht wie folgt aus:

  1. Erstellen Sie ein Design in Figma.

  2. Erstellen Sie eine Freigabe-Relation zum Design-Objekt in Figma.

  3. In AEM kann der AEM-Benutzer mit einer ersten Aufforderung beginnen, den genehmigten Design-Code mithilfe von Coworker in AEM neu zu erstellen. AEM erstellt automatisch die erforderlichen Inhaltsfragmentmodelle, Inhaltsfragmente und HTML-Vorlagen.

    • Bei Bedarf werden weitere Informationen angefordert, z. B. die zu verwendende AEM-Umgebung.

    • Der Erstellungsprozess umfasst auch Funktionen, mit denen vorhandene Inhaltsmodelle oder Fragmente wiederverwendet werden können, sofern sie bereits verfügbar sind.

  4. Die Qualifikation generiert ein Inhaltsfragment und ein Inhaltsfragmentmodell für den Inhalt sowie eine HTML-Vorlage für das Layout und Design.

    • Die Qualifikation bietet einen direkten Link zum Fragment, von wo aus Sie auf das Modell und die Vorlage zugreifen können.

Eingabeaufforderungen sample-prompts

Zu den Beispielaufforderungen gehören:

  • Import aus Figma:

    • Import aus Figma {Figma_share_URL} nach AEM
  • So importieren Sie aus Figma und geben Sie das AEM-Programm an:

    • Import aus Figma {Figma_share_URL} in {AEMaaCS_program/environment_link}
recommendation-more-help
experience-manager-cloud-service-help-main-toc