Figma Import Plugin, Tamás Király

01 / The Goal

The Goal

Figma Import was part of The Brief's shift to sales-led growth: product built specifically to help the sales team win and keep enterprise accounts. Enterprise users designed in Figma but needed Ad Studio's animation, ad-scaling and export tools, and rebuilding every asset by hand was a major friction point. The goal was a seamless bridge over the Figma API that brings their designs straight into Ad Studio, saving hours of manual work.

02 / Competitive Research

Competitive Research

Before designing, I mapped how Figma import works across the broader tool landscape and, more pointedly, across our direct competitors. Most relied on one-off export plugins, and several competitors had no real path at all, just PSD workarounds. That gap is what made a first-class, in-platform import worth building.

03 / Constraints & Challenges

Constraints & Challenges

Designing the happy path was easy. The real work was handling the technical constraints of the API.

Translation Logic: Mapping Figma's complex node structures, auto-layout and nested frames, onto our platform's specific canvas architecture.
Edge Cases & Errors: Handling unsupported Google fonts, file sizes large enough to time out the API, and masking that doesn't render 1:1 because the feature isn't in our editor yet.
Dev Collaboration: I worked lock-step with backend engineers to learn what the API could actually return, then designed the UX around those limits.

04 / The Flow

The Flow

The end-to-end plugin flow, from connecting your team to opening the finished file back in Ad Studio.

Connect once

Designers authenticate with their Creatopy API credentials. The form points to exactly where to generate them and shows a clear success state on connect.

The plugin sign-in: connect to your team with API credentials, a Client ID and a Secret key — Sign in

The sign-in with credentials entered and the success state ready to connect — Sign in completed

Choose where it lands

Once connected, a three-field form covers Project, Folder location and File name. Interactive dropdowns navigate the whole workspace hierarchy without leaving Figma, and the file name defaults to the selected frame's name.

The Project dropdown open, listing the available Ad Studio projects to save into — Select project

The Folder location dropdown open, showing the workspace folder hierarchy — Select folder

The completed form with Project, Folder location and File name filled, the file name defaulting to the selected frame's name, ready to export — Set file name

Fail gracefully

If no top-level frame is selected, the plugin says exactly what to do, heading off the error before an export is ever triggered.

The no-frame-selected state: the plugin explains that a single top-level frame must be selected — No frame selected

Export, then open in Ad Studio

One click exports. An inline progress state runs while assets generate, then a success state links straight to the new file in Ad Studio.

The plugin exporting the assets and generating the Ad Studio file, with an inline progress indicator — Exporting in progress

Export completed: the file is created, with a direct link to open it in Ad Studio — Export complete

05 / Outcome & Takeaways

Outcome & Takeaways

Impact: The Figma import was a key factor in 6+ new enterprise teams choosing the platform, together worth over $40K MRR, since it let them bring their existing designs in instantly instead of rebuilding by hand.
Process: Shipped a lean MVP first, choosing a simple missing-font fallback over a full font-mapping UI and saving two sprints of engineering time.
Takeaway: Reinforced my ability to design for system architecture and error states, not just the polished UI.

The plugin on the Figma Community, listed as Figma to The Brief, with over a thousand installs and forty-plus likes — On the Figma Community as Figma to The Brief. A first build went up for internal testing in April 2025, with stable v1.0 in May; in its first year on the market it passed 1,000 installs and 40+ likes.

06 / Full Flow Overview

Design Handoff

The complete annotated flow delivered to engineering, showing every plugin state, interaction path and component across authentication, destination selection, validation and export. Annotations call out the edge cases and API behaviour for each screen.

The full annotated handoff board: every plugin screen grouped into Start screen, Options screen, and Export flow, connected by flow arrows — The full annotated handoff. Click to zoom in.

Figma Import Plugin