Back

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

The extension allows you to easily copy-paste web elements from your own websites, regardless of whether they were created with HTML & CSS or any other website builder.

Nabeel

Founder @ SegmentUI

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.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Adheeb

@AdheebHameed

Design Engineer

"…Once you see some results, do not shy away from putting back into the business, it'll give you a better ROI than probably anywhere else in the world. I got tools that sped up my design, like @itsnotnabeel segment…"

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

dudu

@Duduagency

Founder, ToolFolio

"@itsnotnabeel is adding Value to Segment UI Every. Single. Day. One of my favorite @framer Resources out there"

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Light, Dark & Dynamic Kits

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Adheeb

@AdheebHameed

Design Engineer

"…Once you see some results, do not shy away from putting back into the business, it'll give you a better ROI than probably anywhere else in the world. I got tools that sped up my design, like @itsnotnabeel segment…"

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

dudu

@Duduagency

Founder, ToolFolio

"@itsnotnabeel is adding Value to Segment UI Every. Single. Day. One of my favorite @framer Resources out there"

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Light, Dark & Dynamic Kits

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Power up your Framer Workflow

Constantly updating, 360 degree solutions for Framer. Build more, design faster, sell more, charge more

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Ajinkya Gajbhiye

@Ajinqya

Designer

"Amazing work Nabeel. This should be really helpful for people wanting to launch framer websites at speed."

Marc Andrew

@mrcndrw

Founder, Cabanna Design System

"This is a no-brainer. Nabeel is a master at his craft and someone who only builds products of extreme value to the end-user. 100% recommend."

Brian

@ZeroSevDesigns

Framer Partner

"…The Fastest way to get started on your framer projects…"

Carlos G

@CarlosGeeronimo

Framer Designer

"Anyone who creates things with Framer should keep the SegmentUI kit in mind to improve their workflow!"

Ghostncrypt G

@ghostncrypt

Designer

"…SegmentUI has been one of the best value purchases I have made this year by far, with constant updates and a wide selection to choose from. “

Adheeb

@AdheebHameed

Design Engineer

"…Once you see some results, do not shy away from putting back into the business, it'll give you a better ROI than probably anywhere else in the world. I got tools that sped up my design, like @itsnotnabeel segment…"

Jemsee D

@jemsee_d

Official Framer Partner

"…Watch your vision come to life without writing a single line of code…"

Danny Sapio

@Dannysapio

Founder, FramerOverrides, FramerAuth

"If you're a freelancer, agency, or just someone who makes a lot of Framer sites then this such a solid investment and time saver. Nabeel you crushed it on this one dude!"

Punit Chawla

@PunitChawla

Founder Designwings UX/UI School

"…Its basically a never ending list of 100s if not 1000s of templates in one place"

Charles Brewer

@charlesbrewer

Designer

"Great job! This is super useful to the Framer community!..."

Anand Koonath

@anand_koonath

Developer

"Yoo, SegmentUI was one of the first sites I had used to learn Framer. Pumped to see you make a UI kit..."

dudu

@Duduagency

Founder, ToolFolio

"@itsnotnabeel is adding Value to Segment UI Every. Single. Day. One of my favorite @framer Resources out there"

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$89

One Time Payment

Full Access to the Framer UI Kit

Light, Dark & Dynamic Kits

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$149

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

What is SegmentUI?

Is this a one time payment or a subscription?

Will I get Future updates if I purchase now?

Is there a free version?

Do you have a student discount?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Supercharge your Framer workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.