HTML to Figma: Import Any Website as Editable Layers

Install the free Codia AI Web2Figma plugin from Figma Community and run it in any Figma file. Paste the page URL, choose a viewport (desktop, tablet or mobile) and a light or dark theme, then import. The page lands on your canvas as editable Figma layers. For a page behind a login, capture it with the Chrome extension first.

Yes, you can start for free. The free plan includes 10 Transform Credits every month, with no credit card. Pro adds unlimited imports, higher-resolution image processing and importing several URLs or Codia files at once.

Yes. Figma plugins run on Figma's free plan, so you don't need a paid Figma seat. You do need the Figma desktop app or Figma in a desktop browser; plugins can't run in Figma's mobile apps.

Yes. Install the Codia AI Web2Figma Chrome extension, open the page in Chrome while you're signed in, and capture it; the extension saves it as a .codia file. Then upload or paste that file in the plugin's Chrome extension import box. This works for dashboards, admin panels, staging sites and other pages a URL import can't reach.

Yes. Choose desktop, tablet or mobile before you import to capture the page at that width, and pick a light or dark theme for sites that support both. Import several viewports to get a responsive set of frames in one file.

Text comes in as editable text layers, images as image fills, and sections, backgrounds, borders and gradients as frames and shapes that follow the page's layout. Codia captures the page as it looks at the moment of import, so animations, scripts and interactions don't carry over.

Yes. Instead of pasting a URL, upload an .html or .htm file, or a .zip of an exported site with its CSS and images, in the plugin's Chrome extension import box. If the ZIP holds several pages, you pick which one to import. It's handy for local builds, HTML exports and pages that aren't online yet.