How to export selected Figma layers to Webflow

why export selected layers instead of an entire figma page?

Most Webflow builds ship in stages. A developer needs three icons today, a hero image tomorrow, and a testimonial block next week. Exporting an entire page dumps dozens of files into the asset panel at once.

Partial exports keep the Webflow asset panel organized. You upload what the build needs now, not everything the designer explored during the iteration phase. That cuts cleanup time and reduces the chance of a developer grabbing the wrong revision.

Selective export also matters when a Figma file holds multiple client concepts in one canvas. Sending only approved frames prevents draft work from leaking into production builds.

what counts as a selectable layer in figma?

Any layer you can click in the Figma layers panel qualifies: frames, groups, components, instances, vectors, images, and text rendered as outlines. The selection determines what exportflow treats as one export unit.

Frames are the most common choice for Webflow handoff. A frame exports as a single image file at the dimensions you set. Nested layers inside a frame flatten into that one file unless you select the nested layers individually.

Components and instances export the same way as frames. If you need each icon from an icon sheet, select the individual icon layers rather than the parent frame containing all of them.

how do you select specific layers before export?

Click a layer in the canvas or the layers panel to select it. Hold Shift and click to add more layers to the selection. Hold Cmd on Mac or Ctrl on Windows and click to toggle individual layers on or off.

To select every layer inside a frame without selecting the frame itself, double-click into the frame and Shift-click the children. To select the frame as one unit, click the frame name in the layers panel.

Before opening exportflow, review the selection highlight in Figma. Every blue-outlined layer will become a separate file in Webflow. If the count looks wrong, deselect before exporting.

what are the steps to export selected layers to webflow?

1. Open exportflow in your Figma file.
2. Select the layers or frames you want to export.
3. Choose your Webflow site from the dropdown.
4. Pick an existing Assets folder or create a new one.
5. Set the export format for the batch (PNG, SVG, JPG, AVIF, or WebP).
6. Optionally rename each asset or use AI to generate titles and alt text.
7. Click export and wait for the confirmation.
8. Open the Webflow Designer and confirm the files appear in the correct folder.

That sequence sends files directly to the Webflow asset panel without saving anything locally. If you have not connected a site yet, follow the Figma plugin connection guide first.

can you export multiple layers in one batch?

Yes. Select as many layers as you need before clicking export. exportflow treats each selected layer as a separate file and sends them all to the same Webflow folder in one action.

A typical batch might include six icons, two hero images, and a background texture. All ten files arrive in the asset panel together, each with the name and format you set during export.

Large batches work the same way as small ones. The practical limit is readability: if you lose track of which layer became which file, export in smaller groups named after the page section they belong to.

how do you pick the right format for each layer type?

Match format to how the asset will appear on the Webflow site. Icons and logos usually need SVG for sharp scaling at any size. Photographs and complex illustrations work best as PNG, WebP, or AVIF depending on your compression preference.

exportflow applies one format per export batch. If your selection mixes icons and photos, run two exports: one batch as SVG for icons, another as WebP or PNG for images. That takes two clicks instead of re-exporting everything after discovering the wrong format landed in Webflow.

JPG suits photographic content where transparency is not needed. AVIF and WebP reduce file size on content-heavy pages. SVG keeps icon kits crisp without generating multiple resolution variants.

what happens to nested layers inside a selected frame?

Selecting a frame exports the frame as a flattened image. Everything visible inside the frame renders into one file at the frame dimensions. Hidden layers, locked layers, and content outside the frame boundary are excluded.

If you need individual assets from inside a frame, select those nested layers directly instead of the parent frame. A card component with an icon, heading, and button exports as three files when you select the three child layers.

Flattening is useful for delivering a complete section screenshot to Webflow for reference. It is the wrong choice when a developer needs each element as a separate, editable asset.

how does selective export differ from figma's default export?

Figma's built-in export saves selected layers to your local disk. You then open Webflow, navigate to Assets, and upload each file manually. That is three context switches per asset: Figma, Finder or Explorer, Webflow Designer.

A plugin like exportflow skips the local save step entirely. Selection happens in Figma, delivery happens in Webflow, and your Downloads folder stays empty. The export, download, and upload loop disappears when destination and selection are handled in one tool.

Compared to the manual Figma-to-Webflow workflow, selective plugin export removes the upload step for every layer you ship. The time savings compound across a full page build with dozens of assets.

how do you organize partial exports across a webflow build?

Name your Webflow asset folders before exporting, not after. A folder per page section (hero, features, testimonials) or per build phase (round-1, round-2) keeps partial batches findable as the project grows.

Export icons to an icons folder, photography to a media folder, and UI screenshots to a reference folder. Change the destination folder in exportflow between batches without changing your layer selection in Figma.

Agencies shipping multiple client sites from one Figma workspace should confirm the site dropdown before each batch. Layer selection is file-specific; site routing is project-specific. Mixing them up sends the right assets to the wrong client panel.

what if only one layer fails during a batch export?

Check the export confirmation message in the plugin. It lists successful uploads and flags any layer that did not transfer. Open the Webflow asset panel and compare the file count to your Figma selection count.

Common causes for a single failure: the layer is empty, the layer exceeds Webflow's file size limit, or the layer name contains characters Webflow rejects. Rename the asset in exportflow and retry just that layer.

If the entire batch fails, verify your Webflow connection is still active and the destination folder exists. Reauthorize in the plugin if the site list looks empty after a long idle period.

when should you export a full page instead of selected layers?

Full-page export makes sense for design QA: sending a complete mockup screenshot to a stakeholder or archiving a milestone. It also works when a developer wants every asset from a finalized frame in one action.

For active builds, selective export is almost always faster. Developers pull assets as components get built, not all at once. Designers push updates to individual elements without re-uploading unchanged neighbors.

Install exportflow from Figma Community and start with a three-layer test batch before scaling to a full section. Read the exportflow introduction for pricing, AI credits, and supported formats.