I work as a communication designer on the in-house team at Cloud.ru. Before that, I spent several years in similar roles at other companies. And everywhere, regardless of the company’s size, sooner or later the same task would come up: creating fillable PDF forms.
A checklist for a manager, a detailed client brief, an onboarding questionnaire for a new employee — every one of these projects turned into an exhausting ordeal.
The pain I set out to fix
Picture the standard workflow: the layout in Figma is done, the design has been reviewed and signed off. Now you need to turn that static file into an interactive PDF where users can actually fill things in. And that’s where it gets painful.
Figma’s built-in export produces a “flat” file with no interactive elements whatsoever. You open Adobe Acrobat and manually place text fields over the design, aligning them by eye. If the client requests even a minor copy change, the whole cycle starts over: edit in Figma → export → rebuild the fields in Acrobat from scratch.
I looked into existing plugins. There weren’t many: some had been abandoned by their developers long ago, others offered functionality that was either overkill or simply didn’t fit the job. That’s when I decided to build my own tool.
The concept: the magic is in the layer names
The core idea behind my plugin is to stay as close to the native Figma experience as possible. Designers shouldn’t have to learn a new interface. All you need to do is name your layers using specific prefixes, and the plugin figures out where to place each interactive field in the final PDF.
I defined three field types:
• field_layer name — for text input
• checkbox_layer name — for checkboxes
• radio_layer name — for radio buttons
Select the layer you want to convert, click the corresponding prefix in the plugin panel — say, checkbox_* — and the plugin renames the layer with the prefix the algorithm understands.
Additional features
• Grouping: Radio buttons sharing the same name are automatically combined into a single selection group.
• Multi-page export: Multiple selected frames are exported as a single multi-page document.
• Visual validation: There’s an option for a transparent field background (handy when the field is already drawn in your layout) and a blue outline highlight mode to verify that all interactive zones are correctly detected before the final export.
The tech stack: Claude Code and a four-tool setup
Development ran on a tight integration of four tools:
• Claude Code — my primary AI assistant.
• VS Code — the main development environment.
• GitHub — for version control and change history.
• Figma — both as a sandbox for real-world testing and as the design tool for the plugin UI itself. For the latter, I used Figma MCP.
Claude Code is not a chatbot. It runs directly in the terminal: it reads files, edits code, runs builds, and makes commits. This isn’t “make it look nice” magic — it’s genuine pair programming with an AI developer who handles the execution while you focus on the product decisions.
The AI owned all the routine work: configuring the webpack build, TypeScript types, CSS animations, and building the localization system for Russian and English. I would define the task, check the result in Figma, and provide feedback for the next iteration.
Surprises from Figma Community review
When the plugin was ready, I submitted it for review with full confidence. A few days later, I got a rejection. As it turns out, Figma’s moderation process is thorough — not a rubber stamp.
Issue #1: Content Security Policy (CSP)
The code still had a reference to the Manrope font loaded via Google Fonts — a standard tag in HTML. But since the plugin UI runs inside an isolated iframe, strict Content Security Policy rules block any external stylesheet from loading.
Fix: Drop Google Fonts entirely and switch to a system font stack. The visual difference is minimal; the security issue is gone.
Issue #2: External links
I wanted to include a donation link in the UI. The standard window.open() call doesn’t work inside Figma plugins. The platform requires figma.openExternal(), a dedicated method called from the plugin’s main thread rather than from the UI. It’s in the documentation — but in practice, you tend to discover it only when you get rejected.
Overall, Figma reviewers actually launch the plugin, inspect the console for errors, and check everything against the guidelines. My advice: read the security requirements before you submit, not after your first rejection.
Results and takeaways
At the end of the day, Interactive PDF Export is a focused tool that does exactly what it promises: it turns Figma frames into PDFs with working text fields, checkboxes, and radio buttons.
If fillable PDFs are a regular part of your workflow, give it a try. Feedback is very welcome!
Top comments (0)