How to Hand Off Design Assets to Developers (Checklist)

To hand off design assets to developers, export every asset as a named file at the sizes the platform needs, put the files in one shared location (the repo, the Figma file's Dev Mode, or a project folder), write colors and type as tokens in plain text, and send one message that links to all of it. Screenshots pasted into chat leave developers guessing which version is current, what scale it is, and what the colors really are.

What developers need from a handoff

Step 1: Export named files at the right scale

In Figma, select the layer, then use the Export section at the bottom of the right sidebar. Click + to add as many export settings as you need. Scale uses a suffix: x for a multiplier (1x, 2x), w for a fixed width, h for a fixed height. Formats are PNG, JPG, SVG and PDF; SVG and PDF export only at 1x. In the desktop app you choose where the files go; in the browser they land in your downloads folder.

Two Figma details make handoff cleaner:

• Layer names with slashes become folders on export. A layer named icons/nav/search exports as search inside icons\nav\.
• Anything typed in an export setting's Suffix field is added to the file name, so a 2x row with the suffix @2x produces search@2x.png.

In Photoshop, select the layers or artboards, choose File > Export > Export As, pick a size such as 2x, enter a suffix such as @2x, and use + to add more sizes before you export. How to export @1x and @2x images covers pairs and checking them in detail.

Name files so a developer can use them without asking:

• lowercase, hyphen-separated: icon-search-24.svg, hero-home.png
• the scale suffix next to the base name: hero-home@2x.png
• the state or theme in the name when it matters: logo-on-dark.svg
• never final, v2-new or image (3).png

Step 2: Put everything in one place

Pick one system of record and make everything else point to it:

1. The repo. Exports go into the asset folder in the same pull request as the component that uses them.
2. Figma Dev Mode. Developers inspect specs, see applied styles and variables, copy generated code snippets and download assets. Designers select a frame and click Mark as ready for dev so it shows up under Ready for development. Dev Mode is available on paid plans and needs a Full or Dev seat; Shift+D toggles it.
3. A shared project folder on the drive the team already uses, with names that match the ticket.

Chat apps are for the notification, not the storage. A screenshot of an export, pasted into Slack or Teams, is a lower-quality copy of a file that already exists. Why Slack and Teams images look blurry explains what happens to those copies.

Step 3: Write colors and type as text

Developers type values into code, so give them values they can paste. A token list in the ticket or a tokens file in the repo works better than any picture:

color/bg/page      #F7F5F2
color/text/primary #1A1A1A
color/cta/bg       #0B6E4F
color/cta/text     #FFFFFF
font/body          "Inter", system-ui, sans-serif

If your file uses Figma variables, developers see them in Dev Mode too, and the names should match the code. How to store a color palette has a fuller format, and fonts need their own small package with the license: see how to hand off font files, licenses and specimens.

Step 4: Send one message

One message with paths beats a long thread of attachments:

NAV-188 ready for dev
Frame: Figma > Checkout v12 > Nav (marked ready for dev)
Icons: /src/assets/icons/nav-*.svg (PR #412)
Raster: hero-home.png + hero-home@2x.png in /public/img/
Tokens: color/nav/active #0B6E4F (added to tokens.json)

The handoff checklist

1. Frame names match the ticket.
2. Each icon is a component, so exports come from one source. When Figma components replace copied assets explains why.
3. Exports exist at every required scale, with matching names.
4. SVG for simple flat icons; PNG or JPG for photos and complex art.
5. Colors and type are written as tokens in text.
6. Alt text and accessible names travel with the images.
7. Files are in the agreed location; the frame is marked ready for dev.
8. One message links to the frame, the files and the tokens.

Where the clipboard fits

The clipboard is useful for moving one value at a time: a hex code, a URL, a token name. It isn't a handoff channel. Windows clipboard history (Win+V) keeps up to 25 text, HTML or bitmap items, clears unpinned items when the PC restarts, and doesn't store files at all, so exported assets never appear there. Figma's Copy as PNG (Ctrl+Shift+C) copies a 2x image, which is fine for a quick look but has no file name or known scale.

If you export assets in batches, Edge Drop can hold the exported files as a stack of up to 10 on the edge of the screen, so you can drag them into the repo folder or a pull request in one move instead of reopening Explorer each time.

FAQ

Should I hand off icons as SVG or PNG?

SVG for simple, flat icons, because one file scales to any size. Figma exports SVG only at 1x, outlines text by default, and exports strokes as fills, so check the result in the browser. Use PNG when the target platform needs raster images or the icon relies on effects SVG export doesn't carry. Game engines are the usual example; the game UI icon workflow for Unity and Unreal covers exporting at engine size.

Can developers export assets without Dev Mode?

Yes. With view access, the Export section is under the Properties tab in the right sidebar, so developers can export layers themselves. Dev Mode adds inspect, code snippets and the ready-for-dev list.

Is posting files in Slack a valid handoff?

It works as a delivery note if the message links to the files in their permanent location. Slack accepts files up to 1 GB, but a thread isn't a place anyone can search reliably a month later.

Related reading

• How to Export @1x and @2x Images in Figma and Photoshop
• When to Turn Copied Elements Into Figma Components
• Alt Text in Design Handoff: Keep It With the Image
• How to Add Screenshots to a GitHub README

Sources

• Export static designs from Figma (Figma Help) — Export section location, multiple export settings, slash names as folders.
• Export formats and settings for static designs (Figma Help) — scale suffixes, SVG and PDF at 1x only, Suffix field, SVG options.
• Guide to Dev Mode (Figma Help) — inspect, code snippets, Mark as ready for dev, plans and seats, Shift+D.
• Copy and paste objects (Figma Help) — Copy as PNG at 2x, Ctrl+Shift+C.
• Export files in different sizes (Adobe Photoshop) — Export As with sizes and suffixes.
• Add files to Slack (Slack Help) — 1 GB file limit.
• Using the clipboard (Microsoft Support) — clipboard history limits and supported formats.

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge Drop vs Win+V · Support