Figma to Visual Content Fragments Skill figma-to-visual-content-fragments-skill
Visual Content Fragments in Adobe Experience Manager (AEM) allow you to preview and deliver Content Fragments using a layout that is defined in a visualization template. These templates are based on an HTML template using Handlebars.
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. As visual designs for modular experiences are often created in Figma, it is possible to streamline this process for Visual Content Fragments by directly importing designs from Figma into AEM.
For more details see:
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 Manager as a Cloud Service at https://experience.adobe.com
- Persisting the token at https://experience.adobe.com/#/aem/figmatocontentfragment
To create a Visual Content Fragment from Figma to-create-a-visual-content-fragment-from-figma
The flow is as follows:
-
Create a design in Figma.
-
Create a share link to the design object in Figma.
-
In AEM, the AEM user can start with an initial prompt to use Coworker to recreate the approved design in AEM. AEM will automatically create the required Content Fragment Models, Content Fragments and HTML templates.
-
When necessary, the skill will ask for more information, such as the AEM environment to use.
-
The creation process also includes capabilities that allow reusing existing content models or fragments when already available.
-
-
The skill generates a Content Fragment and a Content Fragment Model for the content, and an HTML template for the layout and design.
- The skill 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 import from Figma and specify the AEM program:
- Import from Figma {Figma_share_URL} to {AEMaaCS_program/environment_link}