Figmaからビジュアルコンテンツフラグメントへのスキル figma-to-visual-content-fragments-skill
Adobe Experience Manager（AEM）のビジュアルコンテンツフラグメントを使用すると、ビジュアライゼーションテンプレート 🔗で定義されている レイアウトを使用して、コンテンツフラグメントをプレビューおよび配信できます。 これらのテンプレートは、Handlebarsを使用したHTML テンプレートに基づいています。
手書きのHTML テンプレートでスタイルとレイアウトの情報を定義することは完全に可能ですが、これは通常、web開発者が実行する高度に技術的なプロセスです。 モジュラーエクスペリエンスのビジュアルデザインはFigmaで作成されることが多いため、FigmaからAEMにデザインを直接読み込むことで、ビジュアルコンテンツフラグメントのこのプロセスを合理化できます。
詳しくは、以下を参照してください。
前提条件 prerequisites
開始する前に：
-
Figmaからのインポートには認証が必要です。
- Figma ユーザーは、Figmaでアクセストークンを作成し、AEM サービスに保存する必要があります。
これは、次によって達成されます。
- Figmaでの個人トークンの生成
- https://experience.adobe.comでAdobe Experience Manager as a Cloud Serviceにログインします
- トークンをhttps://experience.adobe.com/#/aem/figmatocontentfragmentに保持しています
Figmaからビジュアルコンテンツフラグメントを作成するには to-create-a-visual-content-fragment-from-figma
フローは次のとおりです。
-
Figmaでデザインを作成します。
-
Figmaでデザインオブジェクトへの共有リンクを作成します。
-
AEMでは、最初に、AEM ユーザーがCoworkerを使用してAEMで承認済みデザインを再作成するように指示するプロンプトを表示できます。 AEMでは、必要なコンテンツフラグメントモデル、コンテンツフラグメント、HTML テンプレートが自動的に作成されます。
-
必要に応じて、AEM環境などの詳細情報を求めます。
-
制作プロセスには、既存のコンテンツモデルやフラグメントが利用可能な場合に、その再利用を可能にする機能も含まれます。
-
-
このスキルは、コンテンツのコンテンツフラグメントとコンテンツフラグメントモデル、およびレイアウトとデザインのHTML テンプレートを生成します。
- このスキルは、フラグメントへの直接リンクを提供し、そこからモデルとテンプレートにアクセスできます。
サンプルプロンプト sample-prompts
プロンプトの例には、次のようなものがあります。
-
Figmaから読み込むには：
- Figma {Figma_share_URL}からAEMへの読み込み
-
Figmaから読み込み、AEM プログラムを指定するには：
- Figma {Figma_share_URL}から{AEMaaCS_program/environment_link}へのインポート