From a Figma frame to an AEM EDS block in one command

Building sites on Adobe Experience Manager (AEM) Edge Delivery Services (EDS) involves a series of steps to transform a Figma frame into an AEM EDS block with a single command. This process eliminates the need for manual recreation of each frame as a block, and instead automates the entire workflow using an AI agent.

To begin, one must install the `aem-eds-kit` package, which requires Node.js 20 or higher and one of the supported AI agents such as Claude Code, Cursor, or Codex. Additionally, you need an EDS project and a Figma personal access token for REST access or a connection to Figma's MCP server for MCP access.

Once installed, setting up a connection to Figma is necessary. There are two ways to do this: using a REST token or MCP. The REST option is recommended and involves generating a personal access token in Figma's settings and setting it as an environment variable. The MCP option requires connecting the AI agent to Figma's MCP server, and can be set up using the `eds figma setup` command.

Preparing the Figma frame is crucial for generating an accurate block. The frame should have one top-level frame per block, named after the block in kebab-case, and should use Auto Layout and have layers named by role rather than appearance. Variables should be used for colors, spacing, radii, and font sizes, and variants for block variations and optional parts. The block should also be prepared with placeholder copy and image slots.

To generate the block, one must copy the frame link from Figma, then run the `eds block from-design` command with the frame link and a name for the block. The AI agent will then read the frame, build a prompt based on EDS rules and design tokens, and hand the prompt to the AI agent. Once the block is generated, it will include files such as hero.js, hero.css, _hero.json, and _hero.preview.html, all of which are scoped to the block and include the Universal Editor model.

Before finalizing the block, it can be previewed and checked for accessibility using the `eds block preview` and `eds block check` commands. Additionally, a visual regression test can be run using the `eds block test` command. Once satisfied with the block, it can be pushed to the EDS project using the `aem up` command.

Figma imposes limits on both REST and MCP calls, and eds takes measures to stay within these limits by caching calls and allowing a single call per block. The `eds block test` command also compares the rendered block against the frame's image from Figma to ensure accuracy.