How to Capture Landing Pages to Figma Using Web to Figma

Quick summary

Web to Figma is a Figma plugin that lets you capture any live webpage and import it directly into your Figma board as fully editable design components. Instead of taking screenshots, designers can select, edit, and restructure real web content — including text, images, and layout layers — without leaving Figma.

Steps

1. Open the Web to Figma plugin by right-clicking on your Figma board and selecting Plugins > Web to Figma.
2. Enter the website URL of the page you want to capture and click the Import button.
3. Wait approximately one minute while Web to Figma captures the page and converts it into editable elements.
4. Watch for the import prompt that appears once the capture process is complete.
5. Confirm the captured webpage design has been successfully copied to your Figma board.
6. Review all captured design components listed in the left sidebar of your Figma workspace.
7. Select and edit any component just as you would a regular native Figma element.
8. Expand the organized layers panel to navigate the neatly grouped structure for easy editing.
9. Click on any text element to perform text edits directly within Figma.
10. Confirm your text changes are applied live on the imported design.
11. Select any image or backdrop element and resize it as needed.
12. Confirm your image resizing changes are reflected on the Figma board.