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.
Supported file formats supported-file-formats-integration-figma
- For importing AEM assets into Figma, the supported formats are image assets (JPEG, PNG), video files (MP4, MOV, WebM), Animated files (GIF), and Vector files (SVG).
- For exporting designs from Figma to AEM Assets, the supported formats are PNG, PDF, JPG, SVG.
Access Adobe Experience Manager (AEM) Assets Connector access-aem-assets-connector
Execute the following steps to access the Adobe Experience Manager (AEM) Assets Connector:
- 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.
- 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.
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.
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:
-
Search for assets in the Adobe Experience Manager (AEM) Assets Connector panel. For more information, see using Asset Selector.
-
Drag and drop the asset to the canvas or select the asset and click Select to bring the asset on the canvas.
-
Click
-
[Optional] Click Check for updates. The assets used in the current Figma document are compared to the assets that exist in AEM. Any updates are listed in a separate window. Click Update to get the updated asset from AEM into your Figma document.
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:
-
Navigate to the destination folder where you want to save your Figma design. If you are already inside a folder, click More options (
-
Optional: Group assets on the canvas to select them as a single unit to upload in your folder.
-
Click
-
In the dialog box, select either Selected Item or Page, specify a file or page name, define an export configuration and click Upload to upload the selected asset or the entire design to the destination folder.
The export configuration comprises the file format, scale, and quality. For example, if you select JPG as the file format, you can also define the image scale and quality. Similarly, if you select PNG as the file format, you can also define the image scale.
