Adding images, video, and text in Framer
In this Framer tutorial, you will learn Adding images, video, and text in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
What are the different ways to add images to my Framer project?
There are several ways to get an image on the canvas in Framer. You can drag and drop an image file from your computer directly onto the canvas, which creates a frame with an image fill. Alternatively, you can draw a frame, add a fill set to “Image,” and choose your image by browsing or dragging it into the fill box. You can also use plugins to grab images from sources like Lummi and Unsplash. Another method is to use the layout menu on the toolbar and choose "Image," which lets you draw a frame with a placeholder image fill in one step.
What are some best practices for optimizing media (images/videos) for performance in Framer?
Framer automatically optimizes most uploaded images for the web by converting them to efficient formats like AVIF and scaling them based on screen resolution and layout size. Keep large files under hosting limits and use external platforms such as YouTube or Vimeo for long or high-resolution videos. Leave image resolution set to Auto to optimize for the best quality and performance.
How do I integrate rich text or formatted text while keeping layout consistency?
Add text using the Text tool or by double-clicking inside a frame to create a text box. Use Auto Width or Auto Height presets depending on whether you want text to wrap or resize dynamically. Maintain consistent hierarchy and spacing by using shared text styles and aligning text boxes within stacks or layout grids.
Lesson details
