Figma file upload components

Uploading is one of the few interactions in a product that genuinely fails on a regular basis. The file is 40MB, the format is wrong, the office wifi drops halfway through, someone picks a folder instead of a file.

Most upload mockups show a dashed rectangle and one finished row, which is the single state that needs the least design work. The 3 file upload components and 23 variants above cover the rest of it, including the parts nobody enjoys drawing.

The drop zone is the smaller half

The drop zone itself is a 512px block on desktop with three states: default, hover for when a file is being dragged over it, and disabled for when uploading is not currently allowed. That hover state is doing more work than it looks. It is the only confirmation a user gets that the browser has accepted their drag and that letting go will do something, and without a distinct treatment people hover uncertainly and then drop the file on the page behind it.

Underneath sits the real component, the file row, and the assembled uploader ships with and without a queue so you can show the empty state and the working state side by side at 512px desktop and 343px mobile.

Two ways to show progress, and when each fits

Every file row comes in two treatments. The progress bar type gives each file a dedicated track under its name, which suits larger files where the number matters. The progress fill type does without a separate track, which is why those rows run 74px against the bar type's 98px, and it suits small files that finish in a second or two.

Nielsen Norman Group's guidance on progress indicators is worth applying literally here: past ten seconds people need a percentage rather than a looping animation, and their research found users tolerate a wait roughly three times longer when they can see it moving. Uploads cross ten seconds constantly, so a determinate bar is close to mandatory.

Each row also chooses between a file type icon, which shows the format at a glance and pairs with the file icon set, and a simple icon for interfaces that would rather stay quiet. Everything ships in light and dark.

Design the failure before the success

Every combination of type and icon includes an error state, and those rows are built taller than their in-progress counterparts for a reason: a failed upload has to say what went wrong on the row itself, next to the file it happened to, not in a banner at the top of the page that scrolls away.

"Upload failed" is not a message. "File exceeds 10MB limit" and "PDF, PNG or JPG only" are, and both of them let the user fix it without guessing. Failures should also be per file rather than per batch, since one rejected image out of six should not discard the other five. Design that row properly and most of your upload support tickets never get written.

Drag and drop is never the only route

A drop zone with no click-to-browse link inside it is not minimalism, it is a dead end for anyone using a keyboard, a screen reader, or a phone. WCAG 2.2 asks that anything operable by dragging also work with a single pointer, and the same principle is why the drop zones here carry a visible click target rather than relying on the gesture alone.

In Figma the gesture is worth faking rather than skipping: wire the default drop zone to the hover variant, then to a queued state, and your prototype tells the story in three clicks. For flows where the upload sits inside a dialog, the modal components include a file upload layout already assembled.

When it is time to build, the same uploaders exist in code. Untitled UI React file uploaders are open source, built with Tailwind CSS and React Aria, with drag-and-drop, keyboard file selection, and per-file progress handled for you.