Figma Uploader

Figma UI Kit

Components

Figma Uploader

Preview

Figma Uploader

Figma Uploader Component

The Uploader component allows users to upload files from their devices to web or mobile applications.

By nesting the uploader, you can add file upload functionality to other components, such as Cards, Modals, and Widgets.

Uploader UI Best Practices

Clear feedback: We use color and labels to indicate the file uploading progress;
Responsive design: Adapts to different screens, including Desktop, Tablet, and Mobile.

Uploader Anatomy

Set	Variants	Properties
UploadFile	9	State Default, Uploading, ErrorSize Small, Medium, Large
Uploader	3	Size Small, Medium, Large

The uploader is three sets — Uploader at Small 274, Medium 350 and Large 420px widths, an UploadArea drop zone with Default and Focused states, and UploadFile rows in Default, Uploading and Error states — for file pickers inside forms and settings.

Uploader AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a file uploader component in Figma as three sets. UploadArea: a dashed-border drop zone with a cloud-upload icon, a line reading Drag and drop or browse with browse as a link, and a hint of accepted formats and maximum size, in Default and Focused states where Focused tints the border and background for drag-over. UploadFile: a file row with a type icon, file name, size, and a state — Default with a tick and a remove icon, Uploading with a progress bar and percentage, Error with a red message and a Retry link — in Small, Medium and Large. Uploader: the drop zone over a list of UploadFile rows at Small 274, Medium 350 and Large 420px widths, with a label above and a helper line below. Add an avatar-picker variant with a round preview and a Change button, and a compact button-only variant. Wire the prototype so dropping on the area adds an Uploading row that smart-animates to Default. Bind colours to variables for light and dark mode.

Source