How Do You Add a Picture to Mockup on Figma?

Adding a picture to a mockup on Figma is not difficult at all. First, you need to select the frame that you want to put your picture in.

To do this, simply click on the frame and then click the “Fill” option, which can be found near the top-left of your screen.

Once you’ve clicked on “Fill”, you will be presented with two options – either selecting an image from your computer or from a library of stock images. If you choose to select an image from your computer, simply click on the “Add Image” button and select the image.

Once you’ve selected the image, it will appear in your frame. You can then resize it by dragging any corner of the frame until it fits perfectly into your mockup. You can also rotate it by clicking and dragging on its center dot.

Once you’re happy with how your image looks in the frame, you can add additional effects such as drop shadows and background blurs by clicking on “Effects” at the top right of your screen. You can also add masks or borders to make your picture look even more interesting.


Adding pictures to mockups on Figma is a straightforward process that requires just a few clicks. All you have to do is fill a frame with an image from either your computer or a library of stock images, resize it if needed, and then add effects such as drop shadows and background blurs for further customization.