Integrate AEM Assets with Figma integrate-aem-assets-with-figma

AEM Assets integrates natively with Figma, which allows designers to directly access the assets stored in AEM Assets from within the Figma user interface. You can place content managed in AEM Assets in the Figma canvas and then save new or edited content in the AEM Assets repository.

Before you begin prerequisites-for-aem-assets-and-figma-integration

  • Minimum required AEM release version is 19149.

  • You must have valid AEM Assets and Figma licenses to integrate AEM Assets with Figma.

Access Adobe Experience Manager (AEM) Assets Connector access-aem-assets-connector

Execute the following steps to access the Adobe Experience Manager (AEM) Assets Connector:

  1. On your Figma home page, click Actions from the toolbar at the bottom of the canvas and search for Adobe Experience Manager (AEM) Assets Connector in the search bar available in the dialog box.
  2. Select Adobe Experience Manager (AEM) Assets Connector to display the Adobe Experience Manager (AEM) Assets Connector panel. Import AEM assets into your Figma canvas using this panel.
    actions
    Alternatively, access the Adobe Experience Manager (AEM) Assets Connector available on Figma community, click Open in…, select a recent file or create a new file and click Run to access the Adobe Experience Manager (AEM) Assets Connector panel.
    plugin-page-on-figma-community
NOTE
Contact Adobe Support for help if you see a Network Error message after logging in to your AEM environment.

Import AEM assets into Figma canvas import-aem-assets-into-figma-workflow

Access Adobe Experience Manager (AEM) Assets Connector panel within your Figma design interface and do the following:

  1. Search for assets in the Adobe Experience Manager (AEM) Assets Connector panel. For more information, see using Asset Selector.

  2. Drag and drop the asset to the canvas or select the asset and click Select to bring the asset on the canvas.

  3. Click three dots in the folder path to display all parent and child folders in the current hierarchy. Select a folder to navigate to that location.
    three dots

Once your Figma design is ready, you can export the asset to the AEM Assets repository.

Export assets to AEM Assets repository export-figma-design-to-aem-assets-folder

Access Adobe Experience Manager (AEM) Assets Connector panel within your Figma design interface and execute the following steps to export your design to the AEM Assets repository:

  1. Navigate to the destination folder where you want to save your Figma design. If you are already inside a folder, click More options ( three dots ) in the folder path to select a different destination folder.
  2. Optional: Group assets on the canvas to select them as a single unit to upload in your folder.
  3. Click file upload Upload to display the Upload Asset dialog box.
  4. In the dialog box, specify a file name, choose a file format, select either Selected Item or Page, and click Upload to upload the selected asset or the entire design to the destination folder.
    upload figma design

Important points to note Limitations-of-using-aem-assets-into-figma

This integration currently has the following limitations:

  • For importing AEM assets into Figma, the supported formats are JPEG, PNG.
  • For exporting designs from Figma to AEM Assets, the supported formats are PNG, PDF, JPG, SVG.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab