Create Adobe Experience Manager AEM Page from Figma Design

Questions
1

Describe the problem/error/question

i have a Figma design and demo page woth all modules in my project (module-library). i need a workflow to create new page in my AEM local instance and compare the figma design with my module-library. if there is a matching module available then need to copy that module to my new page.

What is the error message (if any)?

i have fetched figma as json and read module library as json. i need to compare figma children name with module library container child item name. if it matches i need to copy that module to new page. but it gives error ad i cannot pass CSRF token and module togather.

Please share your workflow

{“nodes”: [{“parameters”: {},“type”: “n8n-nodes-base.manualTrigger”,“typeVersion”: 1,“position”: [672,-1024],“id”: “aa862fa4-d308-4dd7-9098-1d5a26fdfb14”,“name”: “When clicking ‘Execute workflow’”},{“parameters”: {“authentication”: “genericCredentialType”,“genericAuthType”: “headerAuth”,“url”: “https://api.figma.com/v1/files/QGiRevSAfR3X4dTHFJx0Qa”,“options”: {},“headerParametersUi”: {“parameter”: [{“name”: “X-Figma-Token”,“value”: “figd_62asZfalOYiwOyY7-b8JCNst0Ev5jq7ofaTfC853”}]}},“id”: “a3168ef5-30a4-4379-bad5-4dec73b2752a”,“name”: “Fetch Figma Data5”,“type”: “n8n-nodes-base.httpRequest”,“typeVersion”: 2,“position”: [848,-1024]},{“parameters”: {“assignments”: {“assignments”: [{“name”: “figmaComponents”,“value”: “={{ $json.document.children[0].children[6].children }}”,“type”: “array”},{“name”: “figmaTitle”,“value”: “={{ $json.document.name }}”,“type”: “string”}]},“options”: {}},“type”: “n8n-nodes-base.set”,“typeVersion”: 3.4,“position”: [976,-1008],“id”: “68cc2798-8087-48f7-94f4-382b0b0a2ab2”,“name”: “Edit Fields (Set)4”},{“parameters”: {“authentication”: “genericCredentialType”,“genericAuthType”: “httpBasicAuth”,“url”: “https://02cb0c125288.ngrok-free.app/libs/granite/csrf/token.json”,“options”: {}},“id”: “0208f779-328e-43e4-b7a0-a79b4d5f0dbe”,“name”: “Fetch CSRF Token6”,“type”: “n8n-nodes-base.httpRequest”,“typeVersion”: 2,“position”: [1520,-1104],“credentials”: {“httpBasicAuth”: {“id”: “KgowaIygZoxxBH0i”,“name”: “AEM Admin”}}},{“parameters”: {“authentication”: “genericCredentialType”,“genericAuthType”: “httpBasicAuth”,“url”: “https://02cb0c125288.ngrok-free.app/content/etisalat/language-master/en/c/demo/dev-team/module-library.html.7.json”,“options”: {}},“id”: “f6055514-fd5a-471f-8a2b-776af261cea6”,“name”: “Fetch Module Library5”,“type”: “n8n-nodes-base.httpRequest”,“typeVersion”: 2,“position”: [1136,-992],“credentials”: {“httpBasicAuth”: {“id”: “KgowaIygZoxxBH0i”,“name”: “AEM Admin”}}},{“parameters”: {“assignments”: {“assignments”: [{“name”: “moduleComponents”,“value”: “={{ $json[‘jcr:content’].root.container }}”,“type”: “object”}]},“options”: {}},“id”: “a59bf979-e560-4d09-a66a-3bcf9ee0e662”,“name”: “Extract Module Components4”,“type”: “n8n-nodes-base.set”,“typeVersion”: 3.4,“position”: [1360,-944]},{“parameters”: {“functionCode”: “let token = "";\nlet moduleComponents = {};\n\nfor (const item of items) {\n  if (item.json.moduleComponents) {\n    moduleComponents = item.json.moduleComponents;\n  }\n\n  if (item.json.token) {\n    token = item.json.token;\n  }\n\n  if (item.json.data?.token) {\n    token = item.json.data.token;\n  }\n}\n\nreturn [{\n  json: {\n    token,\n    moduleComponents\n  }\n}];”},“id”: “10b77ecc-5bbb-404c-aa5a-495150437bda”,“name”: “Combine Token and Modules1”,“type”: “n8n-nodes-base.function”,“typeVersion”: 1,“position”: [1744,-976]},{“parameters”: {“authentication”: “genericCredentialType”,“genericAuthType”: “httpBasicAuth”,“requestMethod”: “POST”,“url”: “https://02cb0c125288.ngrok-free.app/content/etisalat/language-master/en/c/demo/ai-pages/esim-ai”,“responseFormat”: “string”,“options”: {“bodyContentType”: “multipart-form-data”},“bodyParametersUi”: {“parameter”: [{“name”: “jcr:primaryType”,“value”: “cq:Page”},{“name”: “jcr:content/jcr:primaryType”,“value”: “cq:PageContent”},{“name”: “jcr:content/jcr:title”,“value”: “eand page”},{“name”: “jcr:content/cq:template”,“value”: “/conf/etisalat/settings/wcm/templates/nwt-consumer-page-template”},{“name”: “jcr:content/sling:resourceType”,“value”: “etisalat/components/nwt-con/consumer-page”},{“name”: “jcr:content/root/jcr:primaryType”,“value”: “nt:unstructured”},{“name”: “jcr:content/root/layout”,“value”: “responsiveGrid”},{“name”: “jcr:content/root/sling:resourceType”,“value”: “etisalat/components/nwt-con/common/container”},{“name”: “jcr:content/root/container”,“value”: “={{ JSON.stringify($json.moduleComponents) }}”}]},“headerParametersUi”: {“parameter”: [{“name”: “ngrok-skip-browser-warning”,“value”: “true”},{“name”: “Content-Type”,“value”: “multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW”},{“name”: “CSRF-Token”,“value”: “={{ $json.token }}”}]}},“id”: “3e4f140b-3516-454c-bcc9-6c9378363c51”,“name”: “Create New AEM Page10”,“type”: “n8n-nodes-base.httpRequest”,“typeVersion”: 2,“position”: [1952,-976],“credentials”: {“httpBasicAuth”: {“id”: “KgowaIygZoxxBH0i”,“name”: “AEM Admin”}}}],“connections”: {“When clicking ‘Execute workflow’”: {“main”: [[{“node”: “Fetch Figma Data5”,“type”: “main”,“index”: 0}]]},“Fetch Figma Data5”: {“main”: [[{“node”: “Edit Fields (Set)4”,“type”: “main”,“index”: 0}]]},“Edit Fields (Set)4”: {“main”: [[{“node”: “Fetch Module Library5”,“type”: “main”,“index”: 0}]]},“Fetch CSRF Token6”: {“main”: [[{“node”: “Combine Token and Modules1”,“type”: “main”,“index”: 0}]]},“Fetch Module Library5”: {“main”: [[{“node”: “Extract Module Components4”,“type”: “main”,“index”: 0}]]},“Extract Module Components4”: {“main”: [[{“node”: “Combine Token and Modules1”,“type”: “main”,“index”: 0},{“node”: “Fetch CSRF Token6”,“type”: “main”,“index”: 0}]]},“Combine Token and Modules1”: {“main”: [[{“node”: “Create New AEM Page10”,“type”: “main”,“index”: 0}]]}},“pinData”: {},“meta”: {“instanceId”: “b97237cc69f620ea38279603a37a4dd77020f20940bc140c02e848442ce68a0b”}}

Share the output returned by the last node

Forbidden - perhaps check your credentials?

Information on your n8n setup

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:
2

Based on the search results, there’s a native AEM Assets and Figma integration available that might help streamline your workflow. However, for your specific use case of comparing Figma designs with your module library and creating AEM pages, you’ll need a custom solution using the [Figma API](AEM Integration with Figma , like Creative Cloud - Adobe Experience League Community - 723316) and AEM’s REST APIs.

For the CSRF token issue you’re experiencing, you’ll need to:

• First make a GET request to your AEM instance to retrieve the CSRF token from the response headers

• Include this token in subsequent POST/PUT requests when creating pages or copying modules

• Use AEM’s Content Services API or Sling POST servlet to create pages and copy content

The community discussion on [automating content migration from Figma to AEM](Solved: Best Practices for Automating Content Migration fr... - Adobe Experience League Community - 769540) suggests this is a common challenge, and you might want to consider using AEM’s package manager API to handle module copying more efficiently than individual component operations.

1 Like
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.