How to Copy HTML Websites to Framer [Step-by-Step]

Step 1: Install the Extension

1. Visit the Chrome Web Store and find the HTML to Framer extension.

2. Click on the "Add to Chrome" button to install it.

3. Pin the extension from the extension menu to have it always visible.

Step 2: Copy Web Elements

1. Open the website you want to copy elements/sections from.

2. Open the Extension from your navbar in chrome

3. Hover over the item you want to copy.

4. Hold Shift to copy multiple elements.

5. Hit Esc while hovering over an item to select its parent element.

6. Ensure you've selected the right element and not the background. Once you are satisfied, move to the next step

Step 3: Paste into Framer

1. Use ⌘ V on Mac or Ctrl V on Windows to paste the copied elements into Framer.

2. Ensure that proper layouting has been applied

3. If layers are getting scrambled, try selecting a parent layer an pasting in a section without stacks enabled.