On this page
Quick steps
Install the extension
Add the Figma Chrome extension from Figma's downloads page and pin it to the Chrome toolbar.
Open the page
Go to the website you want to capture. If you're capturing your own site, a dev server URL keeps more of your variable names.
Start a capture
Click the extension or use the shortcut you set. The capture toolbar appears on the page.
Pick what to capture
Click Capture page for the full page, including parts scrolled out of view, or Select element and click a card, hero or button.
Paste into Figma
Open a Figma Design file or FigJam board and paste with ⌘V / Ctrl+V.
What the Figma Chrome extension keeps
It reads the code behind the page, so you get real layers, not a screenshot. Figma applies some auto layout, font properties and variables where the page has them. For variables to link up, add the library to the file before you paste.
- Components and styles aren't mapped. Everything arrives as plain layers. Turn repeated parts into components yourself afterwards.
- Some sites capture badly. Pages built on heavy JavaScript,
<canvas>drawing, virtualised lists or scroll-driven effects may come out imperfect. - Some pages can't be captured. Chrome's own pages and the Chrome Web Store are blocked.
Figma describes the feature as in active development, so expect the results to change.
Plugins that import a website into Figma
- html.to.design (about 2.4 million users): a plugin plus a browser extension for Chrome, Edge, Brave, Arc and other Chromium browsers. 12 free imports a month, and a paid plan for more.
- Web to Figma (about 244,000 users): converts a URL or pasted HTML into editable layers.
- HTML to Figma by Refore (about 109,000 users): also handles pages generated by AI coding tools.
- code.to.design playground: write HTML and CSS inside Figma and import the result as layers.
How to import a Canva design into Figma
Canva has no Figma export, and "External canva website design" is one of the forum threads asking about it. Pick a route by your Canva plan:
- SVG (Canva Pro, Teams, Education or Nonprofit). In Canva, go to Share > Download and pick SVG. Drag the file onto the Figma canvas. Shapes come through well, but you may need to retype text to edit it.
- PDF (any Canva plan). Download as PDF, then import it with pdf.to.design, which turns pages into editable layers. PDF to Figma is simpler but places each page as an image. Figma Design doesn't import PDFs natively.
- Published Canva website. If the design is live as a Canva site, capture the URL with the Chrome extension or html.to.design, as above.
Going from Figma to Canva instead? Canva's help center recommends its Figma to Canva app, which runs as a plugin inside Figma.
How to move a Uizard design into Figma
Uizard's own Figma plugin only goes one way, from Figma into Uizard. The "Uizard to Figma" thread (about 19.8k views) lands on the same workarounds: download screens as SVG and drag them in, or capture the Uizard preview with html.to.design. For screenshots, Screenshot2Design converts an image into editable layers, though one forum user hit a server error with it.
Clean up after the import
Imported pages are deep stacks of frames. Rename the top levels, delete wrappers you don't need, and check that text uses fonts you have. See missing fonts in Figma if text falls back to a default. For frames, see frame vs group in Figma. If the goal is handing a redesign back to developers, Figma gradient to CSS and Figma Dev Mode cover the return trip.
Frequently asked questions
Can Figma import a website?
Yes. The Figma Chrome extension captures a page or an element as editable layers, and you paste it into a Figma Design file. It's available on all plans.
Is html.to.design free?
It has a free tier of 12 imports a month. A paid plan raises the limit.
How do I import a Canva design into Figma?
Download it from Canva as SVG (paid Canva plans) and drag it into Figma, or download a PDF and import it with a PDF plugin.
Why does my imported website look broken in Figma?
Pages drawn with canvas, heavy JavaScript, virtualised lists or scroll effects don't capture cleanly. Try capturing single elements instead of the whole page.
More in Plugins
- How to install Figma pluginsFigma plugins don't need installing: open one from the Community or run it inside a file. Steps for Figma Design, Dev Mode, FigJam, Slides, saving and admins.
- Figma plugin vs widget: what's the difference?A Figma plugin runs for one person and closes when done. A widget is an object on the canvas everyone can see and use. When to pick which, with examples.
- How to make a table in FigmaFigma Design has no table tool. Build one from a cell component and nested auto layout, add rows in one keystroke, or generate a styled table with a plugin.
- How to add icons in FigmaAdd icons in Figma with an icon plugin, a shared icon library, or by pasting SVG code, which imports as editable vectors. Plus how to recolour and export icons.
- How to make charts and graphs in FigmaFigma has no chart tool. Build a simple bar chart from auto layout rectangles, or use a chart plugin to draw line, bar and pie charts from your own data.
- How to make a GIF in FigmaMake a GIF in Figma from frames with a plugin, export a Figma Motion animation as GIF, or record a prototype. Steps, loop and timing settings, and trade-offs.
- How to Export Figma Variables to JSON (and CSS, Tailwind or CSV)Export Figma variables to JSON natively, convert them to CSS or Tailwind with Style Dictionary, and move variables between files with Variable Master.
- How to Import an Excel Table into FigmaFigma Design can't paste Excel cells as a table. Build one with auto layout, fill it from CSV or Google Sheets, or import .xlsx files with a free plugin.
- Why Is My Figma Export Blurry, and How Do I Fix It?Why Figma exports look blurry or pixelated and how to fix it: export at 2x to 4x, pick the right format, check JPG quality and the 4096px image limit.