Why I stopped making charts in Figma #ai #workflow

5 Jun 2026 · 1 min

Watch on YouTube

1:16

In this video, the speaker explains how they replaced manual chart creation in Figma with an AI‑driven workflow. By importing their own Claude API key into Raycast, they use Claude to generate chart code and SVG assets directly within a CodePen environment. The AI references the team's charting JavaScript API, produces several CodePen prototypes with dummy data, and exports the resulting SVGs for design use. This approach eliminates the tedious resizing and editing of static Figma charts, speeds up hand‑offs to frontend engineers, and earns positive feedback from the engineering team because the deliverables are already in a format they can immediately run and extend.

Chapters

we lean very heavily into Claude, so I got access to API keys. So now I can like bring my own key to other tools. Raycast brought that over, so I started exploring using Claude to like generate more complex assets for designs like charts. In my experience, no one wants to manually edit charts in Figma. It's super tedious, but then, oh, I gotta make it, you know, resize to my design, etc. And having Claude generate a chart for you, and then I could export that SVG and just bring that into my time. That was huge advantage and actually really impressed the frontend engineers. It was like a little proud pat on my shoulder moment and it saved them a lot of time as well because now they don't have to sort of translate a static chart mockup in Figma. I used CodePen, so I was using Claude with the CodePen page in Raycast. So I have my like AI chat open and I could essentially have it reference that JavaScript, making sure it's understanding and referencing the API for the chart system that we use. I just had these CodePens, made them out like 5 or 6, and then just handed them off. And of course they're like dummy data, but it's way more effective when you're speaking the language of the engineers and they could take that and run with it a lot more quickly versus just a whole Figma mockup.