Agent skill · adobe
figma-to-content
Use this to turn a Figma design into an AEM Edge Delivery Services (EDS / AEM / Franklin / Helix) content page in Document Authoring (DA, da.live). Triggers: \"build this Figma frame in EDS\", \"turn this Figma design into a DA page\", \"publish this design to da.live\", or providing a figma.com URL for a page. Reads the frame (and any annotations) via a Figma MCP, resolves each section to an existing block, a new isolated block, or default content (inferred against the project's existing blocks and confirmed with you, or read from annotations when the frame happens to have them), generates DA-compliant body-fragment HTML, and deploys via the DA Source API + preview.
What it needs
About 12k tokens when loaded.
What this skill does
figma-to-content — Figma design → EDS content page in DA Read a Figma frame, assemble a page from EDS blocks and default content, and publish it to Document Authoring. Runs with a Figma MCP (to read the design) and a DA IMS token (to write content) — no proprietary tooling required. This skill orchestrates existing skills; it does not reimplement DA rules, block knowledge, or block-building. Invoke those skills — do not inline them. The condensed rules quoted in this file are pointers to jog the right skill, never a substitute for loading it: when a phase names a skill, invoke it and work from its actual guidance. Running this file as a self-contained procedure — hand-writing blocks, authoring DA HTML from memory, skipping the browser/visual check — is the single most common way a run goes wrong. Phase 2.3 turns the confirmed plan into an explicit manifest of the sub-skills you must invoke. Two paths Classify each section of the design, then follow the matching path: Content only — every section maps to a block that already exists in the target project, or to default content (plain headings/paragraphs/ images/buttons — no block). Author content and deploy. No code changes. Content + code — a section needs a block the project does not have, or an existing block matches structurally but its styling diverges (the look lives in block-specific CSS you'd have to edit). Create it as a new, isolated block (via the block-building skills), push the code, then author content and deploy. Never skin an existing block or add per-section rules to global CSS — new, additive blocks only. (Retargeting the project's global design tokens is a separate, allowed theming step; see Guardrails.) A single design usually mixes all three (known blocks + default content + one or two new blocks). When to use The user has a Figma frame representing a page and wants it as an EDS page in DA. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills adobe/figma-to-content