summary
When developers open a Google Drive folder looking for assets, a file named Frame 247@2x.png tells them nothing. A consistent naming convention turns a batch of exports into something a developer can scan, find, and use without asking questions. Here's how to structure Figma export names so handoff friction disappears.
why export naming breaks developer handoff
Most naming problems start in Figma's default layer panel. Layers created during design work get auto-named — Frame 1, Group 3, Component 47. When those layers are exported and land in Google Drive, those names carry over verbatim.
A developer searching Drive for the login button icon won't search for "Frame 247." They'll search for "icon-login" or "btn-login-default." If the file isn't named that way, it won't surface. They'll either ask the designer or download the wrong file.
The cost is small per incident. Across a project with 80 exported assets and a team of four developers, it adds up to hours of unnecessary back-and-forth every sprint.
what a usable batch naming convention looks like
A naming convention for exports needs to answer three questions at a glance: what is this, where does it belong, and which variant is it? A reliable structure covers all three.
The pattern most design teams converge on is:
[component]-[descriptor]-[state]-[scale].[format]
Applied to real assets:
icon-chevron-right-2x.svgbtn-primary-hover-2x.pngnav-logo-default-1x.pngillustration-onboarding-empty-state-1x.png
Every segment serves a purpose. The component prefix groups related assets when sorted alphabetically. The descriptor narrows it down. The state removes ambiguity when there are multiple variants. The scale tells developers whether they're looking at a retina asset without opening the file.
Keep names lowercase with hyphens, no spaces or underscores. Drive search handles hyphens cleanly. Spaces create encoding issues in URLs and code references.
how to rename layers in Figma before exporting
The most reliable approach: name layers correctly before you add export settings. The layer name becomes the filename. If you rename layers consistently as part of your component-building workflow, exports arrive in Drive already named correctly.
For existing frames or components with default names, Figma's built-in rename tool handles bulk edits. Select the layers you want to rename, right-click, and choose Rename. Figma supports find-and-replace and sequential numbering within that panel — useful for icon sets where you need icon-arrow-01, icon-arrow-02, and so on.
For large batches, Figma plugins that bulk-rename layers speed this up significantly. Name the layers once, and every subsequent export inherits the correct name automatically.
If you're exporting multiple scales for the same asset, Figma appends suffixes defined in the export settings. A @2x suffix on a 2x export config produces icon-chevron-right@2x.png automatically. Set those suffixes once per export configuration rather than managing them manually. The post on how to set export scale and suffixes in Figma for Google Drive covers that configuration in detail.
how to organise named batches inside Google Drive
Good filenames and good folder structure work together. Even perfectly named files become hard to navigate when dumped into a single flat folder.
A folder structure that mirrors component categories reduces search time further:
/assets/icons//assets/buttons//assets/illustrations//assets/backgrounds/
When a developer needs all button states, they open one folder and see exactly what's there — already sorted alphabetically by the naming convention you've applied. No filtering, no Drive search required.
For a more complete look at how to structure handoff folders in Drive, the post on Google Drive design handoff folder structure for agencies goes deeper on folder hierarchy patterns.
The convention for folder names should match the prefix pattern used in filenames. If your icons are named icon-*, the folder is icons. The parallel makes navigation intuitive for anyone joining a project mid-way.
what developers actually need from exported filenames
Talk to the developers on your team before finalising a convention. The naming system that works best is the one that maps to how they reference assets in code — not the one that feels logical to designers.
Front-end developers often reference assets by the variable or class name they'll use. If the button component in code is ButtonPrimary, a file named btn-primary-default-2x.png is immediately parseable. If the icon set in code is referenced as IconChevronRight, the file name icon-chevron-right-2x.svg maps directly.
This alignment cuts one more decision point from handoff. The developer sees the filename, knows exactly where it goes in the codebase, and moves on.
For SVG icon exports specifically — where naming consistency matters most given how often icons are referenced in code — the post on how to export Figma icons as SVG to a Google Drive kit folder covers the full workflow.
how exporthub removes the manual step between naming and delivery
The remaining friction after good naming is the export loop itself — export locally, navigate to the right Drive folder, upload, confirm. That sequence happens after every design update, for every batch.
ExportHub removes that loop entirely. Once layers are named correctly in Figma, ExportHub exports them directly to the specified Google Drive folder in one step — no local download, no manual upload, no folder navigation. The file arrives in Drive with the name it had in Figma.
For teams exporting to the same Drive folders repeatedly, that destination is already set. Select the assets, confirm the folder, export. The post on exporting Figma to Google Drive without downloading locally explains how the direct connection works.
Combined with a consistent naming convention, this means developers receive correctly named assets in the right Drive folder without any manual steps from the designer beyond the initial export click.
a simple checklist before every batch export
Before exporting a batch to Google Drive, run through these four checks:
- Every layer name follows the
[component]-[descriptor]-[state]pattern — no default Figma names remain - Scale suffixes are set correctly in Figma's export config for each resolution
- The destination folder in Drive matches the asset category
- The developer on the receiving end has been told which folder to check
That last point is worth stating plainly. A perfect naming convention and a well-structured Drive folder still require a handoff message. Developers aren't watching Drive for new files. A Slack message or Linear comment pointing to the exact folder path closes the loop.
FAQ
what is the best naming convention for figma exports going to google drive?
Use a hyphen-separated pattern: [component]-[descriptor]-[state]-[scale].[format] — for example, btn-primary-hover-2x.png. All lowercase, no spaces. This keeps exports alphabetically grouped by component, immediately scannable, and easy to reference in code.
how do i rename multiple layers in figma before exporting?
Select the layers you want to rename, right-click, and choose Rename. Figma's rename panel supports find-and-replace patterns and sequential numbering, so you can update a full icon set in one action rather than renaming each layer individually.
should i include the scale in the figma export filename?
Yes. Including the scale — either as a suffix like @2x set in Figma's export config, or as a segment in the layer name — tells developers which resolution they're working with without opening the file. This matters most when exporting multiple scales of the same asset.
how do i get figma exports to go directly to the right google drive folder?
ExportHub is a Figma plugin that exports assets directly to a specified Google Drive folder, skipping the local download and manual upload step. You select the destination folder once, then export directly from Figma. Get the free plugin at nullab.io.
like reading? here's some more
free, forever, for everyone
give it a try today - you can remove exporthub at any moment