In Figma, imported images are treated as fills and not their own object type. That means whenever you import a image, a shape is being created with the exact same dimensions of the image and a image fill is being applied to it.
Your image is still the same but this will make editing the image; cropping, resizing or replacing it all together easier to manage.
Uploaded Image files are recognizable in the left hand layers panel because they will have a image icon next to the name of the file.
Below you will find the 3 ways to import image or video(MP4) files into Figma.
Figma Supports the Following File Types:
- PNG
- JPEG
- HEIC
- GIF
- WEBP
- MP4 and GIF video formats.
Importing Image or Video files in Figma from the Main Menu
Import files from the main menu by following these simple steps:
- Click on the Figma icon in the top left hand corner.
- In the drop down select File > Place image.
- You can use the keyboard shortcut ( Ctrl + Shift + K ) to bring up the import menu.
- Select the file or files you would like to upload and hit Open.
- Now you place the image precisely wherever you need.
Note that using this method will allow you add images to preexisting shapes you have created already. Any custom shapes or the default circles, squares, etc.
If you have selected to upload multiple images then you can place them one by one. The number within the red circle will display how many images are currently selected.
Drag and Drop Images to Import
The second way of importing is through drag and drop. From your desktop or a directory on your computer, you can simply move one or multiple images into Figma with this technique.
Just click on the image file or files ( hold down Crtl or Shift ) and drag them into the your current Figma file.
Copy and Paste Online Images into Figma
An awesome feature Figma has, is the ability to copy and paste images that are online and not downloaded on to your computer. This is a fantastic way to try out different options with out clogging up your computers hard drive.
Obviously you can only import one image at a time with this method but you can still paste it anywhere and within a shape object.
Once you find an image that you like and want to use, right-click on it and select ‘Copy image’ from the pop up menu.
Go back to your Figma file and right-click, select ‘Paste here’ from the menu.
Final Words
Figma makes it incredibly easy to import images or videos into your projects. From simple drag and drop methods to pasting online image URLs, there is an option for everyone. So go ahead and get creative with your designs!
Please comment below to let me know if you have any questions or suggestions on other topics you would like covered.
Thank you for reading!
