AEM Assets and Figma integration

Transcript

In this video, we’ll show you how to integrate your Adobe Experience Manager assets with Figma. To follow along, you must have licenses for both Experience Manager assets in Figma. This integration lets you directly access your brand-approved assets stored in your AEM Assets repository from within your Figma file and then easily save your final design back to AEM assets. To begin, launch Figma and create or open a Figma file. For example, you can see we’ve been working on some mock-ups for a new weekend website landing page and now need a background image for this hero banner. The right asset has already been added and approved in our AEM Assets repository. Now, let’s get it to Figma. Click the actions button in the toolbar at the bottom of your canvas. In the Plugins and Widgets tab, search for Adobe Experience Manager Assets Connector. Select it, then click Run to access the Connectors panel. When doing this for the first time, it will ask you to authenticate to AEM assets. Follow the normal Adobe signing-in process and you will successfully log in. Figma respects the AEM permissions of the logged-in user, so access to assets is controlled by their permissions in AEM Assets. After that, you can easily find the Connector in your Plugins and Widgets tab. Simply click it to open the panel. Here you can browse, search, and filter all assets stored in AEM Assets. If your users have access to multiple AEM Assets repositories, the active repository can be selected in the Repository Selector. Just like in the AEM Assets interface, we can navigate through folders and browse their contents. For our example, let’s search for an image asset to use. At the time of this recording, you can import JPEG and PNG images to Figma, but make sure to check our documentation for an up-to-date list of supported formats. Once found, we can select the asset and click Select to bring it onto the Figma canvas, where we can further modify the image and use it in our design. Now, let’s say we’re happy with our design adjustments and we want to export this mock-up to AEM Assets. The Adobe Experience Manager Assets Connector lets you do so easily. It also lets you export only a specific element of your design instead of the entire page if needed. Simply select the element you want to export. Now, open Actions and click the Connector to open its panel. Navigate to the AEM Assets folder where you want to save your asset. Click Upload, and a new dialog will open letting you specify upload details. Add a descriptive name for your asset in the File Name field. Next, select the file format in which you want to save it. At the time of this editing, you can choose between PNG, JPG, PDF, and SVG. See the up-to-date list of supported formats in our documentation. In terms of scope, you can choose between the page and selected item options. As the name suggests, selecting page will export the content of the entire page, while the selected item option will only export the element you’ve selected. Click Upload, and your newly created asset is saved into AEM Assets. Now back in AEM Assets, you can easily find the Figma design saved to the folder you’ve specified in the selected format. So, now you know how to integrate AEM Assets with Figma to directly access the assets stored in AEM Assets from within the Figma interface. Thanks for watching.