Figma to Visual Content Fragments Job figma-to-visual-content-fragments-job
The Figma to Visual Content Fragments job of the Experience Production Agent automates the process of recreating Figma designs in Adobe Experience Manager (AEM) as a Cloud Service.
Overview overview
AEM Visual Content Fragments allow previewing and delivering Content Fragments using a visual layout based on an HTML template.
While defining style and layout information in hand-coded HTML templates is entirely feasible, it is a highly technical process that is usually performed by web developers.
To streamline this process for Visual Content Fragments, and since visual designs for modular experiences are often created in Figma, it is also possible to directly import designs from Figma into AEM.
Prerequisites prerequisites
Before you start:
-
Importing from Figma requires authentication. The Figma user needs to create an access token in Figma and store it in the AEM service.
This is achieved by:
- generating a personal token in Figma
- logging into Adobe Experience Cloud at
https://experience.adobe.com - persisting the token at
https://experience.adobe.com/#/aem/figmatocontentfragment
To upload a design to-upload-a-design
The flow is as follows:
-
The designer (Figma user) creates the design in Figma.
-
The Figma user creates a share link to the design object in Figma.
-
The Figma user sends the share link to the AEM user.
-
Starting with an initial prompt the AEM user can then use the AI Assistant to interact with the Figma to Visual Content Fragments Job and automatically recreate the approved design in AEM. AEM will automatically create the required Content Fragment Models, Content Fragments and HTML templates.
- When necessary, the agent will ask for more information, such as the AEM environment to use.
- The agentic creation process also includes capabilities that allow reusing existing content models or fragments when already available.
-
The agent generates a Content Fragment and a Content Fragment Model for the content, and an HTML template for the layout and design.
- The agent provides a direct link to the fragment, from where you can access the model and the template.
Sample Prompts sample-prompts
Sample prompts include:
- To import from Figma:
- Import from Figma {Figma_share_URL} to AEM
- To select the AEM program from agent suggestions:
- Import from Figma {Figma_share_URL} to {AEMaaCS_program/environment_link}
Additional Resources additional-resources
The following resources may be useful as you continue to explore Visual Content Fragments: