Following up on our recent post Accelerate Pega DX Component Development with Claude — I wanted to share a deeper look at one of the most exciting features of the automation: direct Figma design reading.
One of the biggest pain points in custom DX component development is the translation gap between design and code. A designer creates a beautiful component in Figma, and a developer has to manually interpret every layout decision, color token, spacing value, and interaction — often losing fidelity along the way.
This automation eliminates that gap entirely.
How It Works
The workflow involves three parties — designer, developer, and Claude AI:
Step 1 — Designer shares a Figma frame
The designer generates a temporary Personal Access Token from their Figma account and shares it with the developer along with a specific Figma frame URL.
The URL must be a design file URL with a specific frame selected — not a prototype link.
https://www.figma.com/design/FILE_KEY/Name?node-id=111111
https://www.figma.com/proto/FILE_KEY/Name
Step 2 — Claude reads the design
Claude Code calls the Figma Images API using the token, renders the specific frame as a PNG, and reads it visually — the same way it reads a screenshot. No complex node parsing. No manual JSON interpretation.
Step 3 — Component is generated
From the visual reading, Claude Code extracts:
- Layout structure — modal, panel, sidebar, form
- Input fields, labels, and helper text
- Buttons and action items
- Color states and visual hierarchy
- Component type — Field, Widget, or Layout Template
It then generates a complete build plan and waits for developer approval before writing any code.
Step 4 — All files generated automatically
Once approved, Claude Code generates:
index.tsx— component logic reflecting the Figma designconfig.json— Pega schema with all propsmock.ts— realistic sample datademo.stories.tsx— Storybook stories for all visual statesdemo.test.tsx— Jest unit testsdocs.mdx— component documentation
Step 5 — Designer revokes the token
After the component is built, the designer revokes the token from their Figma settings. No permanent access. No shared credentials.
Example — CreateDocumentField
Here is a real example from our testing. The designer shared a Figma frame of a document editor selection screen — a modal with radio buttons for Word and HTML editor options, helper text, and action buttons.
Claude Code:
- Read the Figma frame and identified it as a Field component
- Presented a build plan — radio button selection, two options, helper text, Submit/Cancel buttons
- Generated all component files following Pega Constellation standards
- Fixed lint issues automatically and ran Jest tests
- Published to Pega as a Rule-UI-Component in under 20 minutes
Key Things to Know
| Details | |
|---|---|
| Figma license needed? | Only the designer needs one — not the developer |
| Token stored permanently? | No — saved to .env locally, never committed to git |
| Works with any Figma frame? | Yes — as long as it is a /design/ URL with a node-id |
| Manual design interpretation? | None — Claude reads the PNG visually |
Try It Yourself
The full automation including Figma integration is available here:
Watch the demo video:
If you have a Figma design you want to turn into a Pega DX component — give it a try and share what you build in the comments.