How to import files into Figma?

Tutorial
3 min
Published on Mar 20, 2023
Updated on
yellow circle in white square with arrow towards Figma editor on purple background
Use AI to summarize this article
Key points

When you embark on a web project, you often need to export designs from one tool to another. The methods for importing designs into Figma are varied, depending on the type of file you use and your specific needs. Figma simplifies the export/import of your mockups and prototypes through several features:

  • Import Tool
  • Drag and Drop Feature
  • Copy/Paste

Using the File Importer

The Figma import tool supports the following file types:

✅ Sketch Files (.sketch)
✅ Figma Files (.fig)
✅ Images (PNG, JPG, HEIC, GIF)
  1. From your main Figma interface, click the “Import” icon at the top left
  2. Select the file you want to import from your computer and click “Open”
  3. A pop-up will appear to inform you whether the import was successful or failed. Click on “Done”
Figma dashboard with import feature highlighted in blue

Importing Designs via Drag and Drop

The Drag and Drop feature supports the following file types:

✅ Sketch Files (.sketch)
✅ Figma Files (.fig)
✅ Images (PNG, JPG, GIF)
✅ Vector Files (SVG) to a Figma file
  1. Simply drag and drop a file from your computer into your main Figma interface.
  2. A pop-up will appear to inform you whether the import was successful or failed. Click on “Done”
Drag and drop a file from a folder into the Figma interface

Copying/Pasting Components

Copying and pasting support the following file types:

✅ Images (PNG, JPG, GIF)
Vector Files (SVG) to a Figma file

The copy/paste functionality for your elements works when you are directly in the Figma editor mode. Therefore, you will not be able to copy and paste files directly into the dashboard. 

Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

Promotional graphic for Webflow Conf 2026 featuring Lucas Clairet as a finalist for the Developer of the Year award. His black-and-white portrait is set against a vibrant abstract background with blue, orange, green, and pink textures, creating a bold, modern visual identity. The vertical Webflow Conf ’26 branding appears on the left, while his name and the title “Finalist – Developer of the Year” are displayed in a black panel.
News
Webflow

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year
Overview of Webflow AEO combining AI recommendations, analytics, prompt tracking, and SEO optimizations within a single interface.
Documentation
Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow
Website redesign brief document titled "Brief" on a dark blue background
Documentation

Brief, specifications and RFP: scoping your website redesign and choosing the right agency

Brief, specifications and RFP: scoping your website redesign and choosing the right agency
Every great website  
starts with a conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.