summary
Connecting a Figma plugin to a Webflow site means authorizing the plugin to write into a specific project's asset panel. You pick the site once, choose a destination folder, and export without saving files locally.
exportflow handles the OAuth link between Figma and Webflow. This walkthrough covers install, account connection, site selection, folder setup, and your first successful export.
what do you need before connecting figma to webflow?
You need a Figma account with permission to run Community plugins, a Webflow account with at least one site you can edit, and a browser session where you can complete OAuth authorization.
The Webflow site must be on a plan that allows asset uploads through the API. Most paid Workspace and Site plans qualify. You do not need the Webflow Designer open during setup, but you will open it to confirm the first export landed correctly.
Have one test frame ready in Figma: a small icon or single image works. You will use it to verify the connection before sending a full page of assets.
how do you install exportflow in figma?
Open Figma and go to the Community tab in the left sidebar. Search for exportflow or open the plugin page directly from Figma Community.
Click Run to open the plugin inside your current file. Figma may prompt you to save the plugin to your account first. Accept that prompt so exportflow appears under Plugins in future sessions.
Install exportflow from Figma Community before attempting the Webflow connection. The plugin must be running in a file before it can request OAuth access to your Webflow account.
how does oauth connect a figma plugin to webflow?
OAuth is the standard way a Figma plugin gets permission to act on your Webflow account without storing your password. When you click Connect in the plugin, a browser window opens to Webflow's authorization page.
You sign in if needed and approve the scopes exportflow requests: read access to your sites and write access to upload assets into the asset panel. After approval, Webflow returns a token the plugin stores for future exports.
The connection persists until you revoke it in Webflow account settings or disconnect inside the plugin. You authorize once per Webflow account, not once per Figma file.
how do you link exportflow to a webflow project?
After OAuth completes, exportflow lists every Webflow site your account can access. Select the site you are actively building. If you manage multiple clients, pick the correct project before each export batch to avoid routing assets to the wrong panel.
exportflow supports multiple connected sites. Switch destinations from the site dropdown inside the plugin without repeating OAuth. Each site keeps its own folder list once you have exported to it at least once.
Teams juggling several client builds benefit from naming Webflow sites clearly in the dashboard before connecting. The plugin displays site names exactly as Webflow lists them.
how do you pick or create an asset folder before export?
Inside exportflow, open the folder selector for your chosen site. Existing Assets folders appear in the list. Pick one that matches your page, component set, or client deliverable.
If the folder does not exist yet, create it from the plugin before exporting. Naming the folder in Figma beats sorting a pile of uploads in the Webflow Designer afterward. A common pattern is one folder per page section or per revision round.
Folder choice is set per export batch. You can send icons to an icons folder and hero images to a separate folder in the same session by changing the destination between exports.
what are the steps for your first figma-to-webflow export?
- Open exportflow in your Figma file.
- Connect your Webflow account if you have not already.
- Select the target Webflow site from the dropdown.
- Choose an existing Assets folder or create a new one.
- Select one frame or layer in Figma as a test export.
- Set the export format (PNG, SVG, JPG, AVIF, or WebP).
- Optionally rename the asset or use AI to generate a title and alt text.
- Click export and wait for the confirmation message.
- Open the Webflow Designer, go to Assets, and confirm the file appears in the correct folder.
That sequence replaces the export, download, and upload loop with a single action inside Figma. If the file appears in the panel, the connection is working.
how do you confirm the connection worked?
Open Webflow Designer for the site you selected. Navigate to Assets in the left panel and expand the folder you chose in the plugin. The test file should appear with the name and format you set during export.
If the file is missing, check three things: the site dropdown in the plugin matches the Designer you opened, the folder name matches what you selected, and OAuth was not revoked mid-export.
Drag the asset onto the canvas to confirm Webflow recognizes it. A broken upload sometimes appears in Assets but fails to render. One canvas placement closes the verification loop.
what if the plugin cannot find your webflow site?
First confirm you completed OAuth and did not close the browser window before approval finished. Partial authorization leaves the plugin disconnected with an empty site list.
Check that your Webflow role on the site includes asset upload permission. Guest or comment-only access will not appear as a writable destination.
Disconnect and reconnect from inside exportflow if the site list looks stale after you created a new Webflow project. The plugin refreshes available sites on reconnect.
can you connect multiple webflow sites to one figma file?
Yes. exportflow stores access to every site your Webflow account can write to. Switch sites from the dropdown before each export batch. You do not need separate plugin installs per client.
Agencies often route Monday's exports to a retail client site and Tuesday's to a SaaS rebuild in the same Figma workspace. The site selector is the only change between batches.
Each site maintains its own folder tree. Folders created on Site A do not appear when Site B is selected.
why connect in figma instead of uploading in webflow?
Manual upload starts after Figma already exported a file to your computer. That adds a download step, a folder search, and a context switch into the Webflow Designer for every asset.
A connected plugin sends files directly to the Webflow asset panel. Format, filename, site, and folder are decided in Figma where the design lives. The Designer receives finished assets, not raw exports waiting for cleanup.
Compared to the manual Figma-to-Webflow workflow, a connected plugin removes hundreds of clicks across a typical page build. The connection cost is paid once during setup.
what happens after the first successful export?
Run larger batches with confidence. Select multiple frames, keep the same site and folder, and export in one action. Adjust format per asset type: SVG for icons, PNG or WebP for photos, AVIF when file size matters.
Use AI-generated titles and alt text when you want Webflow-ready metadata without manual entry. Manual export stays free; AI credits apply only to generated titles and alt text.
Install exportflow from Figma Community, connect your site, and replace the manual loop on your next build. Read the exportflow introduction for a full overview of features and pricing.
FAQ
how do i connect a figma plugin to my webflow site?
Install exportflow from Figma Community, run it in your file, and click Connect to authorize Webflow through OAuth. Select your site, pick or create an Assets folder, select a frame, and export. The file appears in the Webflow asset panel without a local download.
does connecting a figma plugin require webflow designer access?
You need edit access to the Webflow site, but the Designer does not need to be open during connection. OAuth happens in the browser. Open the Designer afterward to confirm the first export landed in the correct folder.
can one figma plugin connect to multiple webflow sites?
Yes. exportflow lists every site your Webflow account can write to. Switch sites from the plugin dropdown before each export batch. Each site has its own folder structure inside the asset panel.
why will my figma plugin not show my webflow project?
Common causes are incomplete OAuth, insufficient site permissions, or a stale connection after creating a new project. Reauthorize in the plugin and confirm your Webflow role includes asset upload access on that site.
like reading? here's some more
free, forever, for everyone
give it a try today - you can remove exporthub at any moment