Add the iPhone SVG

1. Open a published iPhone model, choose its front or rear view and theme, then export SVG.
2. Drag the SVG file from your computer onto the Figma canvas. Figma converts an imported SVG into editable vector layers.
3. Place it inside the mobile product frame. Keep the phone near the title and key product details so the illustration reads as the main image.

Scale it to fit the layout

Select the imported artwork and press K to use Figma’s Scale tool. Drag a corner to resize it proportionally; strokes and effects scale with the artwork. Adjust the frame around the device to keep room for the product name, price, and primary action.

For a narrow layout, let the phone occupy most of the first screen. Keep a consistent margin on both sides and avoid shrinking the artwork until its outline loses clarity.

Adjust available vector layers

Use the Layers panel to select imported layers. If a selected layer is a vector, enter vector edit mode to adjust its points or properties.

The imported SVG may contain grouped shapes and detailed paths. The layer names and boundaries depend on the file, so select only the parts Figma exposes as separate layers.

Choose the view before export

The SVG keeps the selected still view. To change from front to rear, return to the model viewer, choose another view, and export again. The standalone HTML viewer keeps the model controls; the SVG does not.